What’s Essential to Know about SVG

SVG is a relatively new technology that allows for improved rendering of image-like content. It’s a preferred method for adding artwork to mobile and web apps because it performs faster than traditional jpg and png images.

SVG are essentially vectors – you can increase and decrease their size without losing quality (using code)

SVG are better than icon fonts because: they are image tags, which makes them better for accessibility and they have more controls (e.g., class name).

Apps are built using templates. Here’s how to templatize SVG:
use inline HTML, and wrap the SVG in a DEF tag, as DEF prevents it from rendering. You can use it one time and then point to it in the templates. SVG is rendered in the DOM, so there’s no HTTP request (HTTP requests slow apps down) – then use CSS and JavaScript to make it increase or decrease in size, animate, etc.

1) a PNG might render faster if the SVG has a lot of vector points – thus SVG is more for boxier artwork, such as charts and graphs or logos that don’t contain a lot of complex lines

2) SVG needs fallback support for Android 2 (and IE8)

based on LukeW’s notes from C.Coyier’s lecture:

icon set in this artwork can be found here: