Material summarized from the open source SVG Essentials.

Vector vs. Rasta

Two ways you can put an image on a computer. One is rasta, putting the image RGB bit-by-bit basis. Photographs are rendered by rasta. The other way, called vector graphics, gives the computer the geometric specifics of the image to be rendered.

SVG is the W3C's vector graphics language, written in XML. Because it is an open specification, it can be used not only to render graphics on the Web, but also to translate an image between two other, other incompatible, image formats (Assuming each format has an SVG translator).

SVG offers basic shapes as elements, such as a circle or a line. Multiple elements may be placed inside a single SVG canvas, using the "cx" and "cv" values to specify the location of a circle and x and y coordinates to set the position of a line.

Elements can be bundled within a single ID, using the "g" grouping element, such as the whiskers for the cat below(View source to see code):

The polyline element allows you to create complex shapes, such as the mouth and ears on the cat:

The path element defines how to draw a multishaped line trhoughy a series of one-letter instructions followed by the coordinates (M=start a line, L=draw a line to a coordinate, A=draw an arc with a specified x and y radius that ends at a specified coordinate). The SVG tutorial uses path to add a nose: