Treating SVGs as regular images is all fine and dandy…if all you want to do is display the image on the web.…However, it does not take full advantage…of what SVGs have to offer.…Right now all we're doing is displaying…the SVG as a regular image and that means…we can't use CSS or Javascript to…manipulate the SVG in any way.…And it is for all intents and purposes…no different from any other image…except that it scales properly.…To unlock the potential of SVG,…we need to take the SVG document…and place it inside our html document.…

Now, if you've worked with images before on the web…this may sound a little weird and…cause a bit of cognitive dissidence…because it doesn't sound right…to place images into the document itself.…But you have to remember SVGs are not regular images.…If we go into the icons folder and miscellaneous…and actually look at header-bg.svg,…you'll see this is a web document.…It just happens to display graphics.…So what the SVG's doing is providing the browser…with instructions on how to draw the graphics on the fly.…

Resume Transcript Auto-Scroll

Author

Released

8/4/2016

As designers and developers of the web, we want graphics to look sharp, but we need to keep file sizes down for performance. How do you get the best of both worlds? There is pretty much only one way to go: SVG.

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.