Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:52 minutes
Take the Quiz
Think you understand SVG? Test your knowledge in our quiz: Do You Understand SVG?

Next lesson playing in 5 seconds

Cancel

Using SVG Sprites

Introduction

01:26
  • Overview
  • Transcript

SVG technology has been around for years, but it has only recently started gaining wide usage. In this course, I’ll show you how to combine multiple scalable sprite images into a single SVG and display them on your web pages. The techniques discussed in this course will put you on track to create icon sets which are conveniently contained in a single file.

Learn how to use Gulp to build an SVG sprite system in our Coffee Break Course:

1. Introduction

1.1 Introduction

Hello and welcome to Using SVG Sprites. My name is Craig Campbell and I will be your instructor for this course. In this short course, I'm going to teach you a couple of different methods for using SVG Sprites in HTML. Now SVG stands for scalable, vector, graphic. And a SVG file, is an XML based graphic which, as it's name implies, can be scaled without using quality. If we take a Bitmap graphic, such as a PNG file or a JPEG file and try to scale it up. As you can see, it loses some of its quality. Its edges become pixellated and blurry. On the other hand, if we take a look at an SVG file, we can take this graphic and scale it up as much as we want to. And as you can see, it keeps its nice, crisp edges. So there's a great advantage of using SVGs over JPEGs or PNGs, if the circumstances call for it. So in this course, I'm gonna show you a couple of techniques for combining multiple vector graphics into a single SVG object. And then we'll look at how to display those shapes or sprites, one at a time by calling on that SVG object. So we've got a lot to learn in a short amount of time. And in the next lesson, we'll get started. Thank you for watching, and I'll see you then.

2. Inline SVG Sprites

2.1 Creating an SVG

