There is another, newer article on this subject that covers some newer information.<use> to reference them from elsewhere. Ideally, that "elsewhere" is an external file, because that means that file can be cached by the browser, efficiency!
Here's what I mean:
<!-- `<use>` shape defined ON THIS PAGE somewhere else --> <svg viewBox="0 0 100 100"> <use xlink:href="#icon-1"></use> </svg> <!-- `<use>` shape defined in an EXTERNAL RESOURCE --> <svg viewBox="0 0 100 100"> <use xlink:href="defs.svg#icon-1"></use> </svg>
So yeah: external resource = the way to go.
But, the external resource way doesn't work in any version (up to 11 tested) of Internet Explorer. Even the ones that do support inline SVG: 9, 10, 11.
Fortunately, Jon Neal has a clever solution. It's a little script called SVG for Everybody. The idea is this: just use
<use> as if it works, and the script will handle it in IE 9, 10, 11. A polyfill, except just for this scenario (it doesn't make this work anywhere that doesn't already support inline SVG use).
It works like this:
- If the browser is IE 9, 10, or 11 (User Agent sniff, but that's the whole point here).
- Ajax for the SVG file referenced
- Find the needed bit, based on the ID referenced (e.g. #icon-1)
- Inject that into the
<svg>on the page
I think inline SVG is damn useful and this (tiny) script means you can use it in a more responsible (cacheable) way.
Share OnTwitter Facebook Google+
Wanna learn more about SVG?
I have a full course available called Everything You Need to Know about SVG that covers the whole spectrum of SVG from the perspective of a web designer and front end developer.