Moving SVG inline with HTML - CSS Tutorial

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.