Design the Web: SVG Rollovers with CSS
23m 47s
Beginner Aug 11, 2014
Learn how to change the color and visibility of SVG graphics with CSS. In this installment of
Design the Web, author Chris Converse shows how to control the properties of SVG elements
with external CSS, and make your graphics update on rollover. Plus, learn how to group multiple
SVG graphics and control them with a single rollover state. The exercise files for this course are
free to all members, so dive in and start following along now.
About the exercise files
The exercise files for this course are available to all members of the Lynda.com online training
library and consist of two files. First is an HTML file called important_things. This is an HTML file
that has a single image tag inside of the body area and there's a source that points to an SVG
graphic. The other file in the exercise files is the SVG graphic. We're going to be opening this file
up inside of a text editor and copying all of this SVG code. Now, this is a graphic that I created in
combination with using artwork from Illustrator and hand-coding some of the individual tags.
And you can use this SVG graphic or any SVG graphic you create from any other application to
follow along with the techniques in this course. And now that we're familiar with the exercise files,
next we'll talk about three different options we have for controlling SVG with CSS.
Options for combining CSS with SVG
Now to being the project, lets go into the exercise files. And lets open up important_things.html up
in a text editor. And in this HTML, file we're using a standard image tag to link to that
important_things.svg graphic. Now if you open this file in a web browser, or if you're coding tool
has a preview capability, you can open this file up in a preview. And in either case, inside of the
browser, you'll see the SVG graphic showing up. This will be treated like any other regular image
tag in HTML. With the exception, however, that since this is an SVG graphic, most modern
browsers will resize that graphic as you resize the window.
This will not be the case, however, with Internet Explorer. So if we switch over to the windows
platform and take a look at this file inside of IE, you'll see that the varying widths are not
supported. I can come in here and resize the browser. And once I get under a certain threshold,
you'll see a little bit of scaling here. But once I get a little bit wider we don't see anymore width
scaling. Now there is one way around this, we can simply put a width attribute on the image tag
and set the width to 100%. So let's switch back over to our HTML file and let's quickly add that
attribute. So back in our HTMLl file, let's come in here and let's add a width equals, 100%.
Save our file, let's switch back over to the windows platform. And now back in internet explorer, I'll
hit Reload. And we'll see that now the width property is now being dynamically resized. So if I
come in here and change the width of the browser, we can see that SVG graphic is changing
size. And this will also work in Chrome and Firefox and any modern HTML5 browser on either
platform. So now when we want to use CSS in conjunction with SVG, we have three basic
options. The first option, which is what we have currently set up, is that we can point to an SVG
graphic using a standard image tag.
This will limit us to doing all the same things we can do to regular images with the SVG graphic,
such as define position, opacity and dimensions. Another option available to us is to use the
object tag. In this case, we will still point to an SVG graphic much like we did with the image tag.
But then what we can do is put CSS styles in line inside of the SVG file. What this will do is allow
us to define CSS rules that will then target the SVG elements inside of this file. Now we won't be
able to target other SVG files, these CSS rules will only be applied to this SVG graphic.
Now a third option we have is to put all the SVG code inside of our HTML file. This is often
referred to as inline SVG. Basically, we take the HTML file and inside of the body element, we
take all of the SVG code and we put this directly in to the HTML file. This is the technique that
we're going to use in this particular class, and what this allows us to do is to externalize all of our
CSS. So the CSS can either be in the heading tag, which is in the html but outside of the SVG. Or
it can be a separate CSS file altogether.
And this will allow us to style our SVG elements along with other elements on our page, and
control everything from one central spot. So now that we know which option we're going to use to
control our SVG with CSS. Next, we're going to open the SVG in a text editor and replace the
image tag with allow of the SVG code.
Moving SVG inline with HTML
Now, to be able to control our SVG graphic with external style sheets whether they're inside of
the style element in the heading area or a separate file, we need to put all of the code from the
SVG graphic inside of this HTML file. So in the exercise files, let's open up important things at
SVG and open that up inside of a text editor. Once you open that, what you'll see here is an SVG
beginning tag. And then you'll see all of the individual elements that make up this graphic. And if I
scroll down here, we can see the ending SVG tag. Now all of the artwork up here, I actually
created using Adobe Illustrator, and exporting that out to SVG.
And then I hand coded the text elements down here to get that sort of right justified effect for the
rollover. Now, you can use this file or any SVG-based file. All the techniques that we're going to
be covering in this course will work with any SVG file. So inside of here, let's come in and do a
select all. Let's copy all of this code to the clipboard. Next, let's switch over to our HTML file.
Inside of here, we're going to come in here and get rid of the image tag. And let's paste in all of
that SVG code.
Once we past this in, you'll notice, when you preview this in a browser, it will actually shift a little
bit. Depending on the browser, you'll get different behaviors. Here, I can see the WebKit browser
inside of this preview. We'll still maintain that width aspect, so I can scale the width. And we'll see
all of the SVG scaling. Now, we'll get a little bit of a different behavior in other platforms. So let's
go back to the Windows platform and take a look at IE. Now in IE, in Windows, we have the same
problem we had when we pointed to the SVG file using an image tag without a width equals
100%.
We get the graphic being rendered in the center of the screen, but the width is not dynamic.Now if
we look at this inline graphic with Chrome and Firefox, we'll see that these are actually resizing,
like what we saw earlier. Now there's another interesting thing you'll get with a WebKit-enabled
browser. So here I am inside of Firefox. If I change the height inside of Firefox, you'll see that this
actually starts to clip the height inside of the browser. However, if we move over to Chrome,
which is a WebKit-enabled browser, Chrome will actually resize the SVG based on the height as
well.
Now the WebKit rendering engine, which is used inside of Chrome, is also used on the Android
platform and the iOS platform. So Android devices, iPhone, and iPad will also give you a similar
behavior. But before we continue on with the course, we want to set something that's going to be
consistent across all of our browsers. So we're going to size the SVG element with CSS. So let's
switch back to our HTML file. So let's go back to our HTML file. Let's scroll up to the top of the
document. And inside of the heading area in the style area, let's delete this style comment.Let's
type SVG as a new CSS rule, beginning and ending brackets.
We're going to target the SVG element down here. And we're going to come in here and give this
some properties. So we're going to set a width property of 500 pixels and a height property of 292
pixels. Once we have these in place, you'll see that the graphic now moves up to the top of the
screen. Adding these CSS properties will then make this graphic behave more like the image tag
we saw earlier. So now with this in place, let's go test this on the Windows platform.So back in
Windows, first let's hit reload in Chrome. We can see that Chrome now snaps the graphic to 500
by 292. And will ignore resizing the window.
Let's switch over to Firefox. We'll hit reload in here as well. And then lastly, back to Internet
Explorer, and get the same user experience here as well. And now that we have the consistent
rendering experience across multiple HTML5 enabled browsers, next we're going to move some
of the inline CSS styling into external CSS rules.
Adding classes to SVG elements
Now that we have our SBG in line in the HTML file and we have some CSS started up here that
will allow us to control the CSS elements. Let's now, take some of the inline styles and move
them into the CSS area. So, in order to see what some of these SBG paths are doing, if we come
down here for example, on line 19 here. I'm going to add an extra a in the word path. I'm going to
malform this, so that the browser doesn't understand what this is and what that's going to do is
hide that particular SPG or path element.
So now, I can see that that element here, this entire path, is now that red segment of this
circle.So lets come back here and put this back to say path. Next we have the style element. Just
like we would have an inline style in any HTML item. Lets come in here and grab the fill and this
color, I'm going to cut this to the clip board and instead lets come in here and add a class. So
we'll say class equals, two quotes. And we'll call this segment_red. Now once I've taken that style
out, notice that the default is black.
So now the segment of that circle is showing up as black. Let's scroll up to our CSS area. Let's
come in here and let's create a class called segment_red that matches the name of the class we
just put on that element. Let's put in our beginning and ending bracket. And then, let's simply
paste in that fill style. Once we do that, we'll see that the red has now been restored to that path
segment. So now, what we're doing basically is we're reassigning classes to these individual
elements. And then removing the CSS properties that were defined as an in-line style into these
external CSS rules.
So now with this segment, red, complete, let's scroll down. Let's malform this path name. We can
see that this is the bottom green area. So let's come back here, let's restore that name. Let's
come in here and select a value of style, which is this fill color for green. Let's cut that. Let's
change the style attribute to class. We'll name this segment_green. Let's scroll up. Inside of the
CSS let's add a class for segment_green.
Put in our brackets, and then paste the property. Let's scroll down. Let's find the third path
here.This is the gold segment. Let's fix that name. Let's cut the properties. Rename style to
class.Name this segment_gold. Let's scroll up to the CSS. Let's add a .segment_gold
class. Paste those properties. And we have one more. Let's scroll down and find the path
segment for the aqua color. Which is this one right here. Let's cut the property to the
clipboard. Let's replace style with class. Let's name this segment_aqua.
Scroll up in the CSS. Let's add a class called segment_aqua. And then paste in those fill
properties. So now at this point, all 4 of those SVG segments are now having their color
controlled by these CSS rules which are outside of the SVG object. And now with these in place,
next we'll use some simple pseudo classes to control the colors of these elements, if somebody
rolls their mouse over them.
Combining CSS hover states with SVG
Now to create some simple roll overs inside our SVG, we can use the pseudo class. So lets come
up here in the CSS and lets copy the segment red CSS roll, copy that to the clipboard. Lets hit a
Return, lets paste that on a new line. And get your cursor after the segment red name, lets add a
pseudo class so put column, hover. Next, we'll come over here and delete the fill color properties,
and change them to BA0F11. Now with that in place, you can reload this in your browser. If you
come over here to the SVG graphic and move your cursor over the item, you'll notice that we now
get a hover state when we roll over that segment.
Now what's interesting here is if I move my cursor up inside of this negative space here, you'll
notice that the hover state is not triggered. It's only triggered when I hit exactly on this vector
shape. Now this varies in behavior from more traditional web graphics in that the bounding box of
the object is not the bounding box of the HTML element, but it's the bounding box of the actual
vectors that make up the SVG graphic. When we use typical bit map formats, like PNG, GIF, or
JPEG. Whether they're using the image tag or defined as the the background graphic in CSS,
there's a bounding area around the entire object.
So, moving your cursor inside that bounding area will trigger the hover state. With an SVG
graphic however, the browser is aware of all of the individual vector shapes inside of that
graphic.So the hover detection is based on the actual artwork, and not the bounding area of the
SVG object over all. Now this gives you an incredible amount of control for creating really subtle,
orreally intricate roll over states in your SVG graphics. So at this point, we're going to create two
more simple roll overs. Let's come down here and copy the segment_green CSS rule.
Let's past that on the next line. Let's add the pseudo class of hover, and then for the green color,
let's delete the color that's there now and let's add in aab720. That's going to give us a darker
green. Next, let's come down and copy the segment gold CSS rule. Paste that on the next
line.Add in the hover class. And let's change the color that to e4a739. Once that's done, save
your work. Go back to your browser. Now you can roll over all three segments and you'll get a
slightly darker color from the original.
Now we're not going to set the hover state here for the aqua segment. What we're going to do
next is group together multiple SVG elements using the grouping tag, and then we'll control
multiple elements with the hover state later on
Grouping SVG elements
Now before we make the hover state for the aqua segment, what we want to do next is group
together some of the SVG elements. So that we can control multiple SVG items with our pseudo
class. So let's scroll down and let's find our segment aqua, which is right here. Then after that we
have more artwork. We have a polygon here. I'm going to come in here and add an extra o in
there to malform that. And then we can see that that's actually the little triangle here that points
at our human figure in the text. I'll come back and remove the typo and you'll see the arrow come
back.
The next segment here, this path, let's malform that. That's the person's body. Next path, that's
the person's head. And then if we scroll down, we can see our three text objects. I'll malform the
first one here, and that will affect all of the text elements. So what we're going to do is, let's scroll
up and before the segment aqua, let's hit a Return and let's put in a tag. This is the SPG grouping
tag, so we have a beginning tag here and then let's scroll down to the bottom after the text
element.
Let's add an ending tag. So now all of these items inside of here, the three text elements, both of
our paths, the polygon and the aqua segment are now inside of that grouping tag. I'm going to
come in here and just simply tab this in a little bit, to keep the formatting in place. So now if I
come in here and malform this grouping tag, I'll add a second . Notice that with that malformed,
all of these items now disappear, because now they're all grouped together in this one grouping
element. So we'll come back here and fix that. Now let's create a second group.
What I want to do is group together the person and all of the text and the arrow. So we have the
segment, which is going to be showing all the time. So let's come in here and before the polygon,
let's hit a Return. Let's add another grouping tag here. Let's scroll down. After the text, let's end
that grouping tag. And again, I'll come in here and format this a little bit. I'll just tab this in. So now
we have a group inside of a group. For the outer group, before this segment aqua, let's come in
here and add a class. We're going to call this aqua_pieces.
And let's come down to the second group and add a class on here called aqua_over. And now to
test and make sure we have the right elements inside of aqua_over, I'll come in here and add a
second to malform this. And I can see that that takes away the arrow, the person, and the text,
but it leaves the aqua segment. Let's fix the tag. Let's move up to the top, inside of our CSS, let's
hit a Return. The first thing I want to do is activate a hover state for that aqua segment. Now
we're going to create another CSS rule, but I'm going to target the parent class first.
So we'll type .aqua_pieces:hover, we're going to put the hover pseudo-class on the container,
then a space, then .segment_aqua. Put in our brackets, and let's set the fill to #3c9497. Once
that's in place, if we come over here to the browser, all of our hover states are still in place from
the three previous segments we defined. And now if I roll over the aqua segment, that will change
color.
And notice the color now matches the color of the elements inside of the group. So now you'll see
that we have all four line segments triggering their hover states. What you'll also notice is if we
come over here and hover over any of the art work that's inside of that group, that will also trigger
the hover state for the aqua segment. So if I roll over the person's head or body or any of the text,
that will still trigger that line segment. So now that we have parts of our SVG graphic strategically
grouped, next we'll further optimize our in-line styles into our external style sheet and we'll show
and hide multiple SVG elements using our new groups.
Controlling grouped SVG elements with CSS
Now we're going to make use of the pseudo class that we assigned to the aqua piecescontainer,
to show and hide multiple SVG elements as well. So in our CSS we're going to create a new rule
that's going to target the aqua pieces class, then a space, then we're going to type
.aqua_over. Put in our brackets, then we're going to set a display type of none. So that's going to
initially hide that second group with a class of aqua_over. So once we do that, if we go back into
our browser, you'll notice that I can move my cursor inside of where that SVG element is.
And since the display type is set to none for that entire group, it doesn't trigger the rollover for the
segment aqua. Now to get that group to show up when I do hover over the segment aqua,we're
going to create a second CSS class that's going to use that pseudo class on the aqua pieces. So
let's go back to our CSS. Let's come up here and copy the aqua pieces, hover pseudo
class. Let's copy that to the clipboard. And after the aqua_pieces aqua_over with a display of
none, let's paste that rule. Let's come here to the fill, let's just delete that. And let's come over
here to aqua_pieces:hover.
And next let's change segment_aqua, to aqua_over. So now what we're doing is we're targeting
two things. Up here on hover, we're targeting the segment aqua. And down here on hover, we're
targeting the aqua_over group. And what we're going to do here is set display to inherit.This way,
it's going to inherit the display type of segment aqua, which is defaulting to the SVG display type
which is going to make it visible on the screen. Now with that change in place, let's go back to our
browser, let's come in here and when we hover over this, not only will we see the segment aqua
change color, but all of the elements inside of the group will now be activated as well.
Now another thing you'll notice is if I hover over here and then move my cursor outside on this
arrow. This will still trigger this artwork, because it is part of this same group and they overlap a
little bit. And then as soon as I move into the negative space, the hover state is no longer being
triggered. So now that my hover state is properly showing and hiding that group, the next thing I
want to do is remove all of the remaining inline CSS dialsstyles in the SVG, and move them into
our CSS area. So in order to see all of those elements here, let's come in here and temporarily
malform the display setting here.
So I'll just put a forward slash here so that that's malformed, and now we'll see all of the artwork
showing up here. Now let's scroll down and inside of the aqua_over group, we'll see that we have
more styles here controlling the fill. So for this first path, let's come in here and remove that
style. That's going to be for the arrow here. Let's do the same for the next path. That's going to be
the person's body. Next path, that's going to be the head. And then in the text area, we have a
couple of properties inside of here. So let's come in and let's remove everything on this first group
except for font weight is bold.
So we'll leave style font weight bold so friends will show up bold here. You'll also see that the type
and the style now get a little messed up. For the middle text element, we're going to get rid of this
style altogether, and the same thing for the third one. Now with our inline styles removed, let's go
up to the top of the document. Now in the CSS I'll make a new rule. We'll call this aqua_over, and
a space. Then we're going to use an asterisk. We're going to target every item inside of the
aqua_over group. Put in our brackets. We're going to set fill, and we're going to set all of those
colors to the dark green.
So I'll do #3C9497;. Once that's in place, you'll see all of the text and all of the graphics are now
showing up in that dark green. Now let's fix the text. Next line. Typed out aqua_over text,
beginning and ending bracket, now we're going to target all the text elements inside of the
aqua_over group. So we're going to start with font-family. We're going to set that to Arial. We're
going to set font size to eight pixels, and now we're going to set a text property that's going to
relate to SVG files.
So we're going to type text-anchor: end; and what that's going to do is align all of the text inside
of each text element to the end of the string instead of the beginning. That way we can use the
positioning to align all of the text on the right. So now with all of these in place, lets come back
here and fix the display of none. Lets save our work. Lets go back to our browser, and now we
can roll over all of the individual segments, and when we roll over the segment aqua, we get all of
the group elements showing up as well.
So now with that in place, let's go test this on the Windows platform. So here in IE in Windows, I
can roll over all of these different segments and they change color. And I roll over the aqua
segment, and I can see the group now shows up. And we have the exact same user experience
happening inside of Chrome and inside of Firefox. And with that, that completes Creating SVG
Rollovers with CSS.