The SVG fragments plugin is a simple tool that lets you use fragment

identifiers in your CSS to load all your SVG files from one file.

With fragment identifiers you display only a part or a fragment of an SVG image.

Normally to display SVGs as CSS background images,

you'll have individual as SVG files for each graphic.

And the browser has to load each SVG file separately.

Well, with post CSS SVG fragments, you load your graphics from a single file.

So your SVG acts as a sprite sheet that optimizes the delivery of your graphics.

In this video I'll show you how the SVG fragments plugin makes the creation and

use of icons in your projects much faster.

In the project files you'll see a folder named SVG.

The folder contains a simple SVG file called icons.svg.

The SVG consists of three G elements

each G element draws a different graphic, for example a heart.

Hammer.

And gear.

And you'll notice that each G tag has an ID.

These ID's are the portions or

the fragments of the SVG file we'll target with CSS.

In my terminal, I'll install the SVG fragments

plugin by writing npm install --save-dev

followed by postcss-svg-fragments.

I'll require the new plugin in my Gulp file.

Then I'll add the SVG fragment variable to the processors array.

Then run Gulp in my terminal to apply the latest changes and restart the watcher.

In the project files I've added three div elements to index.html

with the classes icon gear, icon hammer and icon heart.

So that you're able to see the icons in the browser.

First in style.css or target the class icon gear

to display the gear icon as a background image.

You display different parts of NSVG by specifying the URL to the SVG file.

As you normally do with CSS background images.

Then you define the part of the SVG file you want to display,

by appending an ID to the URL.

I know that the gear graphic has an ID of gear, so

to display the gear icon, I'll simply add #gear.

To the end of a URL.

The ID in the URL identifies the fragment or

the portion of the SVG file you want to display.

In the CSS output you'll see how the plugin

embeds the SVG data for the gear icon only.

Directly into the CSS with a data URI.

So when the browser reads the data URL it decodes the data and displays the graphic.

This reduces the number of HTTP requests made to the server which means that your

page will load faster because the browser doesn't have to load multiple SVG files.

Now to display the icons on the page I'll quickly go back to the source CSS and

give each icon a width and height.

Now they each share the class icn or icon.

So I'll create a new rule with that class and

apply a width of 150 pixels and a height of 150 pixels.

So now if I open up the index.HTML.file in the browser

we're able to see the light blue gear icon.

Cool. So to display the hammer and heart,

icons I'll simply copy and paste this icon gear rule.

And change the classes and identifiers.

So for this one, we'll say icon-hammer and

we'll change the URL to #hammer, paste another rule and

change it to icon-heart and change the ID to heart.

And there we have our colorful icons.

So if you need a fast and flexible way of displaying your SVG icons

be sure to add SVG fragments to your post CSS workflow.

For resources on plugins that create sprite sheets with P and

G images check the teacher's notes for this video.