Icon Design with Sketch

Lesson 7/11 - Optimizing Your Design For SVG


Icon Design with Sketch


Lesson Info

Optimizing Your Design For SVG

So let's dive right in to Sketch, and what I like to do first when I'm optimizing an icon for SVG export, is create a duplicate of that art board. So, just hold down the option key, and there are a number of things that we can do to make this icon a little bit more friendly for SVG. First of all, if we just exported this right now, we kind of see something interesting. So export this to our desktop. And notice how it's not looking quite right. This is a little too blurry, doesn't seem like the roundness of the bottom is really coming through. We're gonna get to that because Sketch and just about any Vector Design tool, isn't going to know exactly how you are going to need that SVG, especially if you want to start animating it. In this case, SVG does not support inside borders. So, we need to actually change this to a centered border again. The problem is that then we don't get a well pixel aligned version. So what we can do is just change the position ever so slightly to a half pixel t...

o compensate for that. So our shape is now kind of in between, and our centered one pixel border is halfway on either side and it's filling up a full pixel. Now, that means that all of this is going to have to move over. We'll actually bring the rotation of these back, and let's just bring the rotation on those other panels back to zero real quick. When we increased the positioning and changed the border to centered, we actually increased the size of it overall. So we need to bring it back down by one pixel in those directions. And our pin is still now centered, that's all correct, that's looking good. Let's copy this panel into the others. There we go. And our rotation hacks are also going to have to change. So, I'm gonna select all of them. Let's delete that, let's duplicate the panel again. And, let's see, yep, six. Great. (keyboard tapping) We'll copy and paste this into, and in this case, and Sketch does this occasionally, it's not pasting in exactly where we want it. So let's bring the opacity up, make sure we're getting it exactly where we want. This needs to be pix-aligned, and that's 10, so bring it down. Great, there we go. This one we can just, use our earlier approach. And you can actually hold down shift and the arrow keys to move it, that's a little bit faster. Otherwise, Sketch, it's trying to help you by repositioning things to be pix-aligned, but in doing so actually makes them un-pix-aligned. All right, so another thing that we need to do is make sure that all of our layers have unique names. This is because, layer names turn in to IDs in the SVG. And as you probably know, with any sort of HTML, you need IDs to be unique. You can't have two elements with the same ID. So, we'll just go through here. Change it to top panel, or let's see, back panel. And you can use shift tab and tab to go between layers here, and make this a little more quick. (keyboard tapping) And this isn't like, critical, the SVG will still render, but it's going to kinda bite you a little bit later. See, 6.5, five there. Let's duplicate this panel. That rotation hack wasn't quite working, there we go. And we'll call this, top panel. (keyboard tapping) All right, now another thing is, that SVG has it's own way of doing transforms, it's a lot like CSS, and Sketch will actually use transforms to position groups, if you have layers in groups. So, I always like to un-group everything, then you have a whole lot of elements there all at once, but we can group them later in the SVG without worrying about weird transforms that are gonna throw off our rotation animation later on. Another thing, we're not using shadows here, but SVG doesn't have a real shadow property. So what Sketch will do, is it will create this custom SVG filter that tries to emulate the shadow. You can also create another separate layer that's black, semi-transparent, and blurred using Sketch's Gaussian Blur, but keep in mind that blurs are very performance intensive, so you want as few of them as possible. The last thing that didn't seem like it was coming through correctly, is the border radius on the bottom of our panels. And that's because SVG supports a consistent radius, but it doesn't support a different radius for individual points. We need to basically flatten this into a normal path. In order to do that, and you see the flatten is grayed out, in order to do that we can just kind of make it think that we're combining something by adding a rectangle, and let's make sure that rectangle is fully inside the panel, we're just gonna select the panel and the rectangle, and combine those with a union operation. Visually, nothing happens except that now we can flatten it. That is changing it in SVG from a rectangle element to a path element. We'll do that for the mid panel as well. And the back panel. You can also use the command shift U shortcut, maybe it isn't that. Option U. There we go. And, flatten those. Great, this is looking fantastic. It's all ready for us to export in SVG. Now, it looks different because we aren't actually rotating them. That's very intentional, that's because we're going to recreate those rotations later in CSS, when we start animating the icon. If you're not animating the icon, it's fine to leave those rotations on there, I still kind of advise not to have a group, but that's up to you. And now, in the export area, just choose SVG, we'll export this. We can overwrite what we had before. Let's open it up, let's see what this looks like. Whoa, it's a whole lotta markup. So, not all of this is really useful markup. Unfortunately almost every vector design tool has all sorts of extraneous attributes, and information like, great, my description is created with Sketch, and all of these elements have a Sketch attribute on them, that's not really necessary. So we need to clean this up. What I suggest doing is copying the code, and opening up a tool like, Peter Collingridge's SVG Editor, this is used for optimizing SVGs. There's also another one out there called SVG OMG, and it'll also allow you to find an icon, and do all sorts of optimizations to it. You can really get the file size down. Both are fantastic tools, I like SVG editor because it's just a little more bare bones. You can just paste in the markup, load it up, and one thing that we have here is the ability to remove those Sketch attributes. So, that's a start. In some things, like in this path, we've got these decimals that just go on for, they're just so much more precise than we really need. What's cool is we can change these decimal places to just like, two, or even one. And we can bring the file size down considerably and make them easier to read when we're working with the SVG directly. It's kinda nice that you see this on the side, so if you weren't sure, zero is gonna start affecting the look of it, I don't think one is affecting the look of it. So you can kind of play around, with these various options here. And then you get an output. You just copy this, copy it back in to your code editor. Now what I like to do when I'm editing SVG live is to open up a new code pen, and make sure that I'm editing it while I'm seeing the live result. That way I can start creating line breaks in here, maybe removing some extra things. Like, let's get rid of this description. Making sure that I'm not affecting the final result. For example, here's something that always bugs me, Sketch adds these extra groups for the art board in the page in your Sketch document. So I like to just get rid of these groups. But some of them have attributes that are going to affect the way things look. So if we just get rid of this one, you'll notice that, actually, it seems like we were able to get away with that. Let's see, stroke width one, fill none. Basically all of these, we are overriding later on when we're using individual elements. You see we're overriding fill here with what that fill color is. So we can get rid of that. And I like to add a few spaces in between here. Now SVG doesn't group elements in divs, it groups them in a G element. And so we can group these together and add a class for this. Call this class, let's see what is this? This is the back panel. And another thing it does that bothers me, is you've got IDs for paths that aren't the first attribute that you see. And so I always like to copy and paste those back into the beginning so that it's a little bit easier to read them. I'm gonna get rid of depths, we'll talk about that later. Comment we don't need. We can kind of just work with this like we would HTML and making it something that we want to read. So in the next section, we're gonna start with a version of these two icons that I've already cleaned up, so it's extra readable in the SVG markup, and we'll start working with animations. We're gonna learn about what's possible with animation and then dive into making our own.

