SVGs opening as blank documents in vector editing software

[lessonhacker]

In multiple vector editing applications the SVG opens as an empty file in the correct proportions, in particular neither Adobe Illustrator CC 2022 (Mac) or Inkscape can open these files.

[stevebauman]

Hi @lessonhacker! You're right -- I can't even open the SVG's in photopea.com. Let me get this fixed 👍

[stevebauman]

Okay, this is apparently going to be near impossible to fix due to show shiki generates tokens. I investigated very thoroughly, and no one has been able to export shiki tokens to SVG, even on the shiki playground site, SVG's don't get generated properly.

We'll have to wait on this one 👍

[stevebauman]

I've also tried using paid software, but even it can't handle processing shiki tokens...

[lupinitylabs]

Maybe it's a good idea to disable SVG export altogether...
Looking at the SVG source, it's basically HTML & CSS wrapped in an SVG tag. That's not really helpful... and also misleading. I am tempted to always save and keep a format that's scalable and lossless, but now I'm glad I didn't use SVG export. 😅

Carbon does exactly the same, by the way...

[lessonhacker]

Maybe just rename it as HTML export - as I’ve found it really useful to dump the HTML for further manipulation.

…

On 30 Dec 2021, at 00:16, Oliver Matla ***@***.***> wrote:  Maybe it's a good idea to disable SVG export altogether... Looking at the SVG source, it's basically HTML & CSS wrapped in an SVG tag. That's not really helpful... and also misleading. I am tempted to always save and keep a format that's scalable and lossless, but now I'm glad I didn't use SVG export. 😅 — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.

[stevebauman]

This may be the ticket: https://www.npmjs.com/package/dom-to-svg

[stevebauman]

Results aren't perfect using dom-to-svg, but they're the best I've seen. Shadows are lost unfortunately, along with background gradients.

Is the below good enough for you guys?

Another example:

[lupinitylabs]

I don't know how it looks for you, but it's completely shot in Firefox:

[stevebauman]

Yea it’s similar to that (on my phone at the moment so can’t post screenshot of Chrome example). Looks like the tech is getting there but not entirely yet.

I’ll keep this issue closed for the time being. I may dive into this package and see if I can commit any PRs to resolve these issues.