📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Viewpoint

How Designers Should Think About SVG

The stunning things you’ll create with SVG, how it differs from other graphics, and why exporting requires new considerations.
How Designers Should Think About SVG

In preparation for my upcoming course on Sketch and SVG workflows, 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 Illustrator and most other tools.

1hRDTRN_N1D0fRUws6ftfGg@2x

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.

1hRDTRN_N1D0fRUws6ftfGg@2x

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.

p2

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.

peter2

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.

p34

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.

p4

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).

p11

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.

p12

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.

p5

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.

p6

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).

1hRDTRN_N1D0fRUws6ftfGg@2x

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.

p7

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:

p8

Because an SVG is just a description of the graphic, it can be shown at any size; a circle is still a “circle” whether it’s displayed at 3px or 3000px. And descriptions can change. Anyone who has spent 15 minutes learning web development can edit the description of an SVG, to adjust, for example, the color of a shape or the thickness of a line. In many ways…

"SVGs are living things. Bitmaps are photos of things."

You might also find it helpful to think about what’s happening when you export from Sketch. Bitmap images flatten your design into a single layer. The resulting PNG or JPEG doesn’t know the names of your layers, or really anything about what they depict.

An SVG, on the other hand, is not flattened. It still contains all of your layers, and tons of information about them. When you export, Sketch attempts to translate its own description of your layers into SVG’s language. That’s why, occasionally, the SVG version looks different; some part of what you made in Sketch couldn’t be easily described in SVG’s language.

Because an SVG still contains all/most of the information about your layers, you can manipulate or adapt those layers into all of the uses above: animations, interactive/dynamic objects, icon sets, etc.

But how do we get there, starting from our Sketch design?

1hRDTRN_N1D0fRUws6ftfGg@2x

How does Sketch export SVGs?

SVG is one of the formats you can choose when exporting. But most of us — and I include myself in this — make the mistake of thinking that exporting an SVG will be as effortless as any other type of graphic. “We’ll just export a 1x PNG, a 2x PNG, and hey — why not export in vector too? SVG. Voila! We’re done!” Right?

Unfortunately, the resulting SVG doesn’t always look the way we want it to, or the file size is unpredictable, or maybe the file isn’t compatible with certain specs that our developer or an app requires.

This isn’t Sketch’s fault. Sketch has been constantly improving their SVG export, and it’s now quite good.

"The real question is: with all these different ways to use an SVG, how does Sketch know exactly what to export?"
It doesn’t. It can’t. All that any graphics software can do is try to translate your layers as similarly as possible into SVG layers. How you made something in Sketch is how Sketch will try to export it.

There are certain ways that an SVG can be coded (in other words, ways that layers can be described) that make it especially readable for developers, or optimized for small files, or easy to animate, or fit into an icon set. And those differences go beyond how it’s exported; they’re often determined by how your layers are fundamentally constructed in Sketch.

p9

By “constructed” I mean how you created, combined, and styled your layers to achieve a certain result. This exclamation mark example, above, could be made in a few ways. There isn’t always one correct way—it all depends on how you intend to use the graphic. And it occasionally depends on what features SVG supports. Here’s another example from my course:

p10

Often the most efficient or convenient way to mockup an idea in Sketch isn’t the most efficient or stable way to construct the layers for SVG.

So the first thing I do when I want to export something from Sketch to SVG, is duplicate the Artboard. The duplicate Artboard is where I make changes to the layers—ungroup them, remove masks, flatten transforms, outline text, adjust borders, rename everything, etc.—anything that ensures the resulting SVG looks correct and meets the needs of my project.

That’s why, at the beginning of the article, I said that this “export” process can take anywhere from a few seconds to 10 minutes. It depends on your specific layers and design, and how you intend to use the resulting SVG.

1hRDTRN_N1D0fRUws6ftfGg@2x

You’re probably wondering:

"What are all of the changes that I’ll need to make to my Sketch layers to produce the ultimate SVG?"
If there were an easy answer, I’d tell you. The truth is, there are about a dozen best practices that I rely on when adapting a Sketch design for SVG. (I alluded to some of them above.) But they aren’t all useful in all situations. I’ll be releasing a free web-app checklist of these best practices in the coming weeks, but in order to explain the reasoning behind them, I’ve had to make a small course! It’s simply more than I could fit into a couple articles.

The course is intended to get you comfortable with SVG, and all of the Sketch workflows you’ll use to become a power user. If you’d like to be notified when the course is released, you can sign up here.

What can you do differently?

I’ll leave you with a few practical tips and take-aways.

1hRDTRN_N1D0fRUws6ftfGg@2x

Regardless of whether the upcoming course is for you, I hope this article has clarified what SVG is, what it’s capable of, how it works, and how to think about it in relation to other graphics formats. Happy designing!

p13

This article was originally published on Peter's Medium page. 

Prototype with Sketch!

Prototype with Sketch!

Send artboards straight from Sketch into your Marvel projects.

Download Plugin

Peter is a designer from San Francisco whose clients include Apple, Flinto, and Juice Shop. Peter is also the creator of Sketch Master —the highest quality online video courses for learning Sketch.

Related Posts

Making good component design decisions in react when it’s hard to see how an existing component can still be reused

Disney’s 12 Principles of Animation is one of the inestimable guides when traditional animations are considered. It was put forth by Ollie Johnston and Frank Thomas in their book – The Illusion of Life. These principles were originally designed for traditional animations like character animations. However, these principles can still be applied in designing interface animations. So, this is just… Read More →

Design is no longer subjective. Data rules our world now. We’re told all design decisions must be validated by user feedback or business success metrics. Analytics are measuring the design effectiveness of every tweak and change we make. If it can’t be proven to work in a prototype, A/B test, or MVP, it’s not worth trying at all. In this… Read More →

Categories