SVG Sprite Tools

In the previous video, you learned how to display SVG graphics in multiple places by 0:00 referencing one simple element. 0:04 It's one of the most useful features of SVG, especially with icons, 0:06 because you can render icons without repeating code. 0:10 But you can even reference and clone symbols located in other files. 0:12 For example, the file sprite.svg contains an SVG with three symbols that, 0:17 when cloned, draw a calendar, weather and Twitter icon. 0:22 Over in index.html, 0:26 I can call any of these icons just like we did earlier with SVG tags and use. 0:29 The only difference is that we need to include the SVG's path and 0:35 filename before the hash symbol in xlink:href. 0:39 In this case, I'm just including the file name. 0:43 Now, the biggest advantage of using a method like this compared to, 0:46 say, rendering each icon with an image tag or 0:50 CSS background, is that it can save you loads of HTTP requests. 0:53 Serving your icons from a single SVG file is going to make your sites run faster. 0:58 So now you're starting to see the humble beginnings of a robust icon system. 1:03 Now, you could keep adding your icons as symbols inside the SVG sprite and 1:08 calling them with use, but let's face it. 1:14 Do we really want to go through all this manual work of updating that SVG file 1:17 every time we need to add or remove an icon? 1:22 Probably not. 1:23 That's what build tools are for. 1:25 One of the best tools out there for 1:27 generating SVG sprites is a tool called svg-sprite. 1:28 svg-sprite takes your folder of SVG files, optimizes them and 1:32 places them into an SVG sprite sheet. 1:37 And the best part is that the creator of svg-sprite ported this tool into Gulp, 1:39 a popular built tool in front-end development. 1:45 Now there's also a Grunt version which you can learn more about in the teachers notes 1:48 of this video. 1:51 So gulp-svg-sprite does a lot of what svg-sprite does in one simple build step. 1:52 You can follow the usage instructions in the documentation 1:58 to get started using the default options or custom configurations. 2:02 I've posted links to both svg-sprite and Gulp svg-sprite in 2:06 the teachers note along with a few other useful build tools for creating sprites. 2:10 Recently, I discovered an incredibly handy boilerplate that's based on the svg-sprite 2:16 tool and Gulp, created by UI engineer. 2:21 You can grab the latest boilerplate from the link posted in the teachers notes. 2:25 I've also included a version in the project files, with custom icons. 2:29 And once again you'll need node and 2:34 NPM installed on your computer before you can begin using the boilerplate. 2:35 So I'll bring up my terminal and navigate inside the project folder 2:40 with the command cd svg-build-tool/, then run npm install to 2:45 install all the necessary dependencies for this boilerplate. 2:50 In the project files you downloaded, 3:03 I have already included a folder full of custom icons. 3:05 And in index.html I've included a few simple 3:09 CSS rules to style the icons once they're added to the page. 3:13 All right,so now to create your 3:17 SVG sprite sheet, run the Gulp command in your terminal or console. 3:22 So now the build tool immediately grabs all the SVGs files placed 3:30 in the SVG folder and generates an SVG sprite sheet from them. 3:34 So in the sprite folder you'll see the minified SVG sprite sheet 3:39 containing all the icons as symbols. 3:44 And what's awesome is that it even auto-generates a preview page 3:48 that lets you see all your icons which helps you keep track of your icon options. 3:52 Now to view the icons in the preview page, or to view any external icon in a project, 3:57 you'll need to run a local development server. 4:03 One of the quickest ways to run a local web server that serves your files 4:06 is with Python SimpleHTTPServer. 4:11 So over in the terminal, make sure that you're in the project folder and 4:14 run the command python -m. 4:19 Then SimpleHTTPServer. 4:23 And now you can view your project on local host port 8000. 4:31 And you can view the preview page at the path sprite/sprite.symbol.html. 4:37 So now to display the icons we can call the external icons in our 4:50 HTML with the names displayed here in the preview. 4:54 So back in index.html, I'll add a set of svg tags. 5:01 And inside the svg tag, I'll add a use tag. 5:09 And within that, add the xlink:href 5:16 attribute and set it to display the calendar icon 5:21 with the path sprite/sprite.svg#calendar. 5:26 And we'll display the rest by simply copying 5:35 the svg we just wrote, pasting a new one right below, and I'll change the path 5:40 to #weather. 5:46 Let's paste in one more for the favorites icon. 5:51 So I'll change it to #favorites. 5:55 I'll give my file a save, hit refresh, and there we have our icons, cool. 6:03 So now any time you want to add a new icon to your sprite sheet, 6:09 simply drop the SVG file in the SVG folder, 6:12 run Gulp in your terminal or console, and you're all set. 6:17 And as you can see, the new camera icon appears in the preview. 6:23 So now I can call it in my HTML by simply copying one of the SVG tags, 6:27 pasting a new one right below, and changing the path to #camera. 6:33 And I can even give it a class and style it with CSS. 6:41 So let's give it the class icon--camera and 6:46 up here in my styles I'll target the class icon--camera. 6:50 Set the fill color to blue with 7:01 the value #38acd0. 7:07 And cool, there we have our blue camera icon. 7:16 Now, it's important to point out that Internet Explorer up to version 11 does 7:19 not support external sprites for use with inline SVG. 7:24 But there is a poly fill you can quickly install to make external sprites display 7:28 in those browsers. 7:32 I've posted the link to the poly fill in the teachers notes of this video. 7:34