SVG outputs don't render as intended in image editor softwares. Upon investigation, in https://github.com/tsayen/dom-to-image/issues/64, it was mentioned that dom-to-image library's toSvgElement doesn't actually create a proper SVG element with paths/shapes. It simply creates a foreignObject, 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.
![CleanShot 2024-10-06 at 15 09 06@2x](https://github.com/user-attachments/assets/79092fba-8666-4822-bc07-0a9637eeaed0)
Tried [dom-to-image-more](https://www.npmjs.com/package/dom-to-image-more), an enhanced version of the library, but the output SVG doesn't look like its original too.
Resolves #52
Description
SVG outputs don't render as intended in image editor softwares. Upon investigation, in https://github.com/tsayen/dom-to-image/issues/64, it was mentioned that
dom-to-image
library'stoSvgElement
doesn'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