SVG sprite in external file

There are a bunch of different ways to embed an SVG file into a document without using inline SVG code like you did in your example markup. Moving the SVG to an external file certainly makes for much cleaner, more editable code. Chris Coyier has a great page on Using SVG on CSS-Tricks. Here is a summary of the techniques covered in that article:

Using SVG as an <img>

You can embed SVG files in an <img> tag just like you would a JPG or PNG or any other image file:

<img src="kiwi.svg" alt="Kiwi standing on oval">

You can adjust the width and height of your SVG image either with inline width and height attributes, or by targeting your SVG image in a CSS document.

Note that for security reasons, most browsers will disable scripts, linking, and other interactivity of SVG files added with <img> tags.

Using SVG as a background-image

In your example code you appear to be using the SVG file as a content image, but just in case the SVG is serving a purely aesthetic purpose, you can use the SVG file as a background image in CSS:

body {
  background: url(kiwi.svg);
  background-size: 100px 82px;
  /* some other CSS probably */
}

Like <img> tags, advanced SVG features are disabled when using this method.

Using SVG as an <object>

You can also embed an SVG file in an <object>. Using this technique will allow you to use some advanced SVG features like scripting:

<object type="image/svg+xml" data="kiwi.svg" class="logo"></object>

Including SVG with PHP

If you are using PHP, or some other server-side code, you can insert the SVG file into a page programmatically. This technique might be useful if you have some more sophisticated application requiring SVG files to be dynamically loaded or something. In PHP your SVG include would look something like this:

<?php include("kiwi.svg"); ?>

Conclusion

There are almost certainly other ways to add SVG files to a webpage that I didn't cover here (iframe maybe?), but I hope you will find a method that works for your application in this list. Note that there are benefits and drawbacks with each method, so do more research before picking a method. There are also some methods that should probably be avoided. For example, don't use an <embed> tag because it is not, and probably never will be, part of any HTML specification.

Also read Chris Coyier's article that I mentioned before.


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>

Tags:

Html

Svg

Sprite

Recent Posts