Inline SVG's not vectorized

[Sigurd Heggemsnes]

Bug report

Description / Observed Behavior

Exported SVGs that contain SVGs aren't usable in i.e. Figma or Illustrator since the inline SVG is formatted through .

Expected Behavior

Inline SVG's inside the created SVG should be regular vectors

Reproduction

Export the regular "Hello world" and add it to Figma / Illustrator. The Vercel triangle dissapears.
https://og-playground.vercel.app/

Additional Context

Not sure if this is "working as intended" but being able to use the created SVG's in practice would make this tool really useful. Our current case is to create a "logo generator" where multiple departments can create their own logo based on a default logo.

[Shu Ding]

This is expected, otherwise Satori needs to ship with a rasterizer (but the scope of it is still XML-to-XML conversion). To work around it you can rasterize the SVG first using libs like Resvg.

[Eric Lau]

@shuding I'm curious about the initial decision to convert svg elements into image elements. You mentioned in #86 that nesting SVGs doesn't sound standard. You also mentioned in #98 that the image embedding is closer to browser behavior.

However, a simple nested SVG example like the following seems to work across the major browsers for me (Chrome, Safari, Firefox on macOS):

<svg width="100" height="100">
    <rect width="100" height="25" fill="blue"></rect>
    <svg width="50" height="40">
        <rect width="10" height="10" fill="red"></rect>
     </svg>
</svg>

The above example also works Adobe Illustrator, Figma and Inkscape. Were there specific problems with nested SVGs that you ran into? The current image conversion for nested SVGs doesn't work in these external programs.

The rasterization suggestion is not preferable in my use case as I'd like access to the vectors in Illustrator/Figma/Inkscape.

I also wonder if something like replacing nested SVG elements with g elements with transforms and scales would be sufficient to inline vector elements without having nested SVGs. Or could it be possible to add an option to switch between the two behaviors mentioned in #86?

For some extra context, I work often with vector data visualizations and often export in-browser SVGs into external programs to apply manual changes. I'm exploring using satori to help in some of this process, particularly around text and flex layouts!

EDIT: Now using a workaround with some client-side DOMParser manipulation to extract the SVG element from the image href.