Class Description

Learn the fundamentals of icon design, and how to create icons in the software program Sketch. You'll also learn how animation can enhance your icons, and see how it's done with a little bit of code. Peter will cover the basic principles of icon design and show you his process. He'll guide you step-by-step as he works in Sketch to execute icons. He also explains what SVG files are and when to use them. Peter will show you the benefits of adding animation to icons with CSS code, and tips for adding unexpected movement to your graphics. 

Software Used: Sketch 2016


Michael Oeser

I don´t take online courses very often but this time I was courious how it will be and how knowledge would be transferred. It was great, really. Peter is an awesome presenter who is able to share and show his knowledge in a very pleasant and professional way. Great course for everybody interested in icon design with a focus on animation. For me personally I would like to see a course with a deeper focus on the design principles and techniques of icon design because I´m not so much interested in animation. But anyway great course.


Peter great job teaching Icon Design! I have no background in making icons but was interested in learning how it was done. I had know intention of using this course in my web/app design but now that i've started watching your easy to follow lessons I realized that I want to make my own icons and highly recommend this course to anyone that wants to take their skills to the next level! Worth buying this course to review many times as there is so much covered that you wish it was available sooner! Thank you Creative Live!

Aris K

I stumbled upon this course after searching for more of Peter’s excellent tutorials. This beginner course will give you an overview of the icon design process starting with a useful icon design theory and considerations. The course then proceeds with two hands on examples that the viewer can also design while watching the tutorials. The first design uses basic geometric shapes the second is a "freehand" drawing using bezier curves. (TIP: read Peter's "Mastering the Bézier Curve in Sketch" free tutorial on medium.com beforehand). The second part is an overview of exporting SVG graphics and animating them with CSS. Personally, I would have liked more tutorials on icon design within Sketch and less about SVG , CSS. All in all, I enjoyed this course and would recommend it to anyone looking for a hands-on introductory course in icon design.