外部文件中的SVG精灵

时间：2014-04-10 16:11:41

标签： html svg sprite

我通过IcoMoon App创建的SVG Sprite使用我的应用程序的图标系统。 在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移动到一个文件中，然后将其作为外部资源包含在内。 我怎么能这样做？

3 个答案:

答案 0 :(得分：19)

试试这个：

创建一个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>

答案 1 :(得分：10)

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

将SVG用作<img>

您可以将SVG文件嵌入<img>标记中，就像使用JPG或PNG或任何其他图像文件一样：

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

您可以使用内嵌宽度和高度属性调整SVG图像的宽度和高度，也可以在CSS文档中定位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>

您还可以在<object>中嵌入SVG文件。使用此技术将允许您使用一些高级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's article。

答案 2 :(得分：0)

另一种方法是使用包含的精灵文件生成index.html文件。这是最好的方法，因为这意味着您的SVG图标会立即加载。

您可以在具有服务器端包含的网络服务器上执行此操作：

相关问题
最新问题