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.

Overview of the methods

Overview of the methods

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Overview of the methods

“

- [Voiceover] At their core SVG's are images. That means we can use them like we use any other image files either as reference elements or as background elements using CSS. However, because SVG's are code based we can also add them directly to the markup of an HTML document to unlock some cool extra functionalities. In this chapter we'll look at three different methods to add individual SVG's to an HTML document. In the process I'll also show you how to make your graphics backwards compatible to browsers that don't support SVG's. The first method replaces an existing PNG header image with a reference to the matching SVG I created and optimized in the previous chapter. The second method places the actual SVG code inside the HTML document allowing us to change the appearance of the SVG using CSS. And the third method swaps out existing PNG icons for SVG varieties using background image CSS functionality. all right, now that you know what we're doing let's get cracking.

Contents