SVG basics

SVGs are called Vector graphics because they define graphics as a series of vectors, unlike raster graphics, which define graphics as a series of pixel colours. This means if an image contains a black line, rather than setting every pixel along that line to be black, a description of the line is stored. When you view an SVG, the program you're using to view it, for example your web browser, looks at the description and calculates the colour of each pixel. The advantage of this approach is that it makes graphics Scalable: you can zoom in on the image as much as you like and it will never pixelate because the image will be re-rendered after each zoom.

In this series of tutorial I aim to cover the basics of drawing shapes in SVG. For complex drawings you may want to try Inkscape (which is free) or Adobe Illustrator. As much as possible, I hope to include interactive demos like the one below (created using SVG) to allow you to drag the control points around and see what the what code would create that shape. I hope this will give you a more intuitive sense of what each attribute does. This style of demo was very much inspired by Bret Victor, and if you have a spare hour, I recommend watching this video.

I also have tutorials on some more advanced aspects of SVGs.