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
From the course: Creating Web Icons with SVG
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Overview of the methods1m
-
Add SVG as a regular image4m 9s
-
Add backwards compatibility with SVGeezy4m 8s
-
Add SVG as an inline element4m 12s
-
Add backwards compatibility and more with SVGInjector6m
-
Add SVG as a background image2m 23s
-
Make SVG background images backward compatible1m 50s
-
A word on SVG accessibility4m 25s
-
-
-
-
-