svg-injector
A fast, caching, dynamic inline SVG DOM injection library.
Background | When To Use This | Basic Usage | SVG Sprite Support | Data URL Support | API | Live Examples | Installation | Security | Credit | Contributing | License
Background
There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.
Wrangling and maintaining a bunch of inline SVG on your pages isn't anyone's idea of good time, so SVGInjector lets you work with simple tag elements and does the heavy lifting of swapping in the SVG markup inline for you.
When To Use This
Injection costs a network request and a DOM swap, and it earns that cost in one case: the SVG's URL isn't known until the page runs, and the markup still has to be reachable by CSS and script. Everything cheaper either keeps the SVG out of your document or puts it there before the page loads.
- You only need to display the image. Use
background-image. Neither lets the page style, animate or script the SVG's contents, and that is usually fine. - You want the SVG isolated from the page.
,and