Intro

Scalable Vector Graphics (SVG) is a XML based vector graphics file format. It is primary a image format, but shares the same kind of editability as xhtml would, including laying out by hand via a plain text editor.

Example SVG File

For this project I will be mostly looking at the newest standard subset, SVG Tiny 1.2. (http://www.w3.org/TR/SVGTiny12)

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     viewBox="0 0 30 30">
  <title>Example</title>
  <desc>An Example SVG file</desc>
  <rect x="10" y="10" width="10" height="10" fill="red"/>
</svg>

Basic Shapes

SVG files, being a language that mostly describes visual shapes on a 2d plane, has hardly any plain text, and mostly consists of tags with many attributes. The Basic shapes are rectangles, rounded rectangles, circles, ellipses, lines, and polygons. All these shapes have color attributes for the the shape and the outline.

Example: Basic shapes
<?xml version="1.0"?>
<svg viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny">
  <title>Basic SVG shapes</title>
  <desc>An Example SVG file using all basic shapes</desc>
  <rect x="27" y="70" width="65" height="10" fill="#521"/>
  <rect x="86" y="47" width="7" height="9" ry="2" fill="green"/>
  <circle cx="26" cy="24" r="10" fill="orange"/>
  <ellipse cx="80" cy="80" rx="3" ry="5" fill="red"/>
  <line x1="48" y1="90" x2="69" y2="86" stroke="black"/>
  <polyline points="47,46 46,47 52,58 59,49 58,48" fill="none" stroke="black"/>
  <polygon points="82,40 76,32 66,34 71,26 67,17 76,19
      83,12 84,22 93,27 83,30 82,40" fill="yellow" stroke="grey"/>
</svg>

The attributes here are pretty intuitive. x and y are top left corner of the square, cx and cy is the center of the circle and ellipse, r is the radius, and points is a list of x y pairs.

Path Element

Another basic element is the path element. The path element works like if someone's drawing a shape with a pen, then filling in that shape with color and inking the outline with ink. The path element can draw any of the above shapes and more using a compact notation of points with defined actions. The sequence of actions are then encoded as a single string in the "d" attribute.

M 50,50 H 100
M 50,50 V 100
M 100,100 L 300,100 L 200,300 z
M 100,200 C 100,100 250,100 250,200 S 400,300 400,200
M 0,0 Q 100,0 100,100 T 200,200

All of these have relative and absolute coordinates, depending if the letter is uppercase or not (uppercase is absolute coordinates), and each action, except for M, implies the first point to be it's current position.

Grouping

The g element is like SVGs's div. One can use the transform attribute on the g element to do things like rotating everything at once.

Conclusion

This is just the tip of the iceberg that is SVG. There are many more things that SVG can do that I haven't talked about, like css styling and interactive javascript.

preview of example.svg preview of shapes.svg preview of path.svg