fix svg output not rendering in image editor softwares #54
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
lyqht
changed the title
lyqht
added a commit
that referenced
this pull request
Oct 6, 2024
lyqht
added a commit
that referenced
this pull request
Oct 6, 2024
lyqht
added a commit
that referenced
this pull request
Oct 6, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #52
Description
SVG outputs don't render as intended in image editor softwares. Upon investigation, in tsayen/dom-to-image#64, it was mentioned that
dom-to-imagelibrary'stoSvgElementdoesn't actually create a proper SVG element with paths/shapes. It simply creates aforeignObject, which is usually recognizable on web browsers. This is also why the exported SVGs render as expected on this GitHub repo's README.md.However graphic editor softwares like InkScape, Adobe illustrator cannot recognize the SVG file format.
Hence, this PR fixes the issue by swapping the implementation for SVG output to another library, dom-to-svg. Thank you @felixfbecker for creating this library!
Below is a screenshot on InkScape after fix.
Other solutions explored that don't work
Tried SVGCode (underlying mechanism is Potrace) for retracing PNG to SVG, but it doesn't look like how it looked on web.
Tried dom-to-image-more, an enhanced version of the library, but the output SVG doesn't look like its original too.