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 an inline element

Add SVG as an inline element

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Add SVG as an inline element

“

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…

Contents