Getting to Know SVG

D3 is commonly used with something called Scalable Vector Graphics (SVG) to create graphs and charts. SVGs have been around for a long time, and they are quite powerful.

SVG is a text-based image format. Whenever we think of images, we tend to think of a group of pixels on the screen combined to make up something we can visually recognize. You can use software like Photoshop to create images. The cameras on phones can take pictures that we can upload onto the web as an image. Some of the most common formats for images are JPEG, PNG, and GIFs.

There is another format available called SVG. However, SVGs are not generated like traditional images. Rather than it being something that a program or device can produce, it is created with code. Code that you can read or write. The benefit of this is smaller file size.

There are programs out there that can generate SVG images, but we will get to that later. Le’s step back for a moment and take a look at this phrase, Scalable Vector Graphics.

Breaking it down

What exactly is an SVG? An SVG image is an image generated with math. To better understand, let’s take a look at a vector image and a regular image.

Here is an example of a vector image (left) and a regular image (right).