{"id":7763,"date":"2017-04-03T10:37:13","date_gmt":"2017-04-03T09:37:13","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=7763"},"modified":"2017-04-06T20:44:44","modified_gmt":"2017-04-06T19:44:44","slug":"designers-think-svg","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/designers-think-svg\/","title":{"rendered":"How Designers Should Think About\u00a0SVG"},"content":{"rendered":"

In preparation for my upcoming course<\/a> on Sketch and SVG workflows, I\u2019ve spoken with a bunch of designers, both junior and senior, about their use of the format. And I\u2019ve noticed a common misunderstanding about SVG:<\/strong><\/p>\n

<\/div>
<\/svg><\/div>

\"We often expect SVG to behave like a bitmap graphic\u2014like a PNG with infinite resolution. But it really\u00a0isn\u2019t.\"<\/p><\/span><\/blockquote>\n

For one, certain things are more difficult with SVG. Exporting\u2014or, more specifically, the process of going from Sketch* to a final graphic\u2014can 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\u2019s not difficult and it opens up a world of possibilities for how you use an SVG.<\/p>\n

Because despite its differences, SVG has a plethora of amazing qualities. <\/strong>We\u2019ll go over those first\u2014because they\u2019re fun\u2014then we\u2019ll address how to start thinking practically about SVG.<\/p>\n

* Note:<\/em><\/strong> Although Sketch is my design tool of choice, the concepts in this article apply equally to Illustrator and most other tools.<\/em><\/p>\n

\"1hRDTRN_N1D0fRUws6ftfGg@2x\"<\/center><\/p>\n

A brief technical definition:<\/h2>\n

SVG stands for Scalable Vector Graphics<\/em>. It\u2019s a graphics format, like JPEG or PDF, and the whole idea behind them is that they aren\u2019t 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.<\/p>\n

\"1hRDTRN_N1D0fRUws6ftfGg@2x\"<\/center><\/p>\n

Why is SVG so\u00a0amazing?<\/h2>\n

Many others before me have extolled the benefits of SVG in detail. (If you\u2019re a web developer, check out Chris Coyier<\/a>\u2019s talk SVG Is for Everybody<\/em><\/a> for a more technical overview.) In this article, I\u2019ll highlight five key benefits that most designers will care about.<\/p>\n

<\/p>\n

\"p2\"<\/a><\/p>\n

Any size. No pixelation.<\/h2>\n

SVGs are like your Artboards in Sketch \u2014 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.<\/p>\n

\"peter2\"<\/a><\/p>\n

<\/p>\n

Small File\u00a0Sizes<\/h2>\n

As long as you don\u2019t use SVGs for photographs (that\u2019s what JPEG is for), most of the time SVGs take up dramatically less space than a PNG or JPEG.<\/p>\n

\"p34\"<\/a><\/p>\n

<\/center><\/p>\n

That\u2019s because, for a bitmap image (like a PNG or JPEG), the primary factor determining file size is resolution. In general, a 3000\u00d73000 pixel image will always be larger than a 300\u00d7300 one.<\/p>\n

\"p4\"<\/a><\/center><\/p>\n

<\/p>\n

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).<\/p>\n

<\/p>\n

<\/p>\n

\"p11\"

As a GIF, this animation is over 400KB. But as an SVG it\u2019s only 3KB!<\/p><\/div><\/a><\/center><\/p>\n

<\/p>\n

Animated & Dynamic Graphics<\/h2>\n

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<\/em> the SVG file itself. So you could have a little 6 kilobyte icon that comes to life as though it were a video.<\/p>\n

\"p12\"<\/span><\/a><\/p>\n

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.<\/strong><\/p>\n

\"p5\"<\/a><\/p>\n

<\/p>\n

Spritesheets & Icon Sets<\/h2>\n

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<\/strong>. One little file! This kind of graphic is called a spritesheet, and they\u2019re incredibly useful on the web.<\/p>\n

\"p6\"<\/a><\/center><\/p>\n

Many Other\u00a0Uses<\/h2>\n

SVG graphics can be used in a variety of other situations. Maybe you\u2019re 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).<\/p>\n

\"1hRDTRN_N1D0fRUws6ftfGg@2x\"<\/center><\/p>\n

Wait, how is all of that possible? What is SVG,\u00a0really?<\/em><\/strong><\/p>\n

<\/p>\n

In order to understand how SVG is capable of so much, we need to break down how it\u2019s inherently different from bitmap images.<\/p>\n

How are SVGs unlike\u00a0bitmaps?<\/h2>\n

