Problems displaying SVG illustrations (Flash & HTML5 targets)

obscure · May 3, 2018, 12:42pm

Hi again Mark.

Good to hear it fixed your problem - even though just partly.
I just grabbed your .svg, replicated the code from your initial post and deployed to html5.
Here’s what FireFox displays:

Looks like it’s working properly! There must be some other error. Are there any messages in the console? (hit F12 to open the developer tools)
Often it’s also simply a caching problem of the browser, so the problem might go way if you simply clear the cache and reload the page.

jonmoat · May 3, 2018, 1:13pm

Thanks again obscure,

Yes, it was a ‘failed to load’ error in Chrome - good call. Works fine in browser now using a test build (well almost ;-).

What I can see now (and I’m not sure if this is happening with your examples) is a disparity between the image quality in HTML5 (left, which is slightly blurry) compared to Flash (right, which is very crisp):

Any thoughts?

Thanks.

Mark

obscure · May 3, 2018, 1:30pm

That most likely happens because the screen gets scaled to fit the size of the browser window Mark.
Add this line to project.xml:
<window width="0" height="0" resizable="true" if="html5" />

This essentially means that your project doesn’t have a fixed size now but uses the whole browser window as the size.

jonmoat · May 3, 2018, 2:32pm

Thanks obscure,
But I’m afraid that didn’t seem to have any effect (and I cleared my cache).
Any other thoughts?
Best
Mark

obscure · May 3, 2018, 3:34pm

At the moment I’m unsure Mark. Are you using FlashDevelop?
If so, can you zip and upload your project and I’ll have a look.

jonmoat · May 3, 2018, 5:46pm

Hello again obscure,

Thanks for the offer, but I’m using Sublime Text on a Mac (Retina display).

Having had a look around, I read a related post of yours: HTML5 and High DPI

If I add

<window allow-high-dpi="true" />

to the project.xml, I get a crisp display of the SVG in HTML5. That’s great - thanks.

However, the image is much smaller on screen now (50% width and height than previously).

I experimented with stage.window.scale and resizing the Lib.application.window:

var app_w = Std.int(Lib.application.window.width * stage.window.scale);
var app_h = Std.int(Lib.application.window.height * stage.window.scale);
Lib.application.window.resize(app_w,app_h);

But this doesn’t seem to have any effect (the image remains 50% smaller)… Am I missing something?

FYI:
HTML5
stage.window.scale = 2
Lib.application.window.width = 1416
Lib.application.window.height = 759
stage.stageWidth = 2832
stage.stageHeight = 1518
Flash
stage.window.scale = 1
Lib.application.window.width = 800
Lib.application.window.height = 600
stage.stageWidth = 800
stage.stageHeight = 600

What has seemed to work to get the image the same size as in Flash is to multiply the render size of the shape graphics (here 500) by stage.window.scale:

var image_w = Std.int(500 * stage.window.scale);
var image_h = Std.int(500 * stage.window.scale);
		
var svg : SVG = new SVG(Assets.getText("assets/apple_01_testG2.svg"));
var shape : Shape  = new Shape();
svg.render(shape.graphics,0,0,image_w,image_h);
addChild(shape);

Here’s a screenshot of the output in HTML (left) & Flash (right):

As you can see, the result is extremely good. So thanks again for your help in getting this far.

Just trying to digest the implications of this for coding layout, positioning, etc…

Any additional pointers gratefully accepted.

Thanks

Mark

PXshadow · May 5, 2018, 10:38am

I have a libary that may be perfect for you use example of SVGS and proper window resizing. It’s still very much in alpha and only gets tested on ios, Android and html5 for ui apps. But I can try to set you up if you would like to try it. take a look. https://github.com/PXshadow/App, Cheers.

VishwasGagrani · May 5, 2018, 2:13pm

Hi Jonmoat,
I was having a look at the discussion. However, as far as I understand, even when you are trying to load a SVG does not mean Open FL outputs it as SVG. It will output it as PNG only, and that’s why you see the image blurry when the scale changes. You will need to use some library similar to what is shared by PXshadow.

singmajesty · May 5, 2018, 5:52pm

You can use the Haxe SVG library to render to graphics on a Sprite object. This will redraw itself automatically when scaled (but careful not to scale too often or it could get expensive)

PXshadow · May 5, 2018, 6:24pm

Yes my solution is to use a shape for both pngs and SVGS and share a common cached as Bitmap interface. Things like window width 0 and height 0, high dpi, smoothing and proper screen resizing to keep ratio modes make all of the difference. OpenFL easily has the power for high quality shapes so utilizing the tools correctly is important.

jonmoat · May 6, 2018, 7:46am

Thanks PXshadow,
I will give that a try.
Best
Mark

jonmoat · May 6, 2018, 7:54am

Hello VishwasGagrani18h,
The same blurring effect was happening with text in TextFields in HTML5, which was fixed by the setting used for SVGs. So presumably both SVGs and text are rendered as bitmaps and then blurred by some re-sizing/scaling of the canvas/stage/???
I’ll be giving PXshadow’s library a try.
Best
Mark

jonmoat · May 6, 2018, 7:57am

Hello singmajesty,
Could you please explain what that expense is? (And how to possibly mitigate it?).
Thanks
Mark

VishwasGagrani · May 6, 2018, 9:29am

Yes, because that is what BOM Bitmap object model means. Everything ultimately renders as a bitmap.
And by expense, he probably means the CPU usage. If you resize the graphics very frequently, it is possible that the browser may go into a very busy state. And most probably the page, along with the browser will crash.

jonmoat · May 8, 2018, 6:42am

OK VishwasGagrani,
Thanks for the explanation.
Best
Mark

Justlooking · May 9, 2018, 10:09am

Wow awesome threads. Now maybe I know why most of my SVG don’t work on Openfl.
How do you save with ‘Presentation Attributes’ on Inkscape ?

obscure · May 9, 2018, 11:17pm

I’m not that familiar with Inkscape.
You could try: File -> Save as -> Optimized SVG (*.svg) and make sure that ‘Convert CSS attributes to XML attributes’ is ticked.

Justlooking · May 10, 2018, 1:27pm

Thanks for the tip. It helped for some svg.

But still some simple svg don’t work. For example.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="128" height="128" enable-background="new 0 0 97.8 97.8" version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
 <metadata>
  <rdf:RDF>
   <cc:Work rdf:about="">
    <dc:format>image/svg+xml</dc:format>
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
    <dc:title/>
   </cc:Work>
  </rdf:RDF>
 </metadata>
 <path d="M90.567 84.563c0 .498-.231.965-.625 1.265l-39.18 30.124c-.288.221-.628.329-.974.329-.339 0-.675-.105-.964-.32-.574-.433-.823-1.211-.521-1.867l7.879-19.941v-.846c-.362.039-.723.064-1.095.064v-.074l-45.061-.1.178-79.384 102.725-.036v19.669l-83.469-.23v40.299l26.189.113-7.346-18.599c-.266-.667-.051-1.431.521-1.864.572-.433 1.367-.429 1.937.01l39.178 30.12c.395.307.626.77.626 1.267z" fill="#009e73"/>
</svg>

newDesignSimplified_arrowRedo

But on flash it appears as

obscure · May 16, 2018, 11:20pm

Try saving as Plain SVG (*.svg) in this case.

Justlooking · May 26, 2018, 4:20pm

Didn’t work. I had to simplify paths to make the svg work.