Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Posted by georgeprofenza
georgeprofenza
10,914 Points

svg performance on mobile devices

Hi,

I'm slowly getting back to a bit of web development after a long hiatus. I had a lot of experience with Flash(don't throw rocks, but I actually liked it). Even then, in terms of performance for simple assets and animations using vectors made sense, especially in terms of filesize, but for large animations with many objects it made more sense to use bitmap spritesheets and offload the CPU load(vectors) to memory(pixels) avoiding not only complex vector paths but also the display list.

I'm going to guess that svg performance won't be magically great in html (because you know, html5). I've actually seen some people use bitmap spritesheets in css.

My question would break down to:

  • what are the general guidelines/rough thresholds when choosing images over vectors and vice versa ?
  • trying to figure out how svg performance is on mobile devices I seem to find mixed opinions and more fragmentation (even on devices from same vendor (e.g. iphone5 supposedly handles svg animations better than iphone4)). is there a rough chart or page breaking down performance/svg complexity over multiple devices ? (if so, where ?)

This current video is a nice little peak into using svgs, but it feels like it's barely scratching the surface (perhaps purposefully so).

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points

Canvas has much better performance than SVG, BUT Canvas is not vector graphical, canvas use Pixel Data. There are a lot of performance/cross browser tests between Canvas and SVG, and Canvas always win(YET) both on desktop and mobile devices.

This is why the most of the javascript/html game engines use canvas not SVG.

Just a basic test: http://jsperf.com/html-vs-svg-vs-canvas/5