search

lyqht / mini-qr

Generate customized qr codes easily 👾
https://mini-qr-code-generator.vercel.app
GNU General Public License v3.0
529 stars 73 forks source link

fix svg output not rendering in image editor softwares #54

Closed lyqht closed 3 weeks ago

lyqht commented 3 weeks ago

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'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.

CleanShot 2024-10-06 at 16 38 19@2x

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.
vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mini-qr-code-generator ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 6, 2024 8:38am