Scalable Vector Graphics: How to Draw Zombie-Smashing Images with Code
To understand the zombie-smashing power of Scalable Vector Graphics (SVGs), you need to know the difference between vector and raster graphics.
You’re probably familiar with raster graphics—even if you’ve never heard the word "raster". These graphics use small individual dots (pixels) to create an image. With lots and lots of small dots, you can get high resolution photos and other kinds of complex and realistic imagery.
The downside, despite recent progress, is that raster images don’t upsize very well, particularly if you don’t have special software. You can make the image smaller without reducing quality by reducing information (the number of dots used). However, to make it larger, you’d need to add information (dots) and remake the picture. Upsizing is far easier and better than ever before, but, without special software, the results look like zombie barf. Browsers themselves do not have the specialized software, so you should only upsize raster images in a graphics editing program (e.g., Photoshop). Even then, you must use the right tools.
The second downside is that these photo-quality images can have rather large file sizes. Compression algorithms (like those used in GIF, PNG, JPG, WebP, and AVIF) help minimize file sizes, but you lose information.
Night of the Living Tip
Some forms of PNG, WebP, and AVIF use lossless compression algorithms. However, these rarely shrink file size as much as lossy algorithms (those that drop information).
Vector graphics, on the other hand, use math formulas to create lines, curves, shapes, and fills. The downside is that you can’t have photo-quality images. However, there are two big upsides:
- Small file size: since you’re using math to create a line, you don’t need to store every dot that makes up that line the way you would in raster graphics. You store just the formula that creates that line.
- Vector graphics can be upsized from postage-stamp to billboard size with no quality loss. Since you’re just storing the formula anyway, multiplying that formula by a factor makes that result bigger. (And don’t worry if you’re math averse. While SVGs use math a lot, you don’t have to know much to use them.)
SVG lets you create vector graphics using a tag markup system similar to HTML. In fact, the systems are so similar that they share some elements. SVG and HTML both use the same XML-style syntax with opening tags, closing tags, attributes, and content. SVG content, though, is almost exclusively visual rather than textual.