search

openfl / svg

Provides SVG parsing and rendering for OpenFL and Haxe
MIT License
68 stars 30 forks source link

SVG gets rendered horribly wrong #71

Open Gulvan0 opened 2 years ago

Gulvan0 commented 2 years ago

Describe the bug The contours of a simplistic black-and-white SVG get heavily distorted on rendering, though the general shape is still somewhat recognizable. As if some of the key points of the Bezier curves are misplaced (and some aren't). Favicon is also affected by this bug.

To Reproduce Just launch the app

Expected behavior Shape rendered by openfl and shape rendered by browser when the SVG file itself is opened should look the same

Screenshots Original image (tested in latest Chrome & Maxthon): image

Result in OpenFL: image image

Environment Target: html5 Haxe version: 4.2.4 Libraries:

lime 7.9.0
openfl latest git (bug is present even for stable 9.1.0)
svg latest git (bug is present even for stable 1.1.3)

Additional details <icon> tag can be removed from project.xml, it doesn't affect anything. It is there just to demonstrate that this effect is present even for the favicon. This bug forced me to try unchecking "Make Adaptive" and choosing "Presentation Attributes" style preference in the Adobe Illustrator SVG export options. The attached archive is the final version of the repro. Still, the bug is there for the default export settings too.

Testing.zip

Gulvan0 commented 2 years ago

After some trial and error, I concluded that the cause of this bug is a faulty relative path commands processing. Still unsure whether this is due to the accumulated floating-point error or some specific commands lead to the wrong results.

hydroper commented 1 year ago

After seeing your issue I got a bit worried about this SVG library, so I used Adobe Animate CC instead to convert a SVG into a SWF movie...

Gulvan0 commented 1 year ago

After seeing your issue I got a bit worried about this SVG library, so I used Adobe Animate CC instead to convert a SVG into a SWF movie...

It's usable, but you need to manually convert every path in those of your svgs that are rendered wrong to all-absolute. This is a good tool for that purpose: https://yqnn.github.io/svg-path-editor/