This workshop will be retired on June 15, 2021.
Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, you'll learn tools for generating SVG sprites, then build an SVG icon system using a handy Gulp-based boilerplate.
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
You need to sign up for Treehouse in order to download course files.
Sign up