Icon Design with Sketch


Icon Design with Sketch


Lesson Info

Advanced Techniques & Next Steps

Alright. For those of you who are really excited about this SVG stuff, and I know you are (laughs). I've got a bunch of advanced techniques and topics for you. They're not actually that advanced. They're kind of more like intermediate, but if you're looking for some next steps based on what we've learned so far in this class, we're gonna try and cover a few of those things. So let's open up an SVG document here and this is an example of how gradients look. So, with SVG you've got this defs element. And here's how defs work. Like, basically it's kind of like the head element in html. Anything that's in there is going to be invisible. It's not going to be rendered and you can put all sorts of information in there. So in this case we've got a linear gradient and then you can kind of call upon that information later on in something like a rectangle here that is actually being rendered onto the screen. You can put all sorts of things in defs. You could put a path in there and then if you wa...

nted to use that path several times in your SVG shape, you don't need to create duplicates. You just kind of reference that same path a few times and, you know, here we can see we have a linear gradient. We have two color stops on that gradient. This is how gradients work in SVG. Now, I got really excited because unlike conventional CSS, you can have gradients on the stroke as well, or the border. And that's so powerful, that allows you to do, to create far more complex designs. And again, this stroke is just using a reference to blue gradient which is being defined in the definitions area. So defs is pretty simple, it's like the head in your html document. You don't need to include defs, but if you wanna have some sort of declarations or definitions that don't actually show up, that's the place to put them. Here's how shadows work, because as I've said, SVG doesn't have like an attribute or a property for shadows natively and so this is what sketch will do if you export a rectangle like this white rectangle with a shadow. It's gonna create this filter element and that filter has all sorts of really fancy stuff in there. It's really cool, but we're not gonna work out that much right now. It's changing the color matrix, it's applying a Gaussian blur, the standard deviation there is like how many pixels the blur is. So some of the terminology might be a little bit different from what you're used to, but you can find resources about this online, and SVG filters are really powerful. You can do some really cool stuff with them. So now let's dive into media queries. Because SVG can be just part of the document structure, and part of the DOM, it's possible to work with them using media queries as well. So what I've done here is I have our little color swatches icon and I've created a group. This is kind of our normal scale here. This is what we're used to seeing, back swatches. You can kind of hide that for now, and I've duplicated it and I've made some changes to it. I've just kind of made the lines thinner. Let's take a look at this. I'm actually gonna change this to none and change large scale. So we can see this would make a lot of sense if we're blowing it up to like four times the size. So the space in between the color swatches has been reduced, the border width or the stroke width has been reduced. This pin is no longer a fill, it's now just a little stroke. And so, you can include multiple versions of an icon in the same SVG, which is just so powerful because you can do stuff like this. Add a media query here for the screen and we want, let's just say like the minimum width is like 500 pixels. And let's just change these back to none and block. Here, actually. Copy them in that state, and then let's paste these now into a media query so that they only take place when our viewport, which is the, in CodePen it's this white area when our viewport is at least 500 pixels wide. And if we go down, it changes to the other icon. Now this is really powerful, especially if other parts of your layout are changing based on the width of the viewport as well. And you don't need to define this in your CSS, you can actually just put this right inside the SVG itself as CSS. You could just write a style element here, but I like to put things like this inside a definitions element. It's not really gonna change the way it's rendered, but it's just helpful for organization. And now we can paste in that CSS. And the SVG is going to work the exact same way. Let's even, let's hide this part of the CSS. (whistles) So, when our SVG is inline, which is to say we've copied the SVG markup directly into our html, then the SVG can detect the width of the viewport and of the screen. It's basically, media queries are gonna work exactly the same way as they do on the rest of your website. Another thing you could do here is like based off of pixel density, you know, change the stroke width. It's pretty powerful. But, you can also keep these media queries in the SVG when it is embedded through like an image element. Let's just copy some of these rotations that our icon still looks the same and I'll paste these in here. And now, let's copy this SVG into a new document, we'll save this, let's call this "dynamic-icon.svg," not .html. And we'll paste this in, save it. So now, we have a, let's see, where did we save that? Show in finder. Let's bring that onto our desktop. So now we have this dynamic icon and it contains all of that CSS within it. So, if we go back to CodePen and we add an image element here. Say like, alternate and it's just icon, source is equal to. And I've got this source, I've got the asset already loaded in here as "dynamic-icon." Let's paste that in. And just kind of tone down the scale here on our normal SVG and make that image display block, just so we can kind of see a little bit better. So, let's just kind of hide our other one quite a bit. So now, at the bottom we have our image and notice how it doesn't, it's not impacted by the width of the viewport anymore. Well that's because when you're embedding an image its viewport changes to whatever the size of the element that you're embedding it in. So if we made this image have a width of, let's see, 500 pixels then it changes. If we do 400. So the media queries for an embedded or for a linked SVG are going to depend on the dimensions of the element that you're embedding them in or that you're linking to them in. Cool, so another really, really neat topic is using sprites with SVG. So, web developers have been using sprites for a long, long time and traditionally with bitmap images like PNGs or JPEGs, the way it works is you've got a bunch of your graphics and they're all kind of in a grid and then you call upon them in CSS using like background image and you're just changing the position of the background so that you only need to load one imagery source instead of like a whole bunch of them. And that's better for like, loading resources and kind of load times on your website. You can use spriting, kind of a spriting technique with SVG as well. And there are a few ways to do it. Here's what I think is kind of the preferred way at the moment. It's just really well supported in various browsers. Is you can include your SVG here with any of your icons inside a symbol element. So what I've done here is I had that basic tablet symbol that we were looking at earlier and this symbol actually has its own title. This is great for accessibility. And this symbol element is really unique in that it won't render in this SVG at the top. It won't render until we call it later on in a use element. And so we've also got this other symbol here: phone checkmark. So I can change this to "phone," and it just calls upon the other icon or the other symbol in that SVG. So this SVG could like be at the top of your page, it's completely invisible. I do really suggest you add the "display none" to make sure that it doesn't take up kind of a big piece of empty space. And then you could use this again anywhere in your html document. You'd say, "Hey, so that's phone, "let's do tablet here." And the reason I've got a class on this SVG as well is because you wanna make sure that the SVG is still sized correctly, basically according to the viewbox that you set on that symbol. So 34 by 73 as opposed to 50 by 73. Really the phone is just less wide than the tablet and it's just that simple. So you can use the same SVG kind of like symbol as many times as you want and it's just using an inline SVG. It's just like this approach up here, but you don't need to duplicate a ton of markups. So that's fantastic especially if you're working with an icon system. Like I said, there are others ways to achieve spriting with SVG and I've got a bunch of resources on the resources page about how to approach that. The last thing that I'd like to talk about is animation and more advanced animation. So there are a few ways to animate SVG. As you've seen, we can animate it using CSS. That's super easy and CSS is very forgiving and kind of nimble to work with. You can also animate with JavaScript and if you're really great at JavaScript, you can do some incredible things because you can modify just about any attribute. Plus, SVG releases all of these JavaScript events that you can use to your advantage. There has been, up until recently, a popular way of animating SVGs which is kind of elements within the SVG itself. So you'd actually write an animate element inside the SVG and then kind of declare various attributes about your animation within the SVG. And you could animate just about any attribute and that was based on a technology called SMIL. S-M-I-L. No "E." And SMIL isn't smiling really anymore because unfortunately Chrome has decided to deprecate it and there hasn't really been a whole lot of work on it. And what was fantastic is you could morph stuff, so you know a path element has that d attribute for the path data that says like where the path goes. Well you could animate that path data, so you could say, "I want the path to suddenly become like this path, "or that path." And create all these cool morphing animations. SMIL had animation along a path and you know, unfortunately we're gonna miss that for a little bit of time. That is coming to CSS however. Chrome already has it implemented, the motion path. The best way to do some of these more complex animations these days is actually through JavaScript because SMIL isn't really worth investing a lot of your projects into. Still learn it if you're curious. It's not hard because it's all based on the same SVG syntax and it's really powerful and the concepts are going to stay. They're just basic animation concepts. A lot of things like timing functions, they're in there, too. Keyframes are in there, too. But right now, to achieve things like motion path or morphing you're really best off using a JavaScript framework. So there are a few frameworks out there. Snap.svg is a really lightweight, easy to use Javascript framework for making animations with SVG. And these aren't just like traditional JavaScript or like jQuery animations that can kind of be a little slow and poor on the performance front. Both Snap.svg and GreenSock, which is the other one, have amazing performance. I actually highly recommend GreenSock. So they call this their GreenSock Animation Platform and it can do all sorts of stuff. You can load in a timeline to kind of give you some assistance with when each element is coming in and it can Tween, which is to say interpolate, to go between one value and another just about any attribute the JavaScript can access on an SVG. And they've also got these additional plugins like MorphSVG which are super popular. And you can morph like a circle here into a hippopotamus and they don't even need the same number of points, which traditionally they do. You need to say, "Alright, if you have like "four points around this circle, "it can only morph into something "that also has four points." Not the case with GreenSock and MorphSVG. GreenSock has also done an amazing amount of work around browser compatibility and performance. I mean, this stuff, the frame rates are as good and the performance is as good as CSS. It can be hardware accelerated. It's incredible. So, we've got resources for GreenSock and I highly suggest that you check them out. One of the other really helpful things about GreenSock is like that transform origin bug that we were talking about. Well there are a lot of little bugs when you start working with SVG and CSS and all this stuff. They've alleviated most of those pain points and so it's friendly to work with if you're familiar with JavaScript. We've got resources for GreenSock and all of these in the resources section and I highly recommend you check them out, especially if you're familiar and comfortable with JavaScript. So that's kind of an overview of the state of animation technologies right now. It's an exciting time. It's a rapidly-evolving time and it's so cool that you can animate an SVG in like any way that you would normally animate some other part of your webpage. So that's spriting, that is media queries, those are the defs elements, and that's the future of animation. These are some of our advanced techniques. Thank you so much for taking this class. I hope you got a lot out of it. I've got a ton of resources for you in the resources section. I'd love to see the things that you guys create. Thanks so much.

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