linebender/bevy_vello

SVG/Lottie: Some elements are drawn in wrong locations

johanhelsing opened this issue · 7 comments

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

rendered by bevy_vello:
image

svg in inkscape:
image

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

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:

dead_player
image

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:

dead_player image

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.