Why talk about SVG?

On this website we are going to teach you how to create visualizations with D3.js. Because most of these visualizations will be drawn with Scalable Vector Graphics (SVG), it's important to first have a basic grasp of SVG.

What are Scalable Vector Graphics (SVG)?

Scalable Vector Graphics (SVG) is a markup language similar to HTML that allows you to specify how to draw vector graphics. With vector graphics you specify how to draw with primitives such as lines or circles that have properties such as location and color. This in contrast to bitmap graphics, where the primitive is the pixel which can have a color. When drawn on a computer screen lines and circles are constructed from pixels, but we don't have to worry about the mechanics of drawing circles or lines with pixels when using SVG.

To illustrate the difference let's constrast drawing a line with both vector and bitmap graphics. For simplicity, let's create our own bitmap format.

We'll use "0" to signify white and "1" to signify black. Each line represents a y coordinate, so the first line is y=1. On a given line each comma represents an x coordinate. So the first value is x=1 and after 2 commas we are looking at x=3. Below is our picture of a line using this format.

0,0,0,0,1
0,0,0,1,0
0,0,1,0,0
0,1,0,0,0
1,0,0,0,0

In SVG this same line might be expressed as:

<svg width="5" height="5">
  <line x1="5" y1="1" x2="1" y2="5" style="stroke:black; stroke-width: 1px;"/>
</svg>

This corresponds to a line drawn between the two coordinate pairs (5,1) and (1,5).

Because vector graphics primitives such as lines and circles are abstracted from how they are drawn, with pixels, it is easy to scale vector drawings. Want to double the size of the graphic? Just double the lengths of all the lines! Of course, you would not modify the whole file, you would just specify a scaling factor. In fact, each object and even collections of objects can be scaled and manipulated independently. This will come in handy later when we resize our created graphics to fit on the user's screen.

You might be thinking, "But what if I want to draw 100 lines? That would be a lot of typing!" Don't worry, D3.js provides functionality that makes it easy to programatically create SVG from data, but because we will be using SVG extensively, it's important to have a basic understanding how it works before we have D3.js help us create it.