Learning SVG

An SVG is an image that defines a shape in vectors. Instead of a map of pixels to render, SVGs define a set of paths (direction, color, length) for the browser to render. The major advantage of this file type is that vector graphics can scale seamlessly to any size browser. This markup defines a very simple SVG:

<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />

It produces a triangle shaped like this:

SVGs are fairly rare in that their native filetype is just a text file including the XML markup that defines the shape. XML is a markup language similar to HTML that defines page content in a nested format (for all intents and purposes they will be interchangeable, EXCEPT that XML is case sensitive unlike HTML).

Drawing SVGs In-Line

<svg width="200" height="250">
   <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
   <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
   <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
   <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
   <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/>
   <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

Each of these XML code blocks defines a different shape that will be drawn in browser, rect is a rectangle, circle a circle, polygon a polygon, and so on. In addition, each XML tag can accommodate a couple additional properties like- stroke (border) and fill (background-color) that define more styling properties of the shape defined.

Using an SVG Library

There are some cool javascript libraries that allow you to write your SVG using JS. One of my favorites is Snap SVG. This framework makes drawing and editing SVG elements really easy. In their website tutorial, they demonstrate how to build an SVG circle:

// First they create the drawing surface out of existing SVG element
var s = Snap("#svg");
// They then create a big circle in the middle:
var bigCircle = s.circle(150, 150, 100);
// By default its black, but you can change its attributes
fill: "#bada55",
stroke: "#000",
strokeWidth: 5});

Pretty cool, huh?

Behind the scenes all this library is translating the JS you write into XML markup and appending it to the element that you specify - but it can make adding hover effects and other interesting interactions far simpler.

Using SVG Editing Software

Generally if you want to create more complex SVGs you should use a vector based editing software suite like Inkscape or Adobe Illustrator and export those files. In this case you can simply drop the SVG into and image folder and use it as you would any other image. The only difference is that your SVGs will always scale to any size device!

There are incredibly cool things that you can do with SVGs, like use them as filters and clipping masks on your traditionally rendered elements. More on this in later posts!