How Designers Should Think About SVG
By: Peter Nowell
Tags: UX, Sketch, Web Design, UI, Design

While preparing my new course on SVG workflows in Sketch, I’ve spoken with a bunch of designers, both junior and senior, about their use of the format. And I’ve noticed a common misunderstanding about SVG:

We often expect SVG to behave like a bitmap graphic—like a PNG with infinite resolution. But it really isn’t.

For one, certain things are more difficult with SVG. Exporting—or, more specifically, the process of going from Sketch* to a final graphic—can take anywhere from a few seconds to 10 minutes. It depends on your design and how you plan to use the graphic. To create an SVG that meets your needs perfectly, you may have to adapt your Sketch layers in certain ways, or tweak the exported markup. This may seem complicated and tedious, but it’s not difficult and it opens up a world of possibilities for how you use an SVG.

Because despite its differences, SVG has a plethora of amazing qualities. We’ll go over those first—because they’re fun—then we’ll address how to start thinking practically about SVG.

* Note: Although Sketch is my design tool of choice, the concepts in this article apply equally to Adobe Illustrator and most other tools.

A brief technical definition:

SVG stands for Scalable Vector Graphics. It’s a graphics format, like JPEG or PDF, and the whole idea behind them is that they aren’t limited to a certain resolution; because instead of being made from pixels, SVGs are made from vector shapes. Although they can be used in a variety of places, SVGs are most at home on the web. The following examples showcase its potential.

Why is SVG so amazing?

Many others before me have extolled the benefits of SVG in detail. (If you’re a web developer, check out Chris Coyier’s talk SVG Is for Everybody for a more technical overview.) In this article, I’ll highlight five key benefits that most designers will care about.

Any size. No pixelation.

SVGs are like your Artboards in Sketch — although they have specific dimensions, they also contain infinite detail, because the layers/elements inside are vector shapes. So you can display an SVG graphic at any size, and it will never appear pixelated.

Small File Sizes

As long as you don’t use SVGs for photographs (that’s what JPEG is for), most of the time SVGs take up dramatically less space than a PNG or JPEG.

That’s because, for a bitmap image (like a PNG or JPEG), the primary factor determining file size is resolution. In general, a 3000×3000 pixel image will always be larger than a 300×300 one.

But for an SVG, the primary factor is detail: how many layers are in the graphic and how many custom gradients, masks, or effects need to be described. The dimensions of the graphic have almost no impact on the file size. For most icons and other design elements, SVG is a clear winner when it comes to file size (and load times).

As a GIF, this animation is over 400KB. But as an SVG it’s only 3KB!

Animated & Dynamic Graphics

This is one of my favorite things about SVG: if you know a little bit of web development, you can animate SVG graphics as though they were any other part of a website. And all of that magic code can be contained within the SVG file itself. So you could have a little 6 kilobyte icon that comes to life as though it were a video.

You can even make your graphics dynamic, like a clock that can tell the time, or an icon that matches the color of any text you put it beside. SVGs can be responsive, changing in various ways depending on the screen size or pixel density, or tons of other factors. The possibilities are vast, and they really redefine how we think about what a single graphic can be.

Spritesheets & Icon Sets

I love icons, and in the last year or two, several techniques have emerged for combining multiple icons into the same SVG. That means you could put an entire icon set inside one graphic. One little file! This kind of graphic is called a spritesheet, and they’re incredibly useful on the web.

Many Other Uses

SVG graphics can be used in a variety of other situations. Maybe you’re looking to create that pinned tab icon for your website, or speed up the process of generating icon assets for your Android app. Both of those either support or require SVG, although their strict specifications require that designers use specific workflows to create them (more on workflows below).

Wait, how is all of that possible? What is SVG, really?

In order to understand how SVG is capable of so much, we need to break down how it’s inherently different from bitmap images.

How are SVGs unlike bitmaps?

Bitmap graphics, also known as raster graphics, are pixel-based. This includes formats like JPEG, PNG, and GIF. Under the hood, they’re essentially a grid of colored boxes.

For example, this 3px × 3px bitmap image has nine pixels: nine colored squares. Those squares can’t change in any way . They can’t reveal more detail, they can’t move around, and they can’t become other colors — they are permanent and will always take up a certain amount of information. Enlarge the image past 100%, and you’ll see pixelation.

Vector graphics like SVGs aren’t made of colored pixels; they are descriptions about your graphic. They look something like this under the hood: