StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POOptimizing SVG-based sprite-sheets for CSS3 HW GPU acceleration in the (mobile) browser
text
Body
copied!<p>Over the past week I've been helping a friend experiment with SVG-based sprite sheets in the browser. We wanted to come up with an <strong>ideal workflow</strong> to prepare, publish, and run high-quality animated graphics in the browser. So ideally have a single source of animation data that would work for small smartphone screens, tablets, retina displays, and desktop browsers.</p> <p>In theory, (vector-based) SVG should be ideal for that, but since SVG is not usually used that much - we decided to test it out. The idea was not to use SMIL SVG (so no SVG-based animation) but instead create an animation sprite-sheet (as you normally would with raster data PNG/JPG) but do this with pure vectors i.e. SVG. Its was a bit bigger but if it works this - it would work even with something thats even more optimized.</p> <p>Plus frame-by-frame vector animation could do great things for our workflow - it would allow us to use the Flash editor to do the animations and then export them to SVG sprite sheets.</p> <p>Anyway, <strong>the result works surprisingly well</strong> but also fails in some areas (please note for test purposes we only worked with Webkit-based browsers i.e. Safari, Chrome, mobile Safari on iOS, and Android ICS).</p> <p>In CSS it's pretty easy to trigger hardware acceleration for a sprite sheet like this (at least in modern browsers with keyframes and steps) - you simply do this:</p> <pre><code>background-image: url(my.svg); -webkit-animation: walk 1s steps(12, end) infinite; </code></pre> <p>to call keyframe-based animation shown here:</p> <pre><code>@-webkit-keyframes walk { from { -webkit-transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(-100%, 0, 0); } } </code></pre> <p>where the use of translate3d should let GPU kick in and the entire thing should be hardware accelerated in iOS mobile Safari and Android ICS browser.</p> <p>Surprisingly enough considering that it's kind of a brute-force technique and a fairly large vector animation (600x600px for the test) - the whole thing flies. But its not perfect - it flickers in Safari before taking off. And in the ICS browser its flickering all the time so its not really usable.</p> <p>So we tried the usual tricks to get rid of flickering such as:</p> <pre><code>-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; </code></pre> <p>But that didn't work. So then we tried rasterizing SVG dynamically in memory and using it as a texture with <em>-webkit-transform: scale3d(1, 1, 0)</em> but that didn't help ether. </p> <p>Finally we just replaced the SVG with a rendered out PNG/JPG sprite sheet of the same size thinking the complex vectors are just too much for the browser - but guess what? Its the same issue - so its not SVG rendering at all - <strong>its a browser drawing issue.</strong> A further proof of that is if we slow the animation down to 1FPS - flickering still persists.</p> <p>Is the image just too big for GPU? Have we reached the performance limit of what you're able to comfortably draw/animate in the browser (mobile in particular)?</p> <p>I would really appreciate ideas/hacks on how to potentially get rid of the flickering (especially since its performing sooo fast). Its just a promising technique - hight performance browser animation that adapts to different screen sizes - <strong>the HTML5 Holy Grail</strong> ;)</p> <p>With a few optimizations such as</p> <pre><code><svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50"> </code></pre> <p>and some CSS magic we're able to have the SVG adapt to its container perfectly and change its size from a single CSS class. It really would work wonders - but alas the flickering.</p> <p>Anyway - please <strong><a href="https://plus.google.com/100663135211813370970/posts/Tmd6tL28ZFD" rel="nofollow noreferrer">read more about it here</a></strong> where you're also able to <strong>try it out</strong>. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload