Embedding SVG XML7:17 with Nick Pettit
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.
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.
[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 up