From the course: Making Your Site Retina-Ready

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Adding SVG inline

Adding SVG inline

From the course: Making Your Site Retina-Ready

Start my 1-month free trial Buy for my team

Adding SVG inline

“

- Another method for adding SVG to your webpages, aside from inserting via an image tag, is to add the XML code directly inline in the HTML or even CSS. And this is actually pretty useful if you want to access the content within the SVG to do things like-- If you look right here, to maybe change this shape's CSS fill or to animate something using CSS animation or perhaps JavaScipt It's really just a matter actually of just opening the SVG file in your editor and copy paste the code in your page. So in this video we'll take a look at how to add inline. Some of the things you need, some you don't. And see how it can open doors to accessing the content via CSS and scripting. So on the main page here on this website hidpi.brianwoodtraining.com, I got an example. This is actually inline SVG. And if I go take a look at the dev tools here, you're gonna see that it's actually SVG inline. Literally inline. And what I've done is I've actually gone through and said, "Ok, the blue one here--" If…

Contents