Problems displaying SVG illustrations (Flash & HTML5 targets)

jonmoat · May 2, 2018, 5:04pm

Hello All,

We are having difficulty displaying colour SVG illustrations (originally created in Adobe Illustrator as EPS) using https://github.com/openfl/svg. With Flash target the SVG images appear black and white with some elements missing and/or additional ones appearing when rendering. With HTML5 target the entire index page is black. Our main target is HTML5 and I’m trying to make a case for using Haxe/OpenFl (they are displaying fine in standard HTML pages).

We are using this code to test:

package;

import openfl.display.Sprite;
import openfl.Assets;
import openfl.display.Shape;
import format.SVG;

class Main extends Sprite {	
	
	public function new () {	
		super ();
		var svg : SVG = new SVG(Assets.getText("assets/apple_01.svg"));
    	var shape : Shape  = new Shape();
    	svg.render(shape.graphics,0,0,500,500);
    	addChild(shape);		
	}	
}

OpenFl 7.1.2, SVG 1.1.2, Lime 6.2.0, Haxe 3.4.7

Any help gratefully received.

Thanks

Mark

NB: we have a large number of these SVG files (1,000+) and really want to avoid converting them all to PNG format as we will be displaying them at various sizes in our app.

I’m attaching 3 files:

How the image looks as PNG (apple_01.png).

A screen capture of how the SVG is displaying in Flash target using above code (apple_01_flash.png).

The original SVG (apple_01.svg).

obscure · May 3, 2018, 9:54am

Hi Mark.

I guess part of your problem is the .svg itself. Your sample appears as a black silhouette in any browser I’ve tried. After looking at it’s data it makes sense though.
There are five shapes of which four link to a css class definition which doesn’t exist.
After adding a definition for the apple’s shading as well as linking the apple’s surface to the gradient definition inside, the browser is displaying it succssfully.
modifiedApple

Edit: Sorry! I just realized if you upload a svg to the forum it strips out the style definition. So maybe you’ve uploaded a proper svg which simply got corrupted.
Nevertheless if you’re using Illustrator -> save as svg - be sure that ‘Styling:’ ‘Presentation Attributes’ is selected. Maybe the svg parser doesn’t like the style definition.

jonmoat · May 3, 2018, 12:33pm

Thanks for looking into this obscure - very much appreciated.

After saving from Illustrator as you suggested with ‘Presentation Attributes’ selected, the SVG now renders just fine for me in Flash (screenshot):

apple_01_flash_new02

But HTML5 still displays just a black screen (using default backend & opening the default index.html created with HTML5 build).

I’ve uploaded a copy of the updated apple01 SVG to wetransfer to avoid corruption uploading to the forum: https://we.tl/OAoY7kxgKf

HTML5 is our main target. Any further help greatly appreciated.

Thanks again.

Mark

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.