Bitmap graphics, also known as raster graphics<\/a>, are pixel-based. This includes formats like JPEG, PNG, and GIF. Under the hood, they\u2019re essentially a grid of colored boxes.<\/p>\n

\"p7\"<\/a><\/p>\n

<\/center><\/p>\n

For example, this 3px \u00d7 3px bitmap image has nine pixels: nine colored squares. Those squares can\u2019t change in any way. They can\u2019t reveal more detail, they can\u2019t move around, and they can\u2019t become other colors \u2014 they are permanent and will always take up a certain amount of information. Enlarge the image past 100%, and you\u2019ll see pixelation.<\/p>\n

Vector graphics<\/a> like SVGs aren\u2019t made of colored pixels; they are descriptions<\/em> about your graphic. They look something like this under the hood:<\/p>\n

\"p8\"<\/a><\/p>\n

<\/center><\/p>\n

Because an SVG is just a description of the graphic, it can be shown at any size; a circle is still a \u201ccircle\u201d whether it\u2019s displayed at 3px or 3000px. And descriptions can change<\/strong>. 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\u2026<\/p>\n

<\/div>
<\/svg><\/div>

\"SVGs are living things. Bitmaps are photos of\u00a0things.\"<\/p><\/span><\/blockquote>\n

You might also find it helpful to think about what\u2019s happening when you export from Sketch. Bitmap images flatten<\/em> your design into a single layer. The resulting PNG or JPEG doesn\u2019t know the names of your layers, or really anything about what they depict.<\/p>\n

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<\/em> its own description of your layers into SVG\u2019s language. That\u2019s why, occasionally, the SVG version looks different; some part of what you made in Sketch couldn\u2019t be easily described in SVG\u2019s language.<\/p>\n

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.<\/p>\n

But how do we get there, starting from our Sketch design?<\/p>\n

\"1hRDTRN_N1D0fRUws6ftfGg@2x\"<\/center><\/p>\n

How does Sketch export\u00a0SVGs?<\/h2>\n

SVG is one of the formats you can choose when exporting. But most of us \u2014 and I include myself in this \u2014 make the mistake of thinking that exporting an SVG will be as effortless as any other type of graphic. \u201cWe\u2019ll just export a 1x PNG, a 2x PNG, and hey \u2014 why not export in vector too? SVG. Voila! We\u2019re done!\u201d Right?<\/p>\n

Unfortunately, the resulting SVG doesn\u2019t always look the way we want it to, or the file size is unpredictable, or maybe the file isn\u2019t compatible with certain specs that our developer or an app requires.<\/p>\n

This isn\u2019t Sketch\u2019s fault.<\/strong> Sketch has been constantly improving their SVG export, and it\u2019s now quite good.<\/p>\n

\"The real question is: with all these different ways to use an SVG, how does Sketch know exactly what to\u00a0export?\"<\/span>
\nIt doesn\u2019t. It can\u2019t. 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.<\/strong><\/p>\n

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\u2019s exported; they\u2019re often determined by how your layers are fundamentally constructed in Sketch.<\/p>\n

\"p9\"<\/a><\/p>\n

By \u201cconstructed\u201d 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\u2019t always one correct way<\/em>\u2014it all depends on how you intend to use the graphic. And it occasionally depends on what features SVG supports. Here\u2019s another example from my course:<\/p>\n

\"p10\"<\/a><\/p>\n

Often the most efficient or convenient way to mockup an idea in Sketch isn\u2019t<\/em> the most efficient or stable way to construct the layers for SVG.
\n<\/strong><\/p>\n

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\u2014ungroup them, remove masks, flatten transforms, outline text, adjust borders, rename everything, etc.\u2014anything that ensures the resulting SVG looks correct and meets the needs of my project.<\/p>\n

That\u2019s why, at the beginning of the article, I said that this \u201cexport\u201d 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.<\/p>\n

\"1hRDTRN_N1D0fRUws6ftfGg@2x\"<\/center><\/p>\n

You\u2019re probably wondering:<\/p>\n

\"What are all of the changes that I\u2019ll need to make to my Sketch layers to produce the ultimate\u00a0SVG?\"<\/span>
\nIf there were an easy answer, I\u2019d 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\u2019t all<\/em> useful in all<\/em> situations. I\u2019ll 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\u2019ve had to make a small course! It\u2019s simply more than I could fit into a couple articles.<\/p>\n

The course is intended to get you comfortable with SVG, and all of the Sketch workflows you\u2019ll use to become a power user. If you\u2019d like to be notified when the course is released, you can sign up here<\/a>.<\/p>\n

What can you do differently?<\/h2>\n

I\u2019ll leave you with a few practical tips and take-aways.<\/p>\n