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.
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:
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?
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.
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:
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.
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.
- Remember that SVGs are like living things, destined for different places and uses. As a result, they can often be constructed in multiple ways.
- If you’re not getting the results you want, try making the graphic in a different way. For example, if borders aren’t looking right, try outlining them before exporting.
- Don’t include bitmap images in your SVG. They defeat all of its benefits.
- Work with a developer to understand the format from both design and engineering perspectives, so you know how to work it for your needs.
- To start improving the filesize of your SVGs, install Sketch’s SVGO plugin (the O stands for optimization). The plugin, which runs in the background after you export any SVG, tries to shrink the file in various little ways. There’s so much more you can do to reduce an SVG’s size, but if you don’t care to spend any time, this plugin is better than nothing.
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!
This article was originally published on Peter's Medium page.
