Blog Post

Excerpt – 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:

  1. 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.
  2. 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.

Adding SVG to a Web Page

There are three major ways to add an SVG image to a website. The first two use HTML, and the third uses CSS.

Method One: img element

You can use the <img> tag with the src attribute set to the file path of the SVG file:

<img src="zombieparty.svg" alt="zombie’s partying like nerds in high school">

Night of the Living Tip:

You can use SVGs using <picture> and <source>, but an SVG shown at a small size will use the same file size as one shown at a larger size. There’s rarely a need to optimize the SVG for mobile/responsive design. You should still try to make files as small as possible, even with SVG’s small-file-size super powers.

Using img is the best supported method—though you’d have to go back quite a way to find a browser that doesn’t support the other two methods). img also keeps the SVG file separate from the HTML and lets the browser cache it, preventing users from having to download it every time they visit your site.

The downside to this method is that you cannot access any pieces within the SVG using CSS, just the entire image. If I had an SVG of a zombie in an img element, I could move the entire image using CSS animations, but if it were an inline SVG, I could blink the zombie’s eyes and make him raise his hands as he walks toward you.

Method Two: Inline

Inline SVG is when you put the SVG tags straight into the HTML. This allows you to access the SVG elements using CSS or even JavaScript. You can thus change the color, size, and other aspects of elements within the SVG, or you can animate individual parts.

However, because the SVG is part of the HTML, it cannot be cached separately. It will download every time the HTML changes, even if the SVG doesn’t.

Method Three: CSS background-image

This is fairly similar to the first method, which uses the img element, except it uses CSS to display the SVG as a background image. It shares many of the same benefits and drawbacks of the first method. It is easily cached, but its pieces are inaccessible to CSS and JavaScript. It does, however, have the added benefit of easy swapability using just CSS. You’d need JavaScript to swap out a different SVG on the img tag.

.zombie {
    background-image: url(zombie.svg);
}