From the course: Creating Web Icons with SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Add SVG as a regular image

Add SVG as a regular image

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Add SVG as a regular image

“

- [Voiceover] Let's start with the most basic method for displaying SVGs on the web, treating SVGs as regular images. In the exercise_files for this movie 03_02, you'll find the project we'll be working with throughout the rest of this course. And if we open up index.html in a browser, you see right here at the top, we have this large featured image, a title image. This image is the same one we've worked with in the previous chapter when we generated a new SVG. And now I want to replace the current image you're looking at, which is a PNG with the SVG variety. Now, why would I want I do that? Well, there are two reasons. First of all, this is bitmap of PNG. That means, if I start zooming in on this page, you'll see that the graphic gets blurry. That's because we're now displaying the graphic as bigger than it really is, so the browser is trying to interpret what that might look like, and it's blurring out all of the edges, so it looks kinda crusty and weird. This is the same experience…

Contents