移至 SVG 图标 - 如何将它们与代码分开？答案

【问题标题】：Moving to SVG icons - how to separate them from the code?移至 SVG 图标 - 如何将它们与代码分开？
【发布时间】：2015-03-13 07:18:03
【问题描述】：

SVG 图标比字体图标有一些优势：它们可以缩放以适应可变大小的容器元素，并且理论上您可以更改各个路径的颜色。我也喜欢我可以在 Inkscape 中轻松制作它们的事实：P

但是如何在 CSS 文件中移动 SVG 以便它们可以在同一页面上重复使用，例如图标字体，并且仍然受益于这些优势？

背景属性支持 SVG，带有background: url(#svg_element)，但这意味着我必须将 SVG 放入 HTML 中：| 如果我把它作为“数据”字符串，我如何在同一个 css 文件中更改路径颜色？

【问题讨论】：

你也可以把is放在一个像svg_element.svg这样的带有anme的文件中，并像这样使用它 style="background: url(svg_element.svg)"
这与使用数据 url 字符串几乎相同，但每个图标都有一个额外的请求：P
你能解释一下，什么是“如何在同一个 css 文件中更改路径颜色”？
使用“填充”和“描边”CSS 属性更改 SVG 图形的颜色

标签： html css svg icons

【解决方案1】：

但是如何移动 CSS 文件中的 SVG 以便它们可以在同一页面上重复使用，例如图标字体，并且仍然受益于这些优势？

带有 svg 模板

让我们创建一个 svg 模板。

模板 (html)

<svg width="100px" height="100px" viewBox="0 0 100 100" class="hide">
    <circle id="circle-tmp" cx="50" cy="50" r="50" />
</svg>

它是一个模板，所以我们隐藏它。（但仍在 DOM 中）

.hide { display: none;} //css

使用 (html)

<svg viewBox="0 0 100 100" class="circle-first">
    <use xlink:href="#circle-tmp" />
</svg>

这可以在页面的任何地方重复使用。

如何在同一个 css 文件中更改路径颜色？

简单，只需设置样式！

css

.circle-first {
    fill: #12bb34;
}

工作示例？给你：Fiddle

浏览器支持？不是 100% 确定，但所有大型浏览器都支持 svg：CanIUseIt

【讨论】：

好的，所以基本上所有的答案都表明不可能使用 svg 进行样式设置，至少现在还不行。我知道使用的东西，但这仍然无助于将图标移动到它们所属的位置 - 在 css 文件中:(

【解决方案2】：

如需深入讨论，请查看在 SVG 上做了大量工作的 Sara Soueidan。 recent article/talk she gave 也可能有很多信息供您消化。

Chris Coyer 也有一些非常有用的话要说。

【讨论】：

【解决方案3】：

如果您使用 SVG 作为背景图像，则无法更改路径和填充颜色 (AFAIK)。但是，您可以使用白色 SVG 和背景颜色来创建 Metro 风格的图标。这正是jQuery Mobile theming system 所做的。

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.icon-1 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-bg-1 {
  background-color: #800080;
}
.icon-bg-2 {
  background-color: #DB7093;
}
.icon-bg-3 {
  background-color: #CD853F;
}
.icon-bg-4 {
  background-color: #B0E0E6;
}

<span class="icon icon-1 icon-bg-1"></span>
<span class="icon icon-1 icon-bg-2"></span>
<span class="icon icon-1 icon-bg-3"></span>
<span class="icon icon-1 icon-bg-4"></span>

另一种选择是使用彩色 SVG 并使用 CSS3 hue-rotate filter 更改 SVG 的颜色。此属性尚未得到广泛支持。

注意：色相旋转只影响“颜色”；黑色、白色和灰色不受影响。

.icon {
  display: inline-block;
  width: 80px;
  height: 80px;
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #EEEEEE;
}
.icon-1 {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FF0000%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E");
}
.icon-hue-1 {
  -webkit-filter: hue-rotate(0deg);
     -moz-filter: hue-rotate(0deg);
          filter: hue-rotate(0deg);
}
.icon-hue-2 {
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.icon-hue-3 {
  -webkit-filter: hue-rotate(180deg);
     -moz-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
}
.icon-hue-4 {
  -webkit-filter: hue-rotate(270deg);
     -moz-filter: hue-rotate(270deg);
          filter: hue-rotate(270deg);
}

<span class="icon icon-1 icon-hue-1"></span>
<span class="icon icon-1 icon-hue-2"></span>
<span class="icon icon-1 icon-hue-3"></span>
<span class="icon icon-1 icon-hue-4"></span>

【讨论】：

【解决方案4】：

为了保留 SVG 图标的优点，目前除了在 HTML 页面中包含 <svg> 之外别无选择。

Chris Coyier's article 描述了普遍接受的包容性最佳实践。是这样的：

将您的 SVG 图标定义存储为 <symbols>:

<svg id='my-icons'>
   <symbol id='icon-puppy'> <!-- puppy icon goes here --> </symbol>
   <symbol id='icon-kitty'> <!-- kitty icon goes here --> </symbol>
</svg>

当需要使用图标时，参考图标定义：

<svg class='icon'>
   <use xlink:href='#icon-puppy'/>
</svg>

This article 描述了如何将 SVG 文件动态地包含在 HTML 中。

【讨论】：

【解决方案5】：

看来你想远离来自html 的svg 文件的xml 内容代码。

为了满足这一点，有两种方案可以将svg 文件嵌入html：

使用<object data="~/img/file.svg" type="image/svg+xml"></object>元素，所以xml将与html ==> 分开，结果视图将是 html 和 xml 的组合，可以用 css 设置样式（也许是scoped 一个例如使用<style scoped="scoped"></style> 在目标页面上）。
使用<img src="~/img/file.svg"/>元素，所以xml会被分开来自html ==> 的结果视图将只有html 和css 无法对 svg 文件的 xml 内容执行。

另一种使用svg 的方法是使用内联技术，比如使用<svg> 标签，这样你也可以为此使用内联样式表，但是你想在这里将xml 与html 分开：)

更多信息： Using SVG 和 SVG Styling with CSS。

【讨论】：

【解决方案6】：

我以前使用过 SVG，但没有专门使用 SVG 图标。但是，根据我所掌握的知识并环顾四周，这就是我想出的（在这种情况下，我可能没有完全理解您的问题，请发布更多问题）。

但是如何在 CSS 文件中移动 SVG 以便它们可以在同一页面上重复使用

但这意味着我必须将 SVG 放入 HTML

SVG 基本上是 XML，所以不完全确定您为什么不喜欢将 SVG 放在 HTML 文件中。如果您将 SVG 放在 HTML 文件中，您可以使用外部或内部 CSS 来设置 SVG 样式。这是一个 sample 来做这件事。

在 HTML 文件中：

<circle cx="100" cy="100" r="75" />

在 CSS 文件中：（在 HTML 文件中包含 CSS 文件）

<style>
circle {
  fill: deepPink;
  transition: fill .3s ease-out;
}

circle:hover {
  fill: #009966;
}
</style>

这是许多其他选项的第二个选项，使用<img/> 标记。这是一个article，它解释了如何使用<img/>tag 从单独的文件中使用SVG。这是伴随它的code。另请注意，它使用 jQuery 插件svginject。

这里有一些其他的options 可以让 SVG 远离 HTML 及其优点。

希望这会有所帮助。

【讨论】：

【解决方案7】：

您还可以深入研究evil-icons 项目。你会发现一些使用 svg 的巧妙方法。

他们最好的想法是将所有图标合并到一个文件“sprite.svg”中。您的每个 svg 图标都需要用带有 id 的 <symbol> 标签括起来。然后，您可以在需要时通过 xlink 访问它，如其他答案中所述。

通过加载整个 sprite.svg，您将获得加载时间和整洁度。

【讨论】：