Join Morten Rand-Hendriksen for an in-depth discussion in this video Add SVG as a regular image, part of Web Icons with SVG.
- View Offline
- [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 you would get if you looked…
SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you'll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.
- SVG vs. icon fonts
- Getting existing SVG icons
- Creating your own icons
- Adding individual SVG icons to webpages
- Adding SVG as an inline element or background image
- Using external and inline SVG sprites
- Automating SVG generation with Grunticon
- Using SVG icons in WordPress