From the course: Making Your Site Retina-Ready

Unlock this course with a free trial

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

Adding SVG as inline URI (and why)

Adding SVG as inline URI (and why)

From the course: Making Your Site Retina-Ready

Start my 1-month free trial Buy for my team

Adding SVG as inline URI (and why)

“

- Simply pasting the SVG code into your HTML or CSS is an easy way to inline that content, but it isn't cached as an image like we discussed previously. If you want to add SVG inline and also have that image caching, you can insert the SVG inside of an image tag. And this still allows you to control it with CSS and scripting, and animate it. But it also means adding another step to the process because we need to encode the SVG for all browsers to make it work. Let's take a look. You can see right here that I have an example down on the page here, and the way we do this is we actually get the SVG file itself. We go through and we optimize it like we normally would, and we're gonna copy and paste that but not directly into the HTML. We're actually gonna encode it first. What we need to do is we need to put it inside of an image tag that contains this content. So you can start here. I'm just gonna copy that. This is on the hidpi.brianwoodtraining.com website. You can go to the SVG page…

Contents