Create SVG Sprites

The SVG fragments plugin is a simple tool that lets you use fragment 0:00 identifiers in your CSS to load all your SVG files from one file. 0:04 With fragment identifiers you display only a part or a fragment of an SVG image. 0:09 Normally to display SVGs as CSS background images, 0:15 you'll have individual as SVG files for each graphic. 0:19 And the browser has to load each SVG file separately. 0:22 Well, with post CSS SVG fragments, you load your graphics from a single file. 0:27 So your SVG acts as a sprite sheet that optimizes the delivery of your graphics. 0:33 In this video I'll show you how the SVG fragments plugin makes the creation and 0:39 use of icons in your projects much faster. 0:44 In the project files you'll see a folder named SVG. 0:48 The folder contains a simple SVG file called icons.svg. 0:52 The SVG consists of three G elements 0:57 each G element draws a different graphic, for example a heart. 1:01 Hammer. 1:06 And gear. 1:07 And you'll notice that each G tag has an ID. 1:09 These ID's are the portions or 1:12 the fragments of the SVG file we'll target with CSS. 1:15 In my terminal, I'll install the SVG fragments 1:21 plugin by writing npm install --save-dev 1:27 followed by postcss-svg-fragments. 1:32 I'll require the new plugin in my Gulp file. 1:42 Then I'll add the SVG fragment variable to the processors array. 2:00 Then run Gulp in my terminal to apply the latest changes and restart the watcher. 2:07 In the project files I've added three div elements to index.html 2:15 with the classes icon gear, icon hammer and icon heart. 2:20 So that you're able to see the icons in the browser. 2:25 First in style.css or target the class icon gear 2:29 to display the gear icon as a background image. 2:34 You display different parts of NSVG by specifying the URL to the SVG file. 2:40 As you normally do with CSS background images. 2:46 Then you define the part of the SVG file you want to display, 2:56 by appending an ID to the URL. 3:00 I know that the gear graphic has an ID of gear, so 3:03 to display the gear icon, I'll simply add #gear. 3:07 To the end of a URL. 3:13 The ID in the URL identifies the fragment or 3:15 the portion of the SVG file you want to display. 3:19 In the CSS output you'll see how the plugin 3:23 embeds the SVG data for the gear icon only. 3:28 Directly into the CSS with a data URI. 3:32 So when the browser reads the data URL it decodes the data and displays the graphic. 3:36 This reduces the number of HTTP requests made to the server which means that your 3:42 page will load faster because the browser doesn't have to load multiple SVG files. 3:47 Now to display the icons on the page I'll quickly go back to the source CSS and 3:52 give each icon a width and height. 3:58 Now they each share the class icn or icon. 4:01 So I'll create a new rule with that class and 4:05 apply a width of 150 pixels and a height of 150 pixels. 4:08 So now if I open up the index.HTML.file in the browser 4:14 we're able to see the light blue gear icon. 4:19 Cool. So to display the hammer and heart, 4:22 icons I'll simply copy and paste this icon gear rule. 4:26 And change the classes and identifiers. 4:30 So for this one, we'll say icon-hammer and 4:33 we'll change the URL to #hammer, paste another rule and 4:37 change it to icon-heart and change the ID to heart. 4:42 And there we have our colorful icons. 4:52 So if you need a fast and flexible way of displaying your SVG icons 4:54 be sure to add SVG fragments to your post CSS workflow. 4:58 For resources on plugins that create sprite sheets with P and 5:03 G images check the teacher's notes for this video. 5:06