1.2 How to Build an SVG Sprite Using Gulp
Let’s dive straight in and discuss how we can create an SVG sprite using Gulp. We’ll use the SVG WordPress Dashboard icons which you’ll find in the source download, and some third-party plugins which we’ll add to our Gulp tasks.
In line with best practices, we’ll create a folder structure which maintains organization while retaining original copies of each SVG icon. To round off the course, we’ll style our icons with CSS.
1.2 How to Build an SVG Sprite Using Gulp
[SOUND] Hey everyone, welcome to how to build a svgsprite gulp by tuts+. In this lesson we're going to take all of our individual SVG files and combine them into one svgsprite for us to use in an HTML document. So let's get started. We've got our packages.json file open. And what this file is stating is a couple dependencies that we're needing in order to create the SVG sprite, specifically as we svgmin, svgstore, rename and cheerio. These can be installed with NPM, which is a package manager. You can simply type npm install if you're getting the project for the first time and this will install all the plugins required for the project. svgmin is what compresses the single as SVG files. So it's going to do sort of what image minification does, but with SVG. svgstore is what helps us to create the single svgsprite. gulp-rename is a plugin that will help us to do some file renaming magic on the end result. And gulp-cheerio is a plugin that will allow us to manipulate HTML and XML files. Specifically gulp-cheerio also includes c implementation of the core of jQuery for us to use on the server. Let's open up the gulp file and look at the task at hand and see what's going on. Going to the top, I've got gulp-load-plugins specifically because I wanna point that out. I'm using that so that I don't have to write requires statements for all the gulp plugin you saw in the package.json file here. If I wasn't using gulp-load-plugins I'd have to type out all the plugins that I was using, using a require statement such as the one you're seeing here with delete. So instead to make things a little bit easier on myself I like to use the load plugins option. I set up some object literals just so that it makes writing pass and directory names a little bit easier and allows me to update it in one spot. Scrolling down we can actually get to the svgsprite task, what this task is doing is a bunch of stuff. First off the source is our path.icons directory and then inside the icons directory is the source containing all the single SVG files. If I open them up you can see I've got an XML tag, I've got comments, I've got a doc type. These are things that we don't want. And this is where svgmin is going to come into play. Close it out and we'll jump back into the gulp file. Close the source folder. As you can see I'm removing the doc type, I'm removing comments. So this is the svgmin task. This is the first task, we're gonna run that. So that's going to help filter the single SVG files and make them a little bit more compressed than what the original ones are. We're still gonna be able to keep the original files. Which is great, because in case something happens later on in the project, we wanna be able to go back to the original files in order to edit. The next task I'm going to be running is svgstore. And it's got an option called inlineSvg and I've set that to true. What this means is it's going to set a namespace on the final SVG sprite. So the single SVG tag, in other words, it's going to understand that we're going to be inserting that into the HTML document, the entire SVG sprite. The next task I'm running is rename. And this allows the final result of the sprite file to be renamed. Typically it would be named after the directory that the single SVG files are contained in. So in my case the final SVG sprite would be named source.svg but that's not what I want, I wanna it have a named sprite.svg. So that's why I've run the rename task, that task has to run after svgstore which is really important understand. If I were to put this entire pipe up above svgstore, then that wouldn't work. So again it has to be run after svgstore. Getting down to cheerio, cheerio is what I described earlier as something that allows us to manipulate HTML and XML files. And I can use jQuery like syntax to help manipulate the final svgprite. In this case I want width 0, height 0, display none and aria-hidden true. All these things help to collapse the height and remove the paint of the whole svgsprite itself. Which is what we wan,t we don't want the browser to paint the entire svgsprite and take up space in the document. We wanna collapse all that, we also want to tell screen readers not to read it because it's not important. The parser options, I set xmlMode to true because we're manipulating an XML file and I wanna tell cheerio that's what's going on. The final pipe is the destination. And that's where the actual svgsprite is going to be placed. So if I come down to the command line here, I'm using Iterm I can simply type, and this would be after you ran npminstall to get the dependencies loaded. I'm simply gonna run gulp svgsprite, press enter. And if you look into the icons directory you can see that there was in fact a file called sprite.spg. And as you can see it's minified. It's got a namespace. The width, height display none and all those in aria-hidden attributes are all placed within the svgsprite, which is great. We've also got IDs on the symbol elements which are taking the name of the single SVG files that we have in our source directory. So, as you can see here admin-media which is the same name as the single SVG file. You could in fact set on rename. You could do a prefix, but it's just going to add the prefix on top of the file name. So if I had a prefix of icon, it would be named icon-admin-links. I find that a bit verbose and prefer to just use what the file names are actually are. So I've run sprite. I've got our gulp svgsprite. I got my sprite created, my svgsprite created. So let's actually just fire up a server here. I'm just going to type gulp and there we go. The sprites are created, open up the inspector and look. You can see that each svg icon is referenced using the use tag followed by the ID of the symbol. So in this case admin-links and if I come over here you can see it being used in the svgsprites id = admin-links which is what we want we've got our icons showing which is great. So let's run that through again. In this case second or I can just run gulp clean and get rid of that sprite. Once again I'll run them gulp svgsprite. Awesome, so it did it again, as you can see everything's working as it should. Now, what you're seeing in the browser is the result of what we did with the sprite, but how do we get that into the browser? And let's look at that. So there's a couple different options when you're including the svgsprite in your document. Most will be in line SVG, which means directly within an HTML PHP document, whatever the case is for you. But the problem with most of that is, that it can't be cached. So in order for us to cache this we can use AJAX to pull in the svgsprite. So here's the script that I'm using, I'm setting up the XML HTTP request. And then I'm saying to get that sprite that I list here, which is our svgsprite. And then I've got a little function here that's going to help append that to the document. So it's taking that response and it's inserting it after the body tag. And on unload it's using that function to append that svgsprite after the body tag. So as you can see if I open up the inspector again, there it is. That's the svgsprite we've appended with AJAX. Let's refresh this again. Looks like we're not running the server. So gulp, okay, so gulp the inspector again, shouldn't be any errors. Okay, so as you can see again the svgsprite has been included, there's all the symbols with the id tags. I've got a class of icon and simply what I'm doing with that class and my CSS is I'm giving it a width and a height, 42 pixels. If I don't give it a width and a height then browsers such as IE 10 will make it kind of stretched and weird looking. So it's best to give a width and height, and you can still make it responsive. Again using the use tag xlink=href attribute and then the id reference of the of the file in the symbol of the svgsprite. Run gulp clean again, and we're back. We've removed it all and we've cleaned it up for ourselves for the project. Close this out here. All these plugins that I mentioned today, gulp-svgstore are all on GitHub. As you can see here it goes through some documentation. How to use it, some other customizations that you might want, same with gulp-svgmin. gulp-cheerio is actually on GitHub as well. And you can go through the documentation to learn a little bit more about it. Finally gulp-rename is also on GitHub. So if you wanna understand a little bit more about gulp-rename, maybe your project specifications with directories and such are a bit different than what I'm using here. This would be the project you would go to, to help customize that a little bit more. If you're interested in an icon system with svgsprites outside what I'm talking about today. You can jump over to the CSS tricks article that goes into more depth about an svgsprite icon system. And by the way, Chris Chorea just wrote a book for a list a part called Practical SVG that I highly suggest you pick up. And if you're concerned about accessibility, which you should be, then there's also another post on CSS Tricks by Heather. She goes through some really great examples of how to make an accessible svgsprite. And include things such as a title tag and a description, that basically helps screen readers understand what this is. And gives a little bit of a helpful hint outside of just including an icon. Such as the fact this is like help text or such. So I hope you enjoyed this little coffee break lesson on making a gulp svg sprite. And as always feel free to send me a message on Twitter. If you have any questions, it's Droid Pinkman on Twitter. And again thanks for joining me and have an awesome day.