Chris Coyier - Practical SVG

HEY, EVERYBODY! Lets be honest. Look how short this book is. We dont have much time together. I think its best if we get started on our little adventure with SVG right away.

Heres how easy it can be to use SVG ( FIG 0.1 ):

No joke!

Confession: I was aware of SVGs existence for years before I realized that was possible, in part because early implementations of SVG required the object or iframe element. SVG support on the HTML img element came much later (and with caveats).

Where did this dog.svg file come from, though? Well, the Noun Project is a particularly great source of such images ( http://bkaprt.com/psvg/00-01/ ). There are lots of other places online to get your hands on vector graphics, too. Pretty much all stock photography sites let you filter search results by vector, which is exactly what you need for SVG.

When downloading from the Noun Project, you have the option of downloading the PNG or SVG version. If you download both, youll wind up with two files:

Theyre both the same image of a dog. If you link to either of them from an img tag, youll get the same image of the same dog. So whats the difference?

One important difference is file size. The PNG version is 40 KB and the SVG version is 2 KBliterally twenty times smaller! Well come back to this later.

But the main difference is the file format itself. PNG (like its GIF and JPG cousins) is a raster image format. (Raster images are also sometimes called bitmap images; although the terms are largely interchangeable, well use raster for the purposes of this book.) Think of a raster as a grid of pixels. The difference between raster formats is largely about how that grid of pixel information is compressed. This is all tremendously nerdy, but the common denominator is: pixels.

FIG 0.1: SVG being used in an img tag in HTML.

SVG is different. Think of SVG as a set of instructions for drawing shapes. In fact, this is not a metaphor or abstraction: SVG is literally a set of instructions for drawing shapes. I dont think you can write a book about SVG without saying this, so lets get it out of the way: SVG stands for Scalable Vector Graphics. Vector is the key word here. Think geometry: points, lines, curves, polygons. The instructions in SVG read something like this: Go to such-and-such coordinate; draw a rectangle that is so tall and so wide. Or draw a line, or an ellipse, or follow some more complex instructions and draw the Coca-Cola logo.

Because SVG images are just sets of drawing instructions, they arent tied to any particular pixel dimensions. Our dog.svg is happy to be displayed at 100 pixels wide or 2000 pixels wide. The exact same file will be equally visually crisp at any size. How excellent is that? Ill answer for you since this is a book and not a chat room, sheesh. Its veryexcellent.

This is in stark contrast to raster images, whose file size goes up dramatically the larger the dimensions get. Imagine doubling the size of an image from 100 by 100 pixels to 200 by 200 pixels, as is recommended to ensure that a raster graphic remains visually crisp on a display with twice the pixel density (or what Apple calls a Retina display). Remember: thats not twice as much pixel data; its four times as much. Four times as much data being sent across the network. Four times as much memory used to display it. Four times the bandwidth.