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.

Peter Nowell
Jan 17, 2017 · 10 min read
Image for post
Image for post

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

Image for post
Image for post

A brief technical definition:

Image for post
Image for post

Why is SVG so amazing?

Image for post
Image for post

Any size. No pixelation.

Image for post
Image for post

Small File Sizes

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

Animated & Dynamic Graphics

Image for post
Image for post
Image for post
Image for post

Spritesheets & Icon Sets

Image for post
Image for post

Many Other Uses

Image for post
Image for post

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

How are SVGs unlike bitmaps?

Image for post
Image for post
Image for post
Image for post

SVGs are living things. Bitmaps are photos of things.

Image for post
Image for post

How does Sketch export SVGs?

The real question is: with all these different ways to use an SVG, how does Sketch know exactly what to export?

Image for post
Image for post
This same exclamation mark icon could be made from 2 separate standard shapes (left), a single combined path (center), or a bordered vertical line with a rounded rectangle (right). There are other possibilities too!
Image for post
Image for post
In this example, it might have been easier in Sketch to create the pinhead with 3 fills. But while radial gradients are well supported in SVG, blend modes and multiple fills per shape require workarounds and may produce inconsistent results.
Image for post
Image for post

What are all of the changes that I’ll need to make to my Sketch layers to produce the ultimate SVG?

What can you do differently?

Image for post
Image for post
Image for post
Image for post

Design + Sketch

The best collection of articles, tips, tutorials, and…

Peter Nowell

Written by

Designer working across UX, web, branding, & traditional graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Peter Nowell

Written by

Designer working across UX, web, branding, & traditional graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store