Icon Design with Sketch

Lesson 6 of 11

Getting to Know SVG

 

Icon Design with Sketch

Lesson 6 of 11

Getting to Know SVG

 

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

Reviews

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.

lovemydreams
 

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.