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 an SVG file (.svg) to your page

Adding an SVG file (.svg) to your page

From the course: Making Your Site Retina-Ready

Start my 1-month free trial Buy for my team

Adding an SVG file (.svg) to your page

“

- One of the first methods for adding SVG to our web pages that most of us will start with is by adding SVG as an image tag. You can see that here on the HiDPI website that I've got. Now this method's pretty easy and it works in a lot of browsers. It does make it a little bit limiting if you want to control parts of the SVG with CSS for instance, or animate it since the image is a single object. But it's pretty easy and it's used quite often, and it's something that we all usually start with and we eventually wind up going to what's called inline SVG. But this is what we're gonna start with. Now I've got a couple of images in the folder here, one called logo-responsive and one called logo. Now log-responsive has the width and height taken out of the code. That was with responsive checked in Illustrator. Logo has the width and height in the code, in the SVG code. So we're gonna see the difference there. We're gonna put both of them in. So go over to my code, and you're gonna see Add…

Contents