Icon Design with Sketch

 

Icon Design with Sketch

 

Lesson Info

Getting to Know SVG

So in the last section we designed our icons using Sketch, which is a vector based design tool. What vector based means is that it's not just using pixels to show what's on screen, but it's conveying the information of what is on screen. So instead of saying you know, we got a pixel that's red and a pixel that's white, instead it says okay that's actually a circle, and then that circle can be any size. So instead of saying what the graphic looks like it's saying what the graphic is actually, what is the content of the graphic. And because we're designing now in vector programs like Illustrator and Sketch, it really makes sense that we would be showing the graphics and the icons that we create using a graphics format like SVG that is vector based. SVG stands for scalable vector graphics and instead of having pixels like a png or a jpeg, it's far more flexible. So we're gonna learn about what SVG is, how it's used, what it's capable of, we're even gonna learn how to write and read the ac...

tual markup of SVG and then we'll go over how to insert it on your own website. The thing about SVG is that it's been out for like 10 years but it's really become immensely popular in the last several years. It's a new trend for really mature technology and for that reason browser support is phenomenal. There's some very specific complex features in SVG like various filters and distortions that might not have perfect cross browser support but the fundamentals are there and have been for many many years in all browsers. So it's really stable, it's also capable of doing things like blurring and changing the color with various filters. It's capable of having gradients and masks and all of these advanced features that we use day to day in like PhotoShop or Illustrator or Sketch. And most of those we can create in SVG as well. It's especially useful on websites because under the hood SVG is just like HTML. They're both XML documents, so they look almost exactly the same, if you know some HTML you'll be right at home as we start diving into the markup. If for whatever reason you really need to support very old browsers that don't have support for SVG like really old versions of IE then I suggest using a framework like Modernizer. It's a JavaScript framework that will detect certain features, you can, it's fantastic. If you haven't used it, you just tell it what features you want it to detect and then it adds a class to the HTML or body of your website and you can just say alright if SVG, if the SVG class is on there then show an SVG if it says no SVG as your class then you just show the PNG file back. So let's dive in and see what SVG actually looks like under the hood. I've got this icon here and we can get a little preview of it. So you see it's basically just a device with a checkbox in it. And this is the SVG on the side. It starts with an SVG element, again this looks just like HTML. It has some specific attributes on it but here are the elements that you are going to be used to seeing because although the structure of it is just like HTML the names of each element are different and you'll pick that up pretty quickly. So path is a vector path, something that's drawn, and we're using that for the checkbox here. A circle, we're using that for the little home icon, and two rectangles, one that's rounded, and you see it has a little radius here, radius of four. This is so cool and we can directly edit the fill and the width, all of this is accessible to us within the SVG and it's not hard to just start making changes here to whatever you want it to look like. There are also a whole set of attributes. So for example any path element is going to have a D attribute, that's the data. And it, as you start having paths that are a lot longer this can, this data can just look like mumbo jumbo, but there's, it's really simple. It's starting from one coordinate, then it's moving to another, drawing a line there, then it's moving to another coordinate. The interesting thing about these attributes is that some of them are really fundamental characteristics of that element, so for example the d attribute, that's the fundamental shape of the path. But others like the fill are actually based off of CSS. Some like stroke and fill, you can write CSS, you know we could even add an in-line style here that says stroke and give it another color, give it say red. If we saved that and refreshed this here we go, we just changed that. Not all attributes are based off of CSS, some are really core to the XML document, but many are. And when they're editable in CSS that means you can animate them a little bit more easily. So the way that SVG works is you might notice we've got these units but none of these say pixels next to them. Well SVG kind of assumes that we're talking about pixels. And you don't need to write the unit pixels. The interesting thing about SVG is that they're not necessarily pixels if you start scaling the graphic to a larger size. So if we scale this to a width of and a width of 146, so we double this. The SVG units don't change, but now each of those pixels is really two pixels in each direction. So they're kind of relative pixels, they're, it's a full pixel when your SVG is being shown at you know, 100% scale. How do you know what 100% scale is? You've got this little viewbox thing and that says basically that the last two numbers are the dimensions, the width and the height. So it's not actually too difficult to become familiar editing these directly but when you do I highly suggest using a tool like Code Pen. So we can just hide these other fields here and paste our SVG right into the HTML. And then let's say we take our circle and we've got this R attribute, that's the radius, well we could make that six. And if you want I often do this, I add a little transform scale like four, just increase the size of it. Change the transform origin to the top left so we can see the whole thing. So now we're just kind of scaling it up a little bit so we can see it more easily. We could increase this radius to like but what you'll find is that it starts to crop from the bottom. And that's because SVG graphics are really self contained objects, and they have a specific box and anything can be rendered within that box but as soon as it starts to hit the edges it's cropped. So what you'll find is that when we start animating our icons we need to make sure that the viewbox is just kind of like our art board in Sketch. That gives us the space for our icon to animate wherever we need it to go. So let's talk about how to actually add an SVG onto your website. Well you'll be pleased to know that you can do this just about as easily as adding a png icon. You can just add it to an image tag. So here I've got some assets, here's our little demo icon, I'll just copy the path of that and paste that into the source. And there you go, it's still fully a vector object but it's in an image tag. So you can just start replacing your old bitmap png images with SVGs right from the get go. You can also put it in an object if you're using object elements, and you can use it directly in CSS like as a background image. So we can use the background image url here. Just make sure to set the height and the width to the size of the icon otherwise it's going to start doing that repeat thing with CSS. These are the three most common ways to get an SVG onto your page the way that you would a normal image but what you can also do is just copy the markup and paste it directly into your HTML document. And that allows the SVG and every single one of these elements to become part of the document structure for your webpage. As part of the dom, and as a result you could say okay ID home button, let's change this to class just to be a little but more friendly with CSS. Well let's go into CSS and add a class here. Let's change the stroke color to be blue. And it's just that easy. I mean it's so cool that you can have a graphic that is completely modifiable with JavaScript and CSS just the way any other part of your website would be. So that's SVG graphics, those are some of the capabilities. In the next section we're going to take the icons we've designed in Sketch, bring them out into SVG, learn about optimizing it, and get ready to start animating our own icons.

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