SVG/Lottie: Some elements are drawn in wrong locations
johanhelsing opened this issue · comments
Not sure if this is something known... short on time, sorry if it's a duplicate
rendered by bevy_vello:
svg in inkscape:
to be clear it's the grass straws that are in the wrong locations
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.
I have a similar issue with a simpler file:
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.
I have a similar issue with a simpler file:
Please send the SVG string so I can see what SVG features are being used
Wow github really wants to render it. I've uploaded it here: https://gist.github.com/kristoff3r/b1e510635363e95caa5511534277d6ba
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.