Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG gets rendered horribly wrong #71

Open
Gulvan0 opened this issue Mar 24, 2022 · 3 comments
Open

SVG gets rendered horribly wrong #71

Gulvan0 opened this issue Mar 24, 2022 · 3 comments

Comments

@Gulvan0
Copy link

Gulvan0 commented Mar 24, 2022

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
Copy link
Author

Gulvan0 commented Mar 25, 2022

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
Copy link

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
Copy link
Author

Gulvan0 commented Dec 16, 2022

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants