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
It's possible to place the contents of an SVG file directly into HTML markup. This allows the SVG markup to be accessible to CSS, so that fills and strokes can be modified in the image.
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 Tool
If you're looking for an alternative to Adobe Illustrator, here is a free vector drawing tool that works in a web browser. You can go to File > Save Image to save the drawing as an SVG.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:01
So far, we've used SVGs in the same way we
0:04
use raster image formats like JPEG and
PNG.
0:07
However, earlier I mentioned that SVGs are
just markup like HTML.
0:11
That means we can actually open up an SVG
in Workspaces and
0:17
understand its structure.
0:20
Additionally, we can actually embed the
SVG data directly into our HTML.
0:22
This allows us to use CSS to select SVG
elements just like any other HTML element,
0:27
and then we can apply styling.
0:33
It's not totally necessary to do this.
0:36
Most of the time,
0:38
you'll probably use one of the methods
that we learned about already.
0:39
But if you want to adjust things like
strokes, fills and
0:43
other parts of the image, you can do it.
0:46
So here, I have my workspace open, and
0:50
we're going to get rid of some of the
stuff that we already have here.
0:53
So I'm going to delete this
graphic-with-text, and
0:58
I'm also going to delete this div as well
with the class graphic.
1:03
So let's save that.
1:10
Let's go back to our CSS and open up
main.css, and scroll down here.
1:13
And let's just get rid of
1:19
all of this stuff here as well because
we'll be typing in some different CSS.
1:22
Now, if we go back to index.html, we're
ready to paste in our SVGs.
1:27
So let's open up star.svg and take a look
at what's inside there.
1:33
Now, there's a lot of stuff here, and we
should probably format this document so
1:40
it's a little bit easier for us to
understand.
1:44
So I'm just going to put some line breaks
after every single element here.
1:47
I'm actually going to start down here at
the bottom cuz it's
1:52
a little bit easier to do it that way.
1:56
So you'll notice that most of these are
just circles
2:01
because we have a lot of different circles
on our star graphic,
2:09
both on the actual points of the star and
then around the outside of it.
2:15
And then we have some additional paths
here, and
2:21
those are some of the lines that are
inside our graphic that are not circular.
2:24
So, now we need to apply some classes to
our paths and our circles.
2:30
And if you created your graphic in
Illustrator like I did,
2:37
this can be a little bit tricky because
how can you know what's a circle and
2:40
what's a path in your graphic?
2:46
Well, let's first copy all this and
2:48
embed it into our page, and we'll see
where we end up.
2:53
So let me open up my preview here, and if
I refresh the page,
3:00
this is what it looks like, very similar
to what we had previously.
3:06
So, let's go back to our workspace and
let's apply some classes.
3:10
So we have the svg element here.
3:15
I'm just going to apply the class star.
3:17
And we could use an element selector just
to select our SVG.
3:21
But let's actually apply a class just in
case maybe we have
3:25
other embedded SVGs on our page that we
don't want to style.
3:29
I'm going to indent this just a little bit
so
3:33
that it's actually inside of our wrapper
here.
3:37
There we go.
3:40
And inside of our SVG, we have everything
else indented.
3:41
Now, here comes the slightly tricky part.
3:46
We need to figure out which one of these
paths and
3:49
circles we want to apply classes to.
3:51
I've already done some of the work here,
and
3:55
I know that this first circle is actually
our outer circle.
3:57
So, I'll say class outer-circle,
4:02
and I'll save that, and I can use
Workspaces just to hover over the fill.
4:11
And I see that it's sort of this bright
yellow color.
4:17
Let me actually try to change it to maybe
this dark yellow color.
4:21
So, I could just change it right in the
line here in my SVG file, but
4:26
I'm actually going to change it using the
class.
4:32
So, I'm going to grab this other color
here.
4:35
I'll go into main.css, and I'll select the
class that we just created, outer-circle.
4:39
And I'm going to use this CSS property
called fill, and
4:52
I'll just paste that color, add a
semicolon.
4:56
And then when we switch over to our
preview and
5:00
refresh, you can see that that fill color
has now changed.
5:04
Now, I don't actually want to do that
because we're going to
5:10
make some other changes later.
5:15
So, I'm just going to remove this style,
but
5:18
I'll keep the class because we're going to
be using that later on.
5:21
There are a few other ways to add an SVG
to a page, but that covers the basics.
5:26
While imbedding SVGs into HTML does allow
us to apply styling,
5:31
this comes with some performance
considerations.
5:37
The upside is that it reduces HTTP
requests so
5:40
your Web page might load sightly faster.
5:45
On the other hand, when an SVG is embedded
into HTML,
5:48
the browser cannot cache it like a normal
image asset.
5:51
This means that on subsequent page loads,
you won't always get
5:56
the benefit of the browser cache like you
do with other assets.
5:59
As a general rule of thumb, embedded SVGs
should have a small file size.
6:03
If you're loading a huge SVG file, you
only want to have to do it once.
6:09
There is one other thing I should point
out.
6:15
It is possible to embed an SVG using the
HTML object element,
6:18
which would allow it to cache and allow
you to apply styling.
6:24
However, if you want to use external style
sheets with an object embed,
6:29
they have to be specially linked inside of
the SVG file.
6:34
And in my experience, this isn't always
the most elegant solution and
6:38
usually isn't worth the benefit.
6:42
That's because every SVG file will need
the correct style sheet, and
6:45
if you are styling many SVGs this way,
it's a little bit difficult to
6:50
track how different styles are being
applied to different SVGs.
6:55
A more typical pattern is to use most SVGs
as images, and
7:00
then only embed an SVG when you absolutely
must apply styling.
7:05
With these precautions in mind,
7:10
let's get into some more advanced SVG
styling techniques.
7:12
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up