🐞 - Blank svg when loading into Figma

riccardoperra / codeimage

A tool to beautify your code screenshots. Built with SolidJS and Fastify.

https://codeimage.dev

MIT License

1.34k stars 72 forks source link

🐞 - Blank svg when loading into Figma #639

Open zach-browserless opened 1 month ago

zach-browserless commented 1 month ago

Which @codeimage/* package(s) are the source of the bug?

Don't known / other

Please provide a screenshot or a video to a minimal reproduction of the bug

No response

Description

The exported .svg files open fine in a browser. But for some reason, when I import them into Figma they just show up as an empty box.

empty svg

Which browsers have you used?

[X] Chrome
[ ] Firefox
[ ] Safari
[ ] Edge

Which operating systems have you used?

[ ] macOS
[X] Windows
[ ] Linux
[ ] iOS
[ ] Android

zach-browserless commented 1 month ago

I also tried dropping the svg into a compressor (https://vecta.io/nano) and it decided to take it from 291KB. Here's the export I'm attempting, I've tried changing some options like background vs no background, but same thing happens. codeimage-snippet_24 to 66B

riccardoperra commented 1 month ago

Hi @zach-browserless , unfortunately this is an issue of the SVG export that relies on foreignObject, which figma doesn't support (I think due to their "security" constraints)

KyleTryon commented 1 week ago

This also happens in Adobe Illustrator