🚀 - Reduction of SVG export size

[afonsojramos]

Which @codeimage/* package(s) are relevant/releated to the feature request?

Don't known / other

Description

This is an SVG generated by the example code provided. It is a little bit over 7MB. Analysing the SVG itself, the inline styles seem a little bit overpopulated in my opinion. Is there any way to reduce this? 7MB feels a bit much for the chunk of code below. If the point is to export in image only, I can see the value, but at the moment, the SVG export doesn't make much sense.

[riccardoperra]

Hi @afonsojramos, unfortunately there are some limitation about the SVG export (which is using html-to-image under the hood) since it relies on foreignObject and probably inlining both styles and fonts (this could be de problem) increase a lot the file size.

I need to do some investigations in order to find a workaround about this, maybe using different libraries that generate SVGs that doesn’t relies on foreignObject (in order to let them work also in figma, illustrator etc)

I already did a poc trying to use Satori or dom-to-svg but there were a few issues about the rendering and styles support 😅 Need to check again if things are changed these months

Anyway, thanks for pointing me that issue. In case we can let this issue open in order to updates you all

[riccardoperra]

Hey @afonsojramos, as I mentioned the issue was related mainly to the font embedding 😄

With the PR I'm merging #433 there will be some adjustment in order to reduce the svg size, hope nothing else break.

May I ask what is your use case for using the SVG?

---

Some info about the changes

• The svg now will embed only the used fonts, which decreased the size a lot (7mb -> 900kb)
• Applied styles are now cleaned up a bit with a mechanism that does not apply the default properties unless overridden (900kb -> 600kb)

Unfortunately there are there are still limits about the SVG since it relies on <foreignObject>:

• Svg cannot be used on tools that doesn't handle DOM elements or doesn't convert SVG to images directly like Photoshop or Illustrator or Figma. In this case it's recommended to use a PNG image with Scale x3 if you need to a better quality. Svg files could still be used on tools like tldraw or excalidraw.
• Font embedding depends on the device. I noticed that SVG exports on iOS increase again the size (+1/2mb than the desktop) since the embedded fonts downloaded by google fonts are in different formats (I think it downloads woff instead of woff2). This issue will be may fixed in the futuer.

I thought about a refactoring in order to do not use anymore the foreignObject-based rendering but I'm on vacation and it requires too much effort right now.

I already tried to use some libraries that converts directy dom nodes to svgs but there are a lot of
rendering issues for text and some element positioning, I probably need to rebuild the whole frame using well supported css properties without complicating the styles.

The closest alternative is to use https://github.com/vercel/satori but uses an even more different renderer and in fact forces me to have to rewrite everything. I can take advantage of some of the node cloning I'm using now but many properties are not supported

Here's attached the two svg (broken and fixed)

[riccardoperra]

Deployed with 1.0.10 release

[afonsojramos]

@riccardoperra my main use would be to use it on a website as an easier way of displaying code without building in a renderer solely for that purpose. The changes you made already help out a lot in that regard. Happy new year!

[riccardoperra]

Clear, I think that the "Embed" feature which I will work on in the near future may be useful to you could be useful to you. I don't have a release date yet, but basically it will be possible to render the content directly by adding an iframe with a defined link 😄

Thanks again and happy new year 🎉