外部文件中的SVG精灵

Question

我正在使用我的应用程序的图标系统与SVG Sprite,由IcoMoon App创建.在index.html中我现在有这样的事情:

<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>

我需要将svg sprite移动到一个文件中,然后将其作为外部资源包含在内.我怎样才能做到这一点？

Answer 1

试试这个:

创建一个svg文件sprites.svg

将以下内容放入其中:

<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>

然后,只要您想要包含在use元素中

<svg class="icon" viewBox="0 0 32 32">
  <use xlink:href="sprites.svg#icon-home" />
</svg>

(目前,Internet Explorer存在此问题.IE需要采用不同的方法.如果需要,我还可以显示IE所需的内容)

编辑 - 跨浏览器支持:将SVG精灵元素放在XML文件中,并将它们调用为defs元素.

XML文件,名为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>

使用Javascript传播defs元素的示例HTML文件.

<!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>

Answer 2

有一些不同的方法可以将SVG文件嵌入到文档中,而不像在示例标记中那样使用内联SVG代码.将SVG移动到外部文件肯定会使代码更清晰,更易于编辑.Chris Coyier 在CSS-Tricks 上使用SVG有一个很棒的页面.以下是该文章中介绍的技术摘要:

使用SVG作为 <img>

您可以<img>像在JPG或PNG或任何其他图像文件中一样将SVG文件嵌入到标记中:

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

您可以使用内联宽度和高度属性调整SVG图像的宽度和高度,也可以通过在CSS文档中定位SVG图像来调整SVG图像的宽度和高度.

请注意,出于安全原因,大多数浏览器将禁用添加了<img>标记的SVG文件的脚本,链接和其他交互性.

使用SVG作为背景图像

在您的示例代码中,您似乎使用SVG文件作为内容图像,但是为了防止SVG服务于纯粹的美学目的,您可以将SVG文件用作CSS中的背景图像:

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

与<img>标签一样,使用此方法时会禁用高级SVG功能.

使用SVG作为 <object>

您还可以在一个中嵌入一个SVG文件<object>.使用此技术将允许您使用一些高级SVG功能,如脚本:

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

包括SVG和PHP

如果您使用的是PHP或其他一些服务器端代码,则可以通过编程方式将SVG文件插入到页面中.如果您有一些更复杂的应用程序需要动态加载SVG文件或其他东西,这种技术可能会很有用.在PHP中,您的SVG包含如下所示:

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

结论

几乎可以肯定有其他方法可以将SVG文件添加到我未在此处介绍的网页(iframe可能会这样？),但我希望您能找到适合您的应用程序的方法.请注意,每种方法都有优点和缺点,因此在选择方法之前需要做更多的研究.还有一些方法应该避免.例如,不要使用<embed>标记,因为它不是,也可能永远不会是任何HTML规范的一部分.

另请阅读我之前提到的Chris Coyier的文章.