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/
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/
A simple polyfill that fetches external SVGs referenced in `` elements when the browser itself fails to do so.
Example of `` with external reference:
IE (9, 10, 11) fails to load symbol-defs.svg in the example above. svgxuse goes through every 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.
Try this demo in IE or other browsers to see how this polyfill works in action.
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.
svgxuse is a polyfill and therefore doesn't need to support IE8. It's minimal and to the point.
Unlike similar solutions, svgxuse doesn't use requestAnimationFrame or setTimeout for polling the DOM.
Instead of replacing `` elements with SVG paths, svgxuse only adds symbol definitions to the markup once.
npm install --save svgxusebower install --save svgxuseMIT © IcoMoon.io
No open issues yet, or sync has not completed.