svg animation hardware acceleration

[Alan Roy]

Is Chrome ever going to support H/A on SVG element transforms and opacity properties? Or is this not realistic? The re-painting is causing some jank I'd like to avoid.

[Philip Rogers]

Yeah, the slimming paint project is a multi-year refactoring that will let us finally do this: https://www.chromium.org/blink/slimming-paint We're getting closer!

For now, I recommend putting your SVG content in a <div>, and adding a 3d transform to the div which will cause it to be composited.

On Fri, Apr 1, 2016 at 1:13 AM, Alan Roy <aro...@gmail.com> wrote:

Is Chrome ever going to support H/A on SVG element transforms and opacity properties? Or is this not realistic? The re-painting is causing some jank I'd like to avoid.

--
--
Chromium Discussion mailing list: chromium...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-discuss

---
You received this message because you are subscribed to the Google Groups "Chromium-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-discu...@chromium.org.

[Alan Roy]

That's great to hear! Unfortunately, the div workaround won't work since I'm animating several SVG paths inside of an SVG element. Unless you know how to inject divs inside an svg? I heard about foreign content but I don't think it has good browser support.

[Philip Rogers]

Are you animating the path contents (like a square to a circle), or just the path position and transform?

On Mon, Apr 4, 2016 at 12:58 PM, Alan Roy <aro...@gmail.com> wrote:

That's great to hear! Unfortunately, the div workaround won't work since I'm animating several SVG paths inside of an SVG element. Unless you know how to inject divs inside an svg? I heard about foreign content but I don't think it has good browser support.

[Alan Roy]

I'm doing both, and I understand certain animations may never get the H/A since they fall outside transforms/opacity, but what I'm asking specifically for this topic are the CSS H/A properties like transform and opacity. I am animating the opacity of several groups inside an SVG for example. If they were in separate divs, I could apply the transform to the div as you mentioned, but the groups need to stay inside the SVG, and animating those groups (or paths inside the groups) cause re-paint (even if it's just transforms or opacity).

[Philip Rogers]

When changing paths (e.g., tween a circle to a square), there are no proposals I know of to hardware accelerate that in a browser engine today. The servo folks are going down a path where paths are not rebuilt and this could potentially be done in their new engine, but that's a long way out.

For animating opacity and transforms, the only way to do that with acceleration today in Chrome is to put it in a div. This means reorganizing content in ugly ways to get opacity to match (e.g., duplicating the opacity property), and this makes some effects like filtered groups impossible :/

When slimming paint completes we will be able to do this in blink, but that's 6 months out at a minimum.

[Alan Roy]

Gotcha. Thanks Philip! I'm glad that improvements are coming. Svg animations are one of my favorite things, but they pale in comparison to canvas performance on more complex elements. Any performance improvements are very welcomed :)