FREELessons: 15Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.2 How to Generate SVG Sprites

In this lesson you’re going to learn how to generate SVG sprites out of a bunch of individual SVG files using, of course, Gulp. This is a very cool technique. All you have to do is pass in some SVGs, and then the plugin will generate a sprite file and the accompanying CSS.

Related Links

5.2 How to Generate SVG Sprites

Hello and welcome back to this course. In this lesson you're going to learn how to generate SVG Sprites by using Gulp. This is a very cool technique all you have to do is use a plugin, pass in a bunch of SVG files, and that plugin will generate a Sprites file and the accompanying CSS, it's really, really simple. Now, in case you don't know what a Sprites file is, well, let me give you an example. Let's say you're building a webpage and you have about ten images in that webpage, and that includes logos, and icons, and whatever. Normally, if you're gonna load those images individually, it means that the browser makes ten separate requests to the server for ten separate images. So, that can result in a big load time for you page, which is not good. So, instead, there is something called Sprites, you combine all of those images, those ten images into a single bigger image. And then you would use that image as a background for the elements that you want to display, for example for the logo. So, you set it has a background image, you said the background size to the exact size of the image, and you position it accordingly. So now instead of loading ten images, you load a single image, and even though it might be an image that's very high in file size, you make a single request to the server, which is important. So, there are tools that you can use to make this. And those tools involve uploading images, and they give you a Sprites image, in turn, and an associated CSS file. But we're using Gulp, we're creating this awesome workflow, so we might as well use a plugin that does that automatically for us. And the plug in is called Gulp SVG Sprites we're gonna go ahead and install it. So mpm i gulp svg sprites save dev, we're gonna start by loading that plugin, I'm gonna call it svgSprites require gulp-svg-sprites, all right. So we're gonna create a task here that creates Sprites from SVG files. So we're gonna call the task, Sprites. And then we're gonna grab the src/ing/sprites and everything under that with the extension of SVG we're gonna pipe them through SVG Sprites. And then we're gonna write these to the disk under SRC for now. So, let's just get a feeling of how this thing works. So under src or under sprites, I have a bunch of images here. As you can see, a bunch of SVG files. And currently, these look, well, let me open a finder window, these look something like this. They're very simple line SVG's, right? Okay, so once we run gulp sprites, That's gonna do a few things. First, it's gonna create an svg folder in my main src folder, and inside a sprite.svg and let me show you what that looks like. There it is, so all of the images combined into a single one and displayed in a column just like this. With no space between them whatsoever. Then, it also created a sprite.html. And the sprite.html, if we are gonna open it in a browser, currently it looks like this. It tells me which files are generated, and how to use those files. And you can see each one you have the option to invert background to see the achrones better. You can change their size here, you can toggle between PNG and SVG, and it shows you a snippet of how you can use that particular icon. Of course in order to use these icons, you need to load this sprite.css file that it generated. So it generated a class of icon, it gave it some default styling, and then for each icon it just specifies a background position width and height. And that's pretty cool. Now, because we're using Sass and because we want a little bit control over how these Sprites files are generated. We're gonna pass in some properties to the svgSprites plugin. And those properties are as follows, first of all on the CSS file, I want to be generated inside scss/sprites.scss. So I want to create a Sass partial. Next, because I'm working with Sass, the plugin has a very nifty option called scss: true. That's gonna generation SCSS code basically instead of normal CSS. Then I want to stop generating Sprite HTML file I don't need it. So, for that preview: false. Finally, the sprite image, instead of generating inside of svg folder here, I want to generate it inside img/sprite.svg. Right, so now I'm gonna delete the CSS file that it generated. I'm gonna delete this svg and also this sprite.html, Okay? I'm gonna rerun gulp sprites. So now, it generated sprite.svg inside my image folder. And it also generated the sprites.scss with Sass code, which is fantastic. So now, all I have to do is go into my styles and import, Sprites, and then I can go into the index.html, and I can pass in, This code, span class="icon basket" followed by the name of the icon. So if we're gonna run this, we're gonna see the icons right here. There's one, two, and three. Just how easy is that? And of course, we can watch the sprites folder and whenever something happens there, we run the sprites task. We're also gonna put in sprites here, and if we're gonna execute gulp, From the terminal, yeah? All of that will happen automatically, my distribution folder will be created, Along with my sprite image, and whenever I make a change to the sprites folder in my source file, that gets automatically updated. For additional information on the Sprites SVG plugin, check out the NPM page, NPM JS page link in the lesson notes. All right, so that's how we can create SVG Sprites with Gulp. Now, coming up in the next lesson we're gonna have a look at some helper plugins, I'll see you there.

Back to the top