Introduction to Scalable Vector Graphics (SVG): What are they?
--
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:
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.
