Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The simplest way to add an SVG to a webpage is to use it just like a normal image file. All modern browsers will accept the SVG file format in the <img> element.
Resources
Browser Compatibility
Browser support for SVGs is generally good. However, there are a few issues to be aware of in Internet Explorer, particularly that SVGs are only supported in IE 9+. Read more about SVG browser support at caniuse.com.
SVG and Illustrator Files
Here are the SVG and Adobe Illustrator files used in this course. If you're using Workspaces with this course, there is no need to download these files; they are just listed here in case you prefer to use another text editor.
Free Vector Drawing Tools
If you're looking for an alternative to Adobe Illustrator, here are some free vector drawing tools that work in a web browser. All of them should be able to export to the SVG format.
There are two different way to add SVGs to
a Web page.
0:00
You can embed SVG markup directly into an
HTML document, but
0:04
we'll learn about that later.
0:09
The other way is to add SVGs to a Web page
and
0:11
use them like traditional image files such
as PNGs or JPEGs.
0:15
We can use SVGs and
0:20
HTML with the image element or we can use
SVGs as background images.
0:21
Let's check it out.
0:27
Before we drop our SVG file into a Web
page,
0:29
there is one more step I'd like to take,
and that is SVG optimization.
0:32
There's a really cool tool on GitHub
called SVGO,
0:38
or SVG Optimizer, and there is a graphical
0:45
user interface version of this available
for Mac and Windows.
0:51
And if you are using Linux, you can still
always open up an SVG and
0:58
optimize it manually.
1:02
However, this is just a quick timesaver.
1:05
Now, I've already installed svgo-gui onto
my computer.
1:08
So I'm going to switch over to it here,
and all we have to do to optimize our
1:15
SVG and remove some of the additional
metadata that we don't really need
1:20
is just take our SVG file and drag it
directly onto svgo-gui.
1:25
And when we release it here, we'll get
1:31
a 12% savings in our file size in this
particular case.
1:35
Now, this file was pretty small to begin
with at 2.659 kilobytes.
1:41
So, it's actually not a huge savings, but
if you do have a more complex SVG file,
1:48
this might actually help your page load
times quite a bit.
1:54
So, let's switch over to our workspace now
and just close this.
1:59
And when you open up your workspace, you
can open up the index.html and
2:07
it will look something like this.
2:11
And let's just take a look around to see
what else we have here before we
2:15
get started coding.
2:20
Inside of the CSS folder, there's
normalize.css, and
2:21
that's pretty standard stuff.
2:25
That just makes a level playing field for
our website and
2:27
helps it work across different browsers
more easily.
2:31
And we also have main.css and that has
some starter code in it,
2:35
but we'll be writing some additional code
down here.
2:40
Now, we also have an image called
star.svg, and
2:46
that's the same SVG file that we saved
previously.
2:49
I've just named it slightly differently
here.
2:53
And when we open that up, you'll see that
Workspaces recognizes this as XML.
2:56
It looks sort of like HTML, but it is in
fact different.
3:03
You'll notice different elements like
circle and path, or
3:08
the SVG element itself, but we're not
going to worry about that right now.
3:13
We're going to jump back into our HTML.
3:18
Let's go ahead and include an SVG.
3:22
So, I'm going to type out
3:26
an image element with the source
img/star.svg.
3:30
And then I'll give it an alt attribute,
and
3:36
I'll say something like Star Logo, course,
you want to type
3:40
out something that is appropriate to
whatever SVG you are using.
3:46
So, if we save that, and go over to our
3:52
example here and refresh, you should see
something that looks like this.
3:58
It's a pretty giant image, but the nice
thing is that it's very crisp.
4:03
You'll notice that none of the lines here
are pixelated and
4:10
that's because everything is being
represented as a vector here.
4:13
So, it's all very sharp.
4:17
But let's try to style this with a little
bit of CSS to make it look a bit nicer.
4:20
So I'll go into main.css here.
4:26
[BLANK_AUDIO]
4:28
And I'm going to create a class called
graphic, and
4:31
I'm going to apply this to another element
I'm going to use to wrap my image.
4:38
But let's just give it a margin of 1em on
the top and bottom, and
4:47
auto on the left and right sides, and that
will center it.
4:52
And then I'll give it a width of 20%.
4:56
Now, if I create an element that
5:00
wraps our image, the class graphic.
5:05
[BLANK_AUDIO]
5:10
Then we save that out, and refresh.
5:15
We'll get something that looks like this.
5:19
You'll notice that the SVG is filling the
space that is available to it.
5:22
So, if we come out of full screen here and
5:29
we resize the browser, you'll see that the
scalable vector graphic
5:33
scales to fit the size of the containing
element, and it still looks pretty good.
5:40
Now, there is another way to include an
SVG and
5:46
that is by using a background image.
5:50
So, I'm going to create a second element
here,
5:54
and I'll give this another pretty generic
class name.
6:02
I'll say graphic-with-text.
6:05
[BLANK_AUDIO]
6:08
And then inside of that, I'm going to
create a paragraph and
6:11
I'll say, This text will go on top of the
graphic.
6:17
So we'll save that, and then let's switch
over to our CSS again.
6:24
And I want to maintain these styles on
this new class,
6:30
so let's just type out that selector
there.
6:36
We'll add a space just so we can sort of
see that there's
6:43
two different selectors there separated by
a comma.
6:47
And then we'll say graphic-with-text.
6:50
[BLANK_AUDIO]
6:53
And let's just give this text a color of
white.
6:56
We'll say the background is transparent,
so there's no background color.
7:00
Then we need to type out the URL to this
graphic.
7:07
So in this case, we need to step out of
the CSS folder,
7:12
step into the image folder, and then we'll
say star.svg.
7:15
And then we just want to center this
graphic, say no-repeat,
7:20
and let's save this out and see what we
have so far.
7:27
Now, that looks pretty small.
7:32
Why is that?
7:36
Well, it's because we don't have an
explicit height on our graphic.
7:37
Rather, the height is just being set by
whatever is in the container.
7:42
So, the height is just the height of this
text.
7:47
However, if we say something like height
200 pixels and then refresh,
7:52
you'll see that we now have something
that's a little bit more appropriate.
7:59
And you can play around with the text,
adjust some margin and padding.
8:04
Maybe you can set the image to be over on
the left and top.
8:07
[BLANK_AUDIO]
8:15
There we go.
8:18
So now, when we resize the browser, you
should see something like this.
8:19
And if you have an SVG image that maybe
you're using as a site background,
8:25
you'll probably have text and maybe even
other graphics on top of it.
8:31
Next, we'll learn about how to embed SVG
markup directly into our HTML and
8:36
when it's appropriate to do so.
8:43
We'll also learn about how to modify SVGs
with CSS.
8:45
You need to sign up for Treehouse in order to download course files.
Sign up