I'm using an icon system for my app with SVG Sprite, created by IcoMoon App. In index.html I have now something like this:
<html>
<head>...</head>
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="80" viewBox="0 0 752 80">
<defs>
<g id="icon-home">
<path class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
</g>
<g id="icon-camera">
<path class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</g>
</defs>
</svg>
...some html code...
<!-- an image -->
<svg class="icon" viewBox="0 0 32 32"><use xlink:href="#icon-home"></use></svg>
</body>
<html>
I need to move the svg sprite in a file and then include it as an external resource. How can I do this?
Answer
Try this:
Create an SVG file, sprites.svg
Place the following in it:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="icon-home" class="path1" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="icon-camera" class="path1" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</svg>
Then whenever you want to include in a use element.
<svg class="icon" viewBox="0 0 32 32">
<use xlink:href="sprites.svg#icon-home" />
</svg>
(At this time, Internet Explorer has a problem with this. IE would need a different approach. If you want, I can also show what's necessary for IE)
EDIT - Cross-browser support: Place SVG sprite elements in an XML file and call them into a defs element.
XML file, named sprites.xml:
<?xml version="1.0" encoding="UTF-8"?>
<SPRITES xmlns="http://www.w3.org/2000/svg">
<path id="iconHome" d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z" />
<path id="iconCamera" d="M9.5 19c0 3.59 2.91 6.5 6.5 6.5s6.5-2.91 6.5-6.5-2.91-6.5-6.5-6.5-6.5 2.91-6.5 6.5zM30 8h-7c-0.5-2-1-4-3-4h-8c-2 0-2.5 2-3 4h-7c-1.1 0-2 0.9-2 2v18c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-18c0-1.1-0.9-2-2-2zM16 27.875c-4.902 0-8.875-3.973-8.875-8.875 0-4.902 3.973-8.875 8.875-8.875 4.902 0 8.875 3.973 8.875 8.875 0 4.902-3.973 8.875-8.875 8.875zM30 14h-4v-2h4v2z" />
</SPRITES>
An example HTML file with Javascript to propagate the defs element.
<!DOCTYPE HTML>
<html>
<head>
<title>Sprites</title>
</head>
<body onLoad=loadSprites()>
<svg id=mySVG width="400" height="400">
<defs id="spriteDefs" />
<use xlink:href="#iconHome" transform="translate(100 100)" />
<use xlink:href="#iconHome" transform="translate(200 100)" />
<use xlink:href="#iconHome" transform="translate(300 100)" />
<use xlink:href="#iconCamera" transform="translate(100 200)" />
<use xlink:href="#iconCamera" transform="translate(200 200)" />
<use xlink:href="#iconCamera" transform="translate(300 200)" />
<use xlink:href="#iconHome" transform="translate(200 300)" />
</svg>
<script>
function loadSprites()
{
var xmlFile="sprites.xml"
var loadXML = new XMLHttpRequest;
loadXML.onload = callback;
loadXML.open("GET", xmlFile, true);
loadXML.send();
function callback()
{
//---responseText---
var xmlString=loadXML.responseText
//---DOMParser---
var parser = new DOMParser();
var mySpritesDoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
var addSprites=mySpritesDoc.childNodes
for(var k=0;k<addSprites.length;k++)
{
var sprite=addSprites.item(k).cloneNode(true)
document.getElementById("spriteDefs").appendChild(sprite)
}
}
}
</script>
</body>
</html>