Introduction to Scalable Vector Graphics (SVG): What are they?

Michael Mangialardi
8 min readDec 17, 2018

In this article, I explain what is a scalable vector graphic (SVG) and how it differs from other graphics. I will also walk you through coding your very first graphic!

A Primer on Computer Graphics

A computer graphic is either a bitmap graphic or a vector graphic.

Instead of boring you with the technical details to start, let’s explain the difference between these graphics with a visual experiment…

Bitmap Graphics

Save a screenshot of your current screen. Then, open it up.

If you zoom in far enough, you’ll notice that it now looks pixelated:

Example Screenshot

The zoomed in graphic looks pixelated because it is composed of individual, square boxes, each containing a unique color.

Most of us are likely accustom to that exact word, pixelated. This word actually has a technical origin.

Pixels is the condensed word for picture elements.

Those colored square boxes in the zoomed in graphic are the picture elements, or pixels for short.

In short, a bitmap graphic is a graphic composed of pixels.

Makes sense, but where does the word bitmap come from?

Each pixel has a unique color. The unique color is expressed in bits. Therefore…

Bitmap (bit-map) refers to the number of bits within the mapped pixels in a graphic.

Hence, a pixelated graphic is called a bitmap graphic.

Cool, but wait, why do I see the pixels when I zoom in?

A visual display has a limit to how many pixels can be displayed, defined by the resolution. However, there is no limit to the amount of pixels that can make up a bitmap graphic.

--

--