如何将svg路径移出html答案

【问题标题】：How to move svg path out of html如何将svg路径移出html
【发布时间】：2016-07-30 07:24:17
【问题描述】：

我正在使用来自Chris Coyer的这个例子

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"    mlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">

<defs>
<g id="icon-image">
<path class="path1" d="M0 4v26h32v-26h-32zM30 28h-28v-22h28v22zM22 11c0-1.657 1.343-3 3-3s3 1.343 3 3c0 1.657-1.343 3-3 3-1.657 0-3-1.343-3-3zM28 26h-24l6-16 8 10 4-3z"></path>
</g>
</defs>
</svg>

<h1>
<svg viewBox="0 0 32 32">
    <use xlink:href="#icon-phone"></use>
 </svg>
Call me

但是，我希望路径定义不在 html 中，因为它们将在整个应用程序中使用。

这可能吗？（注意：我已经阅读了建议 javascript 将 svg 手动注入 html 的答案。我也不想这样做。）

我知道嵌入/链接 SVG 路径和文件的方法有很多。我都试过了。特别是，我需要能够将其设置为 currentColor。正如blog post 中详细介绍的那样，这无法通过外部 SVG 文件完成，然后在 img 标签中使用。

所以我发现最接近的就是上面的这个例子。但是，我仍然不希望将路径嵌入到 html 中。如果我能以某种方式将它放在某种类型的外部文件中以便它可以重复使用，那就太好了。

【问题讨论】：

stackoverflow.com/questions/7215009/…
我读过这个问题，但我没有看到适用于此的答案。
为什么不把你的 SVG 图标转换成字体呢？
另一种选择是制作 SVG 精灵并使用数据 uri 将其与 CSS 一起加载
@LGSon 你如何转换成字体？这听起来是个好主意！

标签： html css svg

【解决方案1】：

另一种选择是将 SVG 转换为字体

在互联网上搜索“将 SVG 转换为字体”将为您提供很多这样做的网站/工具，例如：

“HTML 实体”也有一些可重复使用的图标等。

https://dev.w3.org/html5/html-author/charref

【讨论】：

【解决方案2】：

这里只剩下一个选项了。您不想手动嵌入 svg，不想用 javascript 注入它，也不想在 img 标签中使用它，因为您想用 css 修改属性。唯一剩下的解决方案是使用您的服务器端语言来注入它。

如果您使用的是 php，您可以简单地将 svg 文件的内容回显到您想要的位置：

<?php echo file_get_contents(file_path); ?>

【讨论】：

【解决方案3】：

我发现的另一个选项是 SVG Sprites，Chris Coyier 详细解释了

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
  .icon {
width: 125px;
height: 125px;
background: #eee;
      fill: currentColor;
}

body {
  padding: 20px;
}
</style>
</head>
<body>
<div style="color: red">
    <svg class="icon"><use xlink:href="menu.svg#beaker"/></svg>
</div>
<div style="color: brown">
    <svg class="icon"><use xlink:href="menu.svg#fish" /></svg>
</div>
</body>
</html>

然后在一个名为 menu.svg 的单独文件中：

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>

<symbol id="fish" viewBox="0 26 100 48">
    <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.1,0-4.2,0.1-6.2,0.3L39,26c0,4.5,1.3,9,2.4,12.1C31.7,40.7,23.3,44,16,44L0,34
c0,8,4,16,4,16s-4,8-4,16l16-10c7.3,0,15.7,3.3,25.4,5.9C40.3,65,39,69.5,39,74l16.8-9.3c2,0.2,4.1,0.3,6.2,0.3
c19,0,34.5-10.5,36.5-12.5S100.5,49.5,98.5,47.5z M85.5,50c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
C88,48.9,86.9,50,85.5,50z" />
</symbol>

【讨论】：