Html 外部文件中的 SVG 精灵
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22993408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG sprite in external file
提问by leo
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:
我正在使用由 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>
I need to move the svg sprite in a file and then include it as an external resource. How can I do this?
我需要将 svg 精灵移动到一个文件中，然后将其作为外部资源包含在内。我怎样才能做到这一点？
回答by Francis Hemsher
Try this:
尝试这个：
Create an SVGfile, sprites.svg
创建一个SVG文件 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 useelement.
然后每当你想包含在一个use元素中。
<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)
（此时，Internet Explorer 对此有问题。IE 将需要不同的方法。如果您愿意，我也可以显示 IE 所需的内容）
EDIT - Cross-browser support: Place SVG sprite elements in an XML file and call them into a defs element.
编辑 - 跨浏览器支持：将 SVG sprite 元素放在 XML 文件中并将它们调用到 defs 元素中。
XML file, named sprites.xml:
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>
An example HTML file with Javascript to propagate the defs element.
使用 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>
回答by Toglefritz
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 SVGon CSS-Tricks. Here is a summary of the techniques covered in that article:
有很多不同的方法可以将 SVG 文件嵌入到文档中，而无需像示例标记中那样使用内联 SVG 代码。将 SVG 移动到外部文件肯定会使代码更清晰、更可编辑。Chris Coyier在 CSS-Tricks上使用 SVG有一个很棒的页面。以下是该文章中涵盖的技术的摘要：
Using SVG as an <img>
使用 SVG 作为 <img>
You can embed SVG files in an <img>tag just like you would a JPG or PNG or any other image file:
您可以像嵌入<img>JPG 或 PNG 或任何其他图像文件一样在标签中嵌入 SVG文件：
<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.
您可以使用内联宽度和高度属性或通过在 CSS 文档中定位 SVG 图像来调整 SVG 图像的宽度和高度。
Note that for security reasons, most browsers will disable scripts, linking, and other interactivity of SVG files added with <img>tags.
请注意，出于安全原因，大多数浏览器将禁用添加了<img>标签的 SVG 文件的脚本、链接和其他交互性。
Using SVG as a background-image
使用 SVG 作为背景图像
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:
在您的示例代码中，您似乎将 SVG 文件用作内容图像，但以防万一 SVG 用于纯粹的美学目的，您可以将 SVG 文件用作 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.
与<img>标签一样，使用此方法时，高级 SVG 功能将被禁用。
Using SVG as an <object>
使用 SVG 作为 <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:
您还可以将 SVG 文件嵌入到<object>. 使用此技术将允许您使用一些高级 SVG 功能，例如脚本：
<object type="image/svg+xml" data="kiwi.svg" class="logo"></object>
Including SVG with PHP
在 PHP 中包含 SVG
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 或其他一些服务器端代码，则可以通过编程方式将 SVG 文件插入到页面中。如果您有一些更复杂的应用程序需要动态加载 SVG 文件或其他内容，则此技术可能很有用。在 PHP 中，您的 SVG 包含如下所示：
<?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.
几乎可以肯定还有其他方法可以将 SVG 文件添加到我没有在此处介绍的网页（可能是 iframe？），但我希望您能在此列表中找到适合您的应用程序的方法。请注意，每种方法都有其优点和缺点，因此在选择方法之前要多做研究。还有一些方法可能应该避免。例如，不要使用<embed>标签，因为它不是，也可能永远不会是任何 HTML 规范的一部分。
Also read Chris Coyier's articlethat I mentioned before.
另请阅读我之前提到的Chris Coyier 的文章。
回答by Toglefritz
An alternative approach is to generate your index.html file with the sprite files included. This is the best approach because it means your SVG icons are loaded immediately.
另一种方法是生成包含精灵文件的 index.html 文件。这是最好的方法，因为这意味着您的 SVG 图标会立即加载。
You can do this on the webserver with a Server Side Include:
您可以使用服务器端包含在网络服务器上执行此操作：
- Apache Server Side Include with mod_include
- For S3 and static file hosting, you can use a pre-processor like ssi.
- Apache 服务器端包含与 mod_include
- 对于 S3 和静态文件托管，您可以使用像 ssi 这样的预处理器。
