showcode icon indicating copy to clipboard operation
showcode copied to clipboard

SVGs opening as blank documents in vector editing software

Open lessonhacker opened this issue 2 years ago • 5 comments

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.

lessonhacker avatar Nov 13 '21 21:11 lessonhacker

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

stevebauman avatar Nov 14 '21 21:11 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 avatar Nov 18 '21 03:11 stevebauman

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

stevebauman avatar Nov 18 '21 13:11 stevebauman

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

lupinitylabs avatar Dec 30 '21 00:12 lupinitylabs

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.

lessonhacker avatar Dec 30 '21 00:12 lessonhacker

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

stevebauman avatar Jan 30 '23 22:01 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?

Untitled-1

Another example:

Untitled-1 (5)

stevebauman avatar Jan 30 '23 23:01 stevebauman

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

grafik

lupinitylabs avatar Jan 31 '23 00:01 lupinitylabs

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.

stevebauman avatar Jan 31 '23 00:01 stevebauman