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.