SVG/Lottie: Some elements are drawn in wrong locations

[johanhelsing]

Not sure if this is something known... short on time, sorry if it's a duplicate

rendered by bevy_vello:

svg in inkscape:

[johanhelsing]

to be clear it's the grass straws that are in the wrong locations

[simbleau]

Good issue!

Bevy-Vello uses 2 backends for rendering.

Lottie: vellottie
SVG: vello-svg

The Lottie is significantly further in development than the SVG counterpart and because SVG is a monster, there's still a lot of work to get the entire SVG spec working. I could prioritize the entire SVG spec, but that would take years.

A better solution is to provide a simplified SVG that doesn't use advanced features - e.g. Use a tool to translate strokes to paths, resolve relative transforms to absolute positions, etc.

Some ways to produce a simpler file:

• Copy and paste into Figma, then export from Figma.
• Try rendering in Inkscape as an optimized SVG or running it through SVGOMG or some of those tools.
• Convert the SVG to a Lottie: https://lottiefiles.com/svg-to-lottie

I haven't found a perfect solution yet.

[kristoff3r]

I have a similar issue with a simpler file:

[simbleau]

I forgot to mention another technique I commonly do, if all else fails.

You can use the Lottiefiles.com tool to convert SVG to Lottie: https://lottiefiles.com/svg-to-lottie. The lottie backend is more mature as mentioned and should work better.

[simbleau]

I have a similar issue with a simpler file:

Please send the SVG string so I can see what SVG features are being used

[kristoff3r]

Wow github really wants to render it. I've uploaded it here: https://gist.github.com/kristoff3r/b1e510635363e95caa5511534277d6ba

[simbleau]

Wow github really wants to render it. I've uploaded it here: https://gist.github.com/kristoff3r/b1e510635363e95caa5511534277d6ba

If I was to guess, I think transform="rotate(-45)" isn't handled by vello-svg, but should be. I'll work on that.