From the course: Creating Web Icons with SVG

Unlock the full course today

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

Add backwards compatibility and more with SVGInjector

Add backwards compatibility and more with SVGInjector

From the course: Creating Web Icons with SVG

Start my 1-month free trial

Add backwards compatibility and more with SVGInjector

“

- [Voiceover] All right, I have this big inline SVG I can manipulate using CSS and JavaScript, but there are two issues. First of all, this is not backwards compatible, meaning older browsers and browsers that do not support SVGs will not display this graphic. Secondly, if we look at the actual markup of index.html you'll see it's gotten pretty hard to manage because of this inline SVG, it's gigantic. And you can imagine, this is just one SVG. What if I had 10? It would be really hard to manage and really easy to break. So I need a solution that fixes both of these issues, ideally at the same time. Fortunately, that solution exists in the form of a JavaScript plugin called SVGInjector. SVGInjector works somewhat similarly to SVGZ in that it looks for a specific element within the page, in this case, an image element with a class inject me, and then, it grabs that element, if it has an SVG in it, it replaces the image element with an inline SVG on the fly in the browser. And, if by…

Contents