This is the second time I've seen Lottie mentioned this week, without hearing about it before.
Maybe it's targeting a different use-case, but these things (at least on the Web) appear to be more-heavyweight and less-capable than the things people were doing 20 years ago with Macromedia/Adobe Flash, e.g. compare the animated-GIF-like examples linked from TFA ( https://thorvg-perf-test.vercel.app/ ) to the animations and games found on sites like Newgrounds. Last I checked, the latter make heavy use of emulators like Ruffle, or (based on loading screens) 3D game engines like Unity etc.
As someone who's been out of that scene for a long time: what's the overall state of things, if I want to make long, complex, 2D vector animations? (i.e. not using a 3D engine; and not rendering to video). SVG seems pretty established; but for animation, how capable is Lottie? Does anyone still use SMIL (outside of DVD menus)? Am I better off "rendering" to a big pile of JS + CSS transitions?
The problem is mostly that there doesn't exist some kind of standard for animators where they can make their animations in their editor and then export it for web.
Lottie started out as a plugin for Adobe After Effects to try and let them export animations for use on Web. As far as I know this is the only "half-standardised" way of exporting animations between tools.
If you don't need animations from a dedicated animator then the better solution is using "a pile of JS + CSS transitions", and hopefully this is what Lottie for the web eventually "compiles" into.
Sadly, the Rive app is basically online-only. I was psyched to see it that wasn't yet more Web-based stuff, but after installing the app found you have to set up an "account" and be online all the time to use it.
Lottie is quickly becoming the de-facto standard for UI animations, but live, long running vector animations aren’t really something I’ve seen much of - at this point, video compresses well enough that people will simply use an mp4 or webp for that use case. I know that’s not what you’re looking for but since it isn’t a common use case, I haven’t seen much support for it. Lottie is perfectly capable for this use case, provided you don’t want audio.
The godot svg implementation runs on this. Ive been working on a little font editing tool for a week, but apparently the current build of Thor has a bug with rendering text…
Godot Engine maintainer here: What version and do you have a minimal recreation project for thorvg or godot engine? Hope we didn’t cause you too much trouble. Post a github issue and we can look into it. Thanks for using Godot Engine / Thorvg.
I’ll write up an issue. I hope my comment didn’t come of wrong: I’ve found Godot to mostly be very stable and really well maintained. I quickly found a work-around. Thx for all the work you do!
I'm keen to make a vector game and want something fast. I was excited to read about this thing but when I saw Lottie it made me think that the animations would be quite closed data-wise, whereas the game design I have in mind has dynamic animation that would happen on the fly, or be a mixture of preset animations with elements that react dynamically.
I'm an almost complete code novice so I was wondering if anyone can tell me if this solution would allow animations that are constructed in code rather than just play start to finish etc as a preset thing that can't be easily augmented.
I thought this was interesting: "the implementation maintains a lightweight profile, rendering it particularly advantageous for embedded systems."
But then it goes on to say that "interactivity" is unsupported. Embedded UI would be the first thing I'd be interested in using this for; wouldn't that be hampered by the lack of support for interactivity? I don't know what SVG "interactivity" consists of.
Interested in this as well. I'm currenlty using Skia (through skia-safe) but I'd be quite open to try another renderer if there are performance improvments.
The next step for thorvg for me would be to prove itself as useful at runtime as rive. I would really like to see a real implementation of this in game engines like Godot Engine. Just like there’s a Rive renderer for Defold. But I mean actually being able to render vectors, not that thing where you’re forced to rasterize a sprite sheet, lol.
I’ve been using it to render SVGs at runtime inside Godot, and while I haven’t really stress-tested it Ive found it to be plenty fast on my sleepy thinkpad
What you're doing is rasterizing an SVG at runtime — basically turning it into a PNG, and when there's a scale change you're rasterizing the SVG again at a new resolution.This is useful for displaying statics svgs and things like interfaces.But when we think about actually using animated vector art, characters, objects, this becomes largely useless. since it would require multiple frames and a huge spritesheet would need to be rasterized for that — increasing memory usage and causing many other issues.
I would like a way to truly draw the vectors and actually use real SVGs — especially via Thor/Lottie.
Has anyone recently compared thorvg to blend2D? There's a project I want to use vector drawing for and at one point I was leaning more towards blend2d based on performance and multi threaded capabilities, but ThorVG has had a lot of active development since I last looked. Curious if they've made any significant improvements in the last couple years.
I find that gradient are really badly handled usually in svg softwares, I hope this can improve it.
In inkscape you can make only a one direction gradient, never a gradient with more than 2 points, I don't know if it is a limitation of the format itself.
Also when you have multiple gradients in one file, the software becomes extremely slow. And they don't mix correctly when overlapped with transparency.
It seems a low hanging fruit to optimize that, but I guess there is little traction
I don't quite understand what you mean. Are you talking about color points, you can add many different ones in inks ape (the UI of the gradient tool is admittedly quite bad though). Or do you mean a sort of double gradient, i.e. if goes from red to blue from left to right, but from opaque to transparent from top to bottom? I never had to use such a gradient, so not sure if it's possible.
This is not supported in SVG. There was a Mesh Gradient feature planned for SVG v2.0, but AFAIK that was removed from the draft. It's a shame. Here is an article discussing that. (2018, mind you)
At least that can be done in SVG with a radial gradient (I don't know whether Inkscape exposes it). But for anything more complex than an ellipse, you're out of luck, short of something like a filter effect, which will be very heavyweight and also inconsistent across browsers.
This is the second time I've seen Lottie mentioned this week, without hearing about it before.
Maybe it's targeting a different use-case, but these things (at least on the Web) appear to be more-heavyweight and less-capable than the things people were doing 20 years ago with Macromedia/Adobe Flash, e.g. compare the animated-GIF-like examples linked from TFA ( https://thorvg-perf-test.vercel.app/ ) to the animations and games found on sites like Newgrounds. Last I checked, the latter make heavy use of emulators like Ruffle, or (based on loading screens) 3D game engines like Unity etc.
As someone who's been out of that scene for a long time: what's the overall state of things, if I want to make long, complex, 2D vector animations? (i.e. not using a 3D engine; and not rendering to video). SVG seems pretty established; but for animation, how capable is Lottie? Does anyone still use SMIL (outside of DVD menus)? Am I better off "rendering" to a big pile of JS + CSS transitions?
The problem is mostly that there doesn't exist some kind of standard for animators where they can make their animations in their editor and then export it for web.
Lottie started out as a plugin for Adobe After Effects to try and let them export animations for use on Web. As far as I know this is the only "half-standardised" way of exporting animations between tools.
If you don't need animations from a dedicated animator then the better solution is using "a pile of JS + CSS transitions", and hopefully this is what Lottie for the web eventually "compiles" into.
An alternative to Lottie that's seriously worth considering is Rive. This is personally what I'd choose for non-trivial use cases. https://rive.app
Sadly, the Rive app is basically online-only. I was psyched to see it that wasn't yet more Web-based stuff, but after installing the app found you have to set up an "account" and be online all the time to use it.
What a disappointing PITA.
Lottie is quickly becoming the de-facto standard for UI animations, but live, long running vector animations aren’t really something I’ve seen much of - at this point, video compresses well enough that people will simply use an mp4 or webp for that use case. I know that’s not what you’re looking for but since it isn’t a common use case, I haven’t seen much support for it. Lottie is perfectly capable for this use case, provided you don’t want audio.
I had heard of Lottie, but also saw the post you're referring to; and it called out Lottie for being bloated and hideously inefficient.
The godot svg implementation runs on this. Ive been working on a little font editing tool for a week, but apparently the current build of Thor has a bug with rendering text…
Godot Engine maintainer here: What version and do you have a minimal recreation project for thorvg or godot engine? Hope we didn’t cause you too much trouble. Post a github issue and we can look into it. Thanks for using Godot Engine / Thorvg.
I’ll write up an issue. I hope my comment didn’t come of wrong: I’ve found Godot to mostly be very stable and really well maintained. I quickly found a work-around. Thx for all the work you do!
You might wanna report this to the ThorVG community. (https://github.com/thorvg/thorvg/issues) Maintainers will address it as soon as possible.
I discovered ThorVG recently and started experimenting with using it in Nim for a GUI backend: https://forum.nim-lang.org/t/13072
I'm keen to make a vector game and want something fast. I was excited to read about this thing but when I saw Lottie it made me think that the animations would be quite closed data-wise, whereas the game design I have in mind has dynamic animation that would happen on the fly, or be a mixture of preset animations with elements that react dynamically.
I'm an almost complete code novice so I was wondering if anyone can tell me if this solution would allow animations that are constructed in code rather than just play start to finish etc as a preset thing that can't be easily augmented.
The WebGL antialiasing quality looks poor compared to the software renderer. It could be using MSAA instead of full analytical AA.
I had to use Chrome to test it, as the viewer doesn't play on Safari.
https://thorvg.github.io/thorvg.viewer/
Does it have antialiased masks? That's what's always prevented me from leaving Skia.
it has.
What's the typical modern approach to generating antialiased masks these days?
I thought this was interesting: "the implementation maintains a lightweight profile, rendering it particularly advantageous for embedded systems."
But then it goes on to say that "interactivity" is unsupported. Embedded UI would be the first thing I'd be interested in using this for; wouldn't that be hampered by the lack of support for interactivity? I don't know what SVG "interactivity" consists of.
Current ThorVG itself is more like of a graphics engine; interactivity is typically handled at the toolkit level feature.
Is this in the same space as Skia? I wonder what the differences in code size and performance are.
I’m not sure the performance comparisons, but ThorVG gave me a binary library of 100-200 kb. Also ThorVG doesn’t have any external build requirements.
As far as I see, Skia is the full-blown thing, whereas ThorVG goes the other route, being as small and simple as possible.
What doesn't Thor have though? Lottie already seems like a not-small thing, plus SVG
Interested in this as well. I'm currenlty using Skia (through skia-safe) but I'd be quite open to try another renderer if there are performance improvments.
The next step for thorvg for me would be to prove itself as useful at runtime as rive. I would really like to see a real implementation of this in game engines like Godot Engine. Just like there’s a Rive renderer for Defold. But I mean actually being able to render vectors, not that thing where you’re forced to rasterize a sprite sheet, lol.
I’ve been using it to render SVGs at runtime inside Godot, and while I haven’t really stress-tested it Ive found it to be plenty fast on my sleepy thinkpad
What you're doing is rasterizing an SVG at runtime — basically turning it into a PNG, and when there's a scale change you're rasterizing the SVG again at a new resolution.This is useful for displaying statics svgs and things like interfaces.But when we think about actually using animated vector art, characters, objects, this becomes largely useless. since it would require multiple frames and a huge spritesheet would need to be rasterized for that — increasing memory usage and causing many other issues.
I would like a way to truly draw the vectors and actually use real SVGs — especially via Thor/Lottie.
Has anyone recently compared thorvg to blend2D? There's a project I want to use vector drawing for and at one point I was leaning more towards blend2d based on performance and multi threaded capabilities, but ThorVG has had a lot of active development since I last looked. Curious if they've made any significant improvements in the last couple years.
I can't find it on the website. What does it compare to? And what's the memory/disk footprint, let's say, for using it in a Flutter project?
So far, there is only one announced performance comparison. 'rlottie' is used for animation stickers in the Telegram app.
https://lottiefiles.com/blog/working-with-lottie-animations/...
Using Devin's DeepWiki for the docs page gives me an uneasy feeling. I would rather have real docs.
pros and cons vs. skia?
Does it has a stable c API?
Yeah, it has a simple but full featured C API. I used it to provide the Nim wrapper for it.
Are we seriously going to reinvent Macromedia Flash now
Are we seriously arguing that any implementation of animated vector graphics is reinventing Macromedia Flash?
quite apart from which, "flash but done right" would be amazing!
I find that gradient are really badly handled usually in svg softwares, I hope this can improve it.
In inkscape you can make only a one direction gradient, never a gradient with more than 2 points, I don't know if it is a limitation of the format itself.
Also when you have multiple gradients in one file, the software becomes extremely slow. And they don't mix correctly when overlapped with transparency.
It seems a low hanging fruit to optimize that, but I guess there is little traction
I don't quite understand what you mean. Are you talking about color points, you can add many different ones in inks ape (the UI of the gradient tool is admittedly quite bad though). Or do you mean a sort of double gradient, i.e. if goes from red to blue from left to right, but from opaque to transparent from top to bottom? I never had to use such a gradient, so not sure if it's possible.
Take a triangle, put a different color on each vertex, tri-interpolate
This is not supported in SVG. There was a Mesh Gradient feature planned for SVG v2.0, but AFAIK that was removed from the draft. It's a shame. Here is an article discussing that. (2018, mind you)
https://librearts.org/2018/05/gradient-meshes-and-hatching-t...
EDIT: I assumed this is SVG renderer, but now i think it may not be bound by SVG limitations.
Do you mean a curved gradient as in a rainbow?
At least that can be done in SVG with a radial gradient (I don't know whether Inkscape exposes it). But for anything more complex than an ellipse, you're out of luck, short of something like a filter effect, which will be very heavyweight and also inconsistent across browsers.
Oh that could be useful as well!