Menu
I want to include an inline svg in an html5 page that includes "use" tags that reference elements in a different svg file, referenced by URL. This is part of the SVG spec and works (as I've attempted it) in Chrome 33 and FireFox 27. It does not appear to work in IE 11.
My question is: is there a way to do this (while still maintaining the external svg and not using javascript) that works in all three browsers?
In the actual use case, the definitions are static, large, and shared between a number of pages and among multiple inline svgs on each page. I want the definitions downloaded once and cached and then used everywhere.
I understand that it is possible to do this with javascript, but as this usage paradigm is an intended part of the SVG spec and supported by Chrome and FF, I am hoping that I can do it this way and that I'm just missing some detail of how IE wants the HTML or SVG.
Here is my example HTML:
<!DOCTYPE html>
<html>
<head></head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="100px" width="100px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g externalResourcesRequired="true">
<use xlink:href="defs.svg#path-1" fill="#000000"></use>
<use xlink:href="defs.svg#path-2" fill="#000000"></use>
</g>
</svg>
</body>
</html>
And here is the defs.svg file referenced above:
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path d="M10,10L20,10L20,20L10,20" id="path-1"></path>
<path d="M30,30L50,30L50,50L30,50" id="path-2"></path>
</defs>
</svg>
803
External SVGSVG files can be referenced from HTML in several ways. The simplest is to use the <img> element, and reference the SVG file using the src attribute. Parcel will follow the reference and process the SVG and all of its dependencies as well.
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.
You can embed SVG elements directly into your HTML pages.
svg4everybody uses requestAnimationFrame, which causes too many calls. I wrote a simple and lighweight polyfill for the very purpose of supporting <use> elements with external references when the browser itself fails. This polyfill uses feature detection rather than browser sniffing. It's on github: https://github.com/Keyamoon/svgxuse
Live demo: https://icomoon.io/svgxuse-demo
154
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
