Bug 53089 – SVG <animateTransform> should use display acceleration in similar way like CSS3 transformations do

• Component: SVG
• Status: NEW

[MH]

We have already working animation acceleration with CSS3 transitions (tested with Safari 5.0.2). 

Well. Very good job!

Why not expand implementation of this algorithm for transformation / SMIL animation of vector graphics too? ;-)

I am thinking about acceleration of basic SMIL <animateTransform>... Very useful when working with large SVG vector graphics like maps, etc.

<animateTransform attributeName="transform" type="scale"...
<animateTransform attributeName="transform" type="rotate" ...
<animateTransform attributeName="transform" type="translate" ...
<animateTransform attributeName="transform" type="skewX" ...
<animateTransform attributeName="transform" type="skewY" ...

By my opinion, this should be not too time expensive...

[MH]

Created attachment 80068 [details]
examples of <animateTransform>

[MH]

Created attachment 80071 [details]
effect of acceleration is nicely shown here

[Dirk Schulze]

Comment on attachment 80068 [details]
examples of <animateTransform>

I'd suggest you reopen the file. Is it that what you want?

[MH]

(In reply to comment #3)
> (From update of attachment 80068 [details])
> I'd suggest you reopen the file. Is it that what you want?

Yes :)

1st SVG file is only demonstration of animations which can be accelerated

2nd file very good shows acceleration effect, when only low-res bitmap is animated, and vector is rendered after animation stops.

Currently in every animation phase vectors are complete re-rendered again and again (tested with Safari 5.0.2). (and thx for MIME correction)

[Dirk Schulze]

(In reply to comment #4)
> (In reply to comment #3)
> > (From update of attachment 80068 [details] [details])
> > I'd suggest you reopen the file. Is it that what you want?
> 
> Yes :)
> 
> 1st SVG file is only demonstration of animations which can be accelerated
> 
> 2nd file very good shows acceleration effect, when only low-res bitmap is animated, and vector is rendered after animation stops.
> 
> Currently in every animation phase vectors are complete re-rendered again and again (tested with Safari 5.0.2). (and thx for MIME correction)

There are different reasons why we don't do it. First for HTML/CSS we're using layers and just the layer gets transformed and re rendered afterwards. We don't have different layers in SVG (with the exception of foreignObject). The second reason is, that you don't want to see pixelation on SVG-  at no time. Thats the reason for using vector graphics. Thats also the reason why we repaint the _necessary_ parts on every update.

[Simon Fraser (smfr)]

It would be quite a bit of work to fix this.

[Dirk Schulze]

(In reply to comment #6)
> It would be quite a bit of work to fix this.
What do you expect to be fixed? The layering on SVG, or the repaint "issue" on the HTML/CSS example? (Please don't say both :-P)

[Simon Fraser (smfr)]

Pixelation during the animation is bug 27684.

[MH]

> There are different reasons why we don't do it. First for HTML/CSS we're using layers and just the layer gets transformed and re rendered afterwards. We don't have different layers in SVG (with the exception of foreignObject). The second reason is, that you don't want to see pixelation on SVG-  at no time. Thats the reason for using vector graphics. Thats also the reason why we repaint the _necessary_ parts on every update.

Yes, I understand 1st reason very good. I supposed something similar ;-)

But the second I can not clearly confirm. A little explanation: I am currently working on huge SVG project which works (JS manipulation with DOM) with complex vector dravings. And in case I need zoom-in such drawing, I have big problem :( Especially on mobile Webkit... pixelation on SVG is really NOT my problem :))

OK, possibly, I can resolve this using XHTML, when SVG will be in your separate layers ;-)

But... there is another issue in such complex SVG...

> we repaint the _necessary_ parts on every update.

In facts: this smart repainting DOES NOT work very well and some elements are not repainted... I am only change color of <path> el. using direct change of stroke="red" or "style="stroke:red"... this is REAL problem.

[MH]

I answer parallel in middle time in Comment #9 

...with REAL complex vector dravings... Especially on mobile Webkit... pixelation on SVG is really NOT my problem :))

So, by my opinion would be great to use layering on SVG...

Maybe create layer only for some special cases of SMIL transformations? 

I mean this:

<animateTransform attributeName="transform" type="scale"...
<animateTransform attributeName="transform" type="rotate" ...
<animateTransform attributeName="transform" type="translate" ...
<animateTransform attributeName="transform" type="skewX" ...
<animateTransform attributeName="transform" type="skewY" ...