Hello, and welcome back to using SVG sprites. Now, when we talk about using sprites, we're talking about using multiple graphics in one graphics file. One thing that comes to mind is a sprite sheet for a character animation. So let's say you have an animation of a man walking. That walk cycle might have eight different frames in it. So you might have eight different graphics on your sprite sheet. And each one of those graphics is gonna be displayed one at a time as we move through that animation. But the great thing about the sprite sheet is that that sprite sheet is gonna contain all of those graphics in one file. We're just gonna display a different part of that graphic every frame. Now, we're not really going to get into character animation is this course. Instead, we're gonna use sprite sheets for a much more common everyday use. And that's with an icon set. We're gonna have a set of multiple icons that we're gonna display one at a time. And the advantage of doing it this way, of displaying all of these one at a time but having them all in the same SVG file is that we're only making one HTTP request. Let's say for example, that you have a dozen or two dozen icons that you want to display on your webpage. If you have each of those icons stored in a separate file then your website is gonna have to make an HTTP request for every single one of those icons. Well, if we use a sprite sheet and combine all of those icons into one file and then just show part of that file for each icon we want to show then we're only making one HTTP request which can really save us a lot when it comes to the speed of our website and the efficiency of our website. So before we get into our first method of displaying sprites, I wanna talk about how we can prepare our graphic to be used as sprites in Illustrator. Now, keep in mind that Illustrator is not the only software that you can use to do this. There's a lot of software out there, there is even a lot of free software out there that you can use to export sprites or to export SVG. Some of the programs similar to Illustrator might be Sketch or Inkscape. Those can be used to export to SVG. So again, Illustrator is not your only option. There's plenty of options out there. I'm just using Illustrator for an example. So in your project files folder that ships with this lesson, you'll find a file called icons.ai. This has four different layers on it as we can see over here on the right, and each layer has a different icon. If we unlock all of these, we can turn on one of these layers at a time to see four different icons. Well there are a couple of ways that we can save this as an SVG. The first thing we can do is, we can just save the file itself. We can go to File > Save As. And then in our drop down under Format, we can change that to SVG. So I'll save this in the Project-Files folder. I'll call it icons01.svg, and click on Save. Now, this will give us another dialog option, that gives us a few options for dealing with SVGs. And I'm gonna leave the default here SVG 1.1, and I'll leave the other defaults as they are as well. When we get to the bottom, let me point out that you have two different options here. One of our options is to click on SVG Code, this will open up a text editor with the actual XML code for SVG. An SVG, a scalable vector graphic is really just a graphic stored in XML format. And if we click on this it will open up a text window with our SVG in it. Let me expand this out so we can read it a little bit better. But as you'll notice if you look closely at it, all of our layers are grouped in these g elements. So here's your first g element, and you'll notice it has an id of house. That's the layer in our Illustrator file that was called house. If we go back to our Illustrator file and look down here in the bottom right, we can see that bottom winger is called house and that's all grouped together. Our next group has an id of information. That's our information icon with the exclamation point. You'll notice this actually has some nested groups. So there's a group inside that information group, and inside that we have another group as well as a separate path. And each of these paths which is where the meat of the SVG is. All these numbers. These represent the shapes themselves. So again, you'll see that we have a different group for each of our layers. And we can even grab a bit of this SVG code if we just wanted to put one of these icons on the page, so we could just copy one of these into our HTML and make that happen. And we'll talk about how to do that a little bit later but for now, let's close that and talk about another way we can save our SVG file. And that's simply by clicking on OK, when we get to this SVG Options dialogue. So I'm gonna click on OK, and then I'm gonna jump into finder and you can see that we now have icon01.svg. And if we right-click on that and go to Open With. And I'm gonna open it with brackets. This will open it up in a text editor, so that we can actually see the code, the same code we saw a second ago for our SVG. The difference is it's actually saved in a file now, instead of just showing up in an unsaved document in a text editor. This is actually saved and I can zoom in a little bit, so you can see that text a little bit better but there's our SVG. Again, it's really just an XML file. So those are a couple of ways we can save in SVG. Let me point out one more way. Let me close this real quick, and I'm gonna drag my project file's folder down to my Brackets icon. That will open up the entire folder in Brackets, and then I can create new files within that folder. So I'm gonna right-click here and create a new file. And I'll just call it iconstest.html. So we have an HTML file here. We might give it a DOCTYPE of html, better open and close any html tags. I'm gonna put a head here and title that says SVG or whatever you want. And then in our body, I'm going to leave a little room so that I can paste something. And I'm going to do that in just a second. Actually, let me go ahead and increase the text size so I don't forget. That way you can read that a little bit better. I'm gonna jump back into Illustrator. I'm just gonna grab one of our icons here. Now, we can grab the house or we can turn that off and go to our camera. Let's do that. Let's grab our camera image here. With our selection tool here. I'm gonna click on the camera, and you'll see the whole thing is selected. And I'm just gonna copy it by holding Cmd+C, then I'm gonna jump back into brackets and I'm gonna paste it. And you'll see that it actually pastes, and I might need to make this small again so we can read it, it actually pastes our Svg code. So here's our opening SVG tag, our closing SVG tag and then everything in between, including a group that contains our path. And that path is the shape of our camera. Now, if you're having trouble copying and pasting your SVGs like this, then you might not have your settings set up properly in Illustrator. And by default it's set up to copy the SVG information, but in case it's not working for you. Let me go ahead and show you where you would look. So if we go back into Illustrator and I'm gonna go to my preferences and under preferences, I'm gonna go down to file handling and clipboard. So click on that, and you'll notice down here near the bottom, under the clipboard section, that we have a check box for include SVG code. If that is not checked, then you won't be able to copy and paste the code like we just did. So you need to make sure that that box is checked or again this particular method won't work for you. And I do have it checked, so I'm just going to click on cancel, but once again you can easily copy your graphics, jump over to your HTML file and just paste the code as we saw here. So we can save that, we can go back into finder and double-click on our icons test.html file. And if we drag that file over into our window, you can see our SVG in the window. And this is an SVG scalable graphic, so if we were to make this larger or smaller it would scale beautifully. It wouldn't get pixellated. It would look really nice at pretty much any dimensions unless you make it really really small, it's gonna look really nice in the browser window. So those are a few different ways that you can prepare your files or export your files to SVG using Illustrator. Thank you for watching, and I'll see you in the next lesson.