From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding CSS to an SVG

Adding CSS to an SVG - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Adding CSS to an SVG

“

- Now that we have grouping tags around both versions of our logo in the svg file, now we're gonna add a style element. So I'll come over here and make my preview area just a little bit smaller, just to make some more room for our code on the left hand side here. So up here, before the first grouping tag and after the beginning svg tag, let's come in here and add a new style tag. So <style then a space, let's add an attribute of type=" " "text/css" then we'll end the tag. Let's hit a few Returns, and then we'll end the element. Now if we were inside of an HTML file, we would simply start adding some CSS rules inside of these style tags, but since we're inside of an XML document, it's a good idea to put all of our CSS rules inside of a comment called CDATA or character data, and this will let the browser know that anything inside of this CDATA comment is definitely not XML content. So we'll get our cursor, after the beginning style element, we'll type a <! then a [ and in capital…

Contents