[MH]

(In reply to comment #7)
> > It would be quite a bit of work to fix this.
> What do you expect to be fixed? The layering on SVG, or the repaint "issue" on the HTML/CSS example? (Please don't say both :-P)

sorry for mismatch, my answer is Comment #10

[Dirk Schulze]

(In reply to comment #9)
> In facts: this smart repainting DOES NOT work very well and some elements are not repainted... I am only change color of <path> el. using direct change of stroke="red" or "style="stroke:red"... this is REAL problem.

It should work. We're happy about every example that fails on WebKit. Please open a new bug report about repaint issues on SVG and attache the test!

To the pixelation. I'm not sure if SVG 1.2 tiny defines the opportunity to seed up animations like this, but we are implementing SVG 1.1 Full and a viewer with Full support should always guarantee the best quality.

[Dirk Schulze]

(In reply to comment #10)
> I answer parallel in middle time in Comment #9 
> 
> ...with REAL complex vector dravings... Especially on mobile Webkit... pixelation on SVG is really NOT my problem :))
> 
> So, by my opinion would be great to use layering on SVG...
> 
> Maybe create layer only for some special cases of SMIL transformations? 
> 
> I mean this:
> 
> <animateTransform attributeName="transform" type="scale"...
> <animateTransform attributeName="transform" type="rotate" ...
> <animateTransform attributeName="transform" type="translate" ...
> <animateTransform attributeName="transform" type="skewX" ...
> <animateTransform attributeName="transform" type="skewY" ...

We will come to layer implementations later, definitely. But the plan was to use layers for 3D animations. Using layers in general does not guarantee fast rendering. The opposite can be the case.

[MH]

(In reply to comment #12)
> > In facts: this smart repainting DOES NOT work very well and some elements are not repainted... I am only change color of <path> el. using direct change of stroke="red" or "style="stroke:red"... this is REAL problem.
> 
> It should work. We're happy about every example that fails on WebKit. Please open a new bug report about repaint issues on SVG and attache the test!

I can not public private graphic data I use for the project (these are complex technical schemas), but will try to create some example later... the issue may be related with the fact, that XML-SVG data are loaded dynamically by AJAX...

Additionally: I was also trying to use JS "svgNode.forceRedraw" — with no success. I will do some more exploration.

[Dirk Schulze]

(In reply to comment #14)
> (In reply to comment #12)
> > > In facts: this smart repainting DOES NOT work very well and some elements are not repainted... I am only change color of <path> el. using direct change of stroke="red" or "style="stroke:red"... this is REAL problem.
> > 
> > It should work. We're happy about every example that fails on WebKit. Please open a new bug report about repaint issues on SVG and attache the test!
> 
> I can not public private graphic data I use for the project (these are complex technical schemas), but will try to create some example later... the issue may be related with the fact, that XML-SVG data are loaded dynamically by AJAX...
> 
> Additionally: I was also trying to use JS "svgNode.forceRedraw" — with no success. I will do some more exploration.

We do not support svgNode.forceRedraw, but the idea is that you don't need it anyway. Even on dynamic updates, the drawn Image should always be valid.

[Dirk Schulze]

Even if I can understand the concerns of MH. SVG 1.1 does not allow pixelation for more performance (with the exception of SVG Filters). Closing the bug now.

[Simon Fraser (smfr)]

Pixelation is a side-effect of the current hardware animation path when scaling, but that's a bug. This bug shouldn't be closed just because pixelation can happen under some circumstances.

[Dirk Schulze]

(In reply to comment #17)
> Pixelation is a side-effect of the current hardware animation path when scaling, but that's a bug. This bug shouldn't be closed just because pixelation can happen under some circumstances.

I have nothing in mind against reopening this bug, but this bug is about pixelated animation like for CSS. I don't believe that we want this.

And CSS animation and CSS transition is not comparable to SVG. SVG animation implements the sandwich model. Means we have to check on every animation step which animation is active and accounts to the current shape (even because of event based animation we can't add an heuristic that can calculate the last step of an animation). That means we have to relayout and repaint on every animation step. I don't think that the layer based animation can help on SVG. Instead we may have more success on hardware accelerated path drawing. But this is the task of the graphic library and not of WebKit.