GPU accelerated CSS animation vs SVG native animations

Question

My question is, what is faster, native SVG animation tags, like for example:

<path d="something very long and non-human-friendly">
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" from="0" to="360" begin="0s" dur="3s" fill="freeze"
    repeatCount="indefinite" />
</path>

or CSS animations, for example:

path {
    animation: foo 3s ease-out infinite;
}

@keyframes foo {
    50% {
        transform: rotate(360);
}

Maybe it's better to use SVG animations since SVG has better browser support?

Also related: Since CSS transforms trigger hardware acceleration, I was also wondering if native SVG animation tags also trigger GPU acceleration or are painted by the browser. If not, is it possible to force hardware acc on SVG native animations?

Cheers!

They are both the same. UAs generally have one animation engine which does both kinds of animation. — Robert Longson, Aug 10 '14 at 21:45
Note: UA = User Agent = Web Browser. @RobertLongson: I'd notice that JS CSS updates can lead to jerky movement on slower PC/tablets, while seems smoother. Does that mean JS manipulation doesn't use animation engine? — Alvin K., Aug 11 '14 at 04:16
Correct. It can't be accelerated quite so much as the UA doesn't know as much about what will happen in the future. — Robert Longson, Aug 11 '14 at 06:16
@AlvinK. So CSS transforms are performed by the UA? I thought they were hardware accelerated. I have a page with an SVG that animates one path inside it with SVG tags, and later down in the page I have a div animated with a CSS transform: translate. No JS. When I scroll the page, it slows a bit the painting when I reach the SVG, but it scrolls normal when I reach the div. That's why I asked, if SVG tags are slower or can not be hardware accelerated, I was gonna animate the path inside the SVG with CSS transforms instead. PS. The SVG is not part of the DOM, it is embedded as an external image. — Xirux Nefer, Aug 11 '14 at 13:02
@RobertLongson: Is it generally true to say that external SVG which contains `` is rendered by the animation engine? Can't tell w/o confirming with source code, though I notice that embedded SVG with "animate" tag does run faster on UA. — Alvin K., Aug 11 '14 at 18:16
This seemed like a relevant and in-depth read - http://www.useragentman.com/blog/2012/09/23/cross-browser-gpu-acceleration-and-requestanimationframe-in-depth/ As does this post give some interesting information related to your question - http://blogs.msdn.com/b/ie/archive/2011/03/08/comparing-hardware-accelerated-svg-across-browsers-with-santa-s-workshop.aspx — Frankie Loscavio, Nov 24 '14 at 04:33
Seems that perf wise, they are the same (see here: http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version#/21 ). So I would opt for SMIL for wider browser support and more advanced options or JS library like GSAP which comes with performance optimization beyond GPU acceleration. — Teo Dragovic, Dec 11 '14 at 13:45
one thing for sure. They are treated differently by the UA, at least in Chrome/Safari https://jsbin.com/wodenoxaku/1/edit?html,css,output — noru, Mar 06 '19 at 06:59

score 1 · Answer 1 · answered Jan 28 '15 at 11:27

At the moment, it does not seem to be a complete answer about this topic.

I looked around for more informations, and answer often depends by which implementation you use with SVG (embed, inline) and what browser you choose to support.

As a general rule, browsers' developers tends to concentrate their work on CSS3 optimization rather than SVG one, due to the more frequent use of first one.

In this simple Wikipedia page, you can find some examples and other details about current status, while this page on Mozilla developer center highlights different performance of a transition accelarated by GPU due to use of CSS transform.

score 1 · Answer 2 · answered Feb 04 '15 at 18:32

I did a lot of reading on this topic as I was having performance issues on my multi-platform Phonegap app and to keep things simple:

No one really knows which CSS are universally hardware accelerated as standards implementation is fragmented, it looks like iOS is leader in CSS HW acceleration but do you want to limit optimal experience to that market share?

Eventually I came across this article which tries to explain that JS solutions have better compatibility and performance. While adding abilities that are simply out of reach for CSS. Do Keep in mind that both articles are written by the creator of GSAP and thus biased, but after simply giving it a try I was convinced.

A more elaborate version of the aforementioned article can be found here.

I'm currently working on a project which used both GSAP and CSS animations. Using Chrome as reference, GSAP outperforms CSS animations big time in both framerate and CPU efficiency, but only if all animations in the scene are GSAP and we manually specified a framerate for GSAP (notice we're not using GSAP 3 yet, though). It was shocking to me, and a big dissapointment, but the difference was huge. If you can and performance is an issue, i'd recommend going GSAP and avoiding CSS animations whenever possible. — Ignacio Segura, Jun 28 '21 at 10:26

score 0 · Answer 3 · answered Mar 05 '17 at 09:20

As others pointed out the performance depends on the executing software. Nevertheless, it might be helpful to know, that (as JGM.io wrote) JS animations are considered to deliver a higher performance than CSS3 animations.

Besides GSAP there is also an animation library called velocity.js which has support for SVG animations. The following article gives a quick introduction into SVG animations with velocity.js and why it is better than the alternatives https://davidwalsh.name/svg-animation (written by the creator of velocity.js, Julian Shapiro).

So if you are aiming for maximum performance and compatibility in a browser/webview/e I would advise you to use a js animations library like velocity.js. But also consider that performance is not the only metric for such a choice. So far I had a very positive experience with velocity.js but by choosing a library your work will always depend on it.

NVRM · Answer 4 · 2019-04-05T08:47:02.723

As of 2019, the situation is still pretty unclear.

Performances had greatly evolved in all cases.

On high loads, in the view of avoiding interface lags, while in heavy use of the javascript engine, i found SVG faster at load and in rendering than css animations, and really one level up about response time when resizing the window or zooming. Also against js animated canvas.

This the case for both native animated svg and js animated svg.

This really depend of the device.

Either way, all that is not fixed. As I dev on Linux, found my app running smoother on some other machines of the same type.

This has a sad explanation, still in Linux/Firefox 66 the GPU acceleration is disabled by default. By enabling in about:config, the performances increased to another world for both rendering and the cpu usage.

In about:config, switch to true the following entry:

layers.acceleration.force-enabled

Not sure why it is disabled by default, probably just a matter of license. This shows remaining space for future improvements.

https://community.chakralinux.org/t/how-to-enable-opengl-compositing-in-firefox-for-a-smoother-browsing-experience-with-less-cpu-usage/7543

For Linux/chromium, this is also disabled by default , this require extensive manipulation to be enabled:

https://www.linuxuprising.com/2018/08/how-to-enable-hardware-accelerated.html

GPU accelerated CSS animation vs SVG native animations

4 Answers4