Menu
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?
286
SVG Sprite StacksIt can't be used in an <img> , <iframe> , <object> , or as a CSS background. The method works in all browsers including Internet Explorer 9 and above. SVG stacks are less popular today, because embedding SVGs directly into the HTML has become a best-practice technique.
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.
Then whenever you want to include in a use element. EDIT - Cross-browser support: Place SVG sprite elements in an XML file and call them into a defs element. An example HTML file with Javascript to propagate the defs element.
A loader and plugin for webpack that converts all your SVGs into symbols and merges them into a SVG sprite.
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> 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:
<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.
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.
<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> 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"); ?> 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.
42
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
