svgxuse

A simple polyfill that fetches external SVGs referenced in <use> elements when the browser itself fails to do so.

Example of <use> with external reference:

<svg class="icon icon-edit"><use xlink:href="symbol-defs.svg#icon-edit"></use></svg>

IE (9, 10, 11) fails to load symbol-defs.svg in the example above. svgxuse goes through every <use> element. If the element is referencing an external SVG and the browser has failed to load it, the script sends a GET request to grab and prepend the SVG to <body>.

Try this demo in IE or other browsers to see how this polyfill works in action.

Features

No browser sniffing

This polyfill relies on feature detection. As a result, it detects and attempts to solve issues in any browser that may fail to fetch the linked SVG. For example, cross domain linking to external SVGs may fail with this error: Unsafe attempt to load URL X from frame with URL Y. Domains, protocols and ports must match. Using svgxuse, your SVG would still load as long as it is served with proper CORS headers.

Doesn't try to support IE8

svgxuse is a polyfill and therefore doesn't need to support IE8. It's minimal and to the point.

No requestAnimationFrame or setTimeout for polling the DOM

Unlike similar solutions, svgxuse doesn't use requestAnimationFrame or setTimeout for polling the DOM.

No repetitive addition of inline SVGs

Instead of replacing <use> elements with SVG paths, svgxuse only adds symbol definitions to the markup once.

Usage

<script src="svgxuse.js" defer></script>

With NPM

npm install --save svgxuse

<script defer src="node_modules/svgxuse/svgxuse.js"></script>

With Bower

bower install --save svgxuse

<script defer src="bower_components/svgxuse/svgxuse.js"></script>

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Fetch	25,766	250,591	8,930	2 days ago	35	July 20, 2023	1	mit	JavaScript
A window.fetch JavaScript polyfill.
Isomorphic Fetch	6,936	185,206	7,659	7 months ago	23	September 23, 2020	54	mit	JavaScript
Isomorphic WHATWG Fetch API, for Node & Browserify
Unfetch	5,560	2,467	1,501	5 months ago	10	January 03, 2023	23	mit	JavaScript
🐕 Bare minimum 500b fetch polyfill.
Form To Google Sheets	3,719			2 months ago			53	apache-2.0	JavaScript
Store HTML form submissions in Google Sheets.
Cross Fetch	1,587	14,308	4,914	2 months ago	49	July 03, 2023	10	mit	JavaScript
Universal WHATWG Fetch API for Node, Browsers and React Native.
React Ie8	988		2	4 years ago	7	January 06, 2016	21
Make your React app work in IE8
Fetch Jsonp	981	1,400	934	3 months ago	19	July 06, 2023			JavaScript
Make JSONP request like window.fetch
Svgxuse	744	173	62	a year ago	26	October 25, 2017	13	mit	JavaScript
A simple polyfill that fetches external SVGs referenced in use elements when the browser itself fails to do so. Demo: https://icomoon.io/svgxuse-demo/
Url Search Params Polyfill	586	540	307	25 days ago	22	March 26, 2021	5	mit	JavaScript
a simple polyfill for javascript URLSearchParams
Abortcontroller Polyfill	313	1,408	317	7 months ago	40	October 08, 2022	12	mit	JavaScript
Polyfill for the AbortController DOM API and abortable fetch (stub that calls catch, doesn't actually abort request).

Svgxuse