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
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.
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;"/>
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