logo标签列表

迁移到SVG图标 - 如何将它们与代码分离？

htmlcsssvgicons
6

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

但是如何将SVG移动到CSS文件中，以便像图标字体一样在同一页上重复使用，并仍然从这些优势中受益？

背景属性支持SVG，例如background: url(#svg_element)，但这意味着我必须将SVG放在HTML中:| 如果我将其作为“数据”字符串放置，那么如何在同一CSS文件中更改路径颜色？

你可以将其放在一个名为svg_element.svg的文件中，并像这样使用它：style="background: url(svg_element.svg)"。 - ambes
这几乎与使用数据URL字符串相同，但每个图标需要额外的请求:P - Alex
请问您能解释一下，“如何在同一个CSS文件中更改路径颜色”是什么意思吗？ - Slawa Eremin
通过使用“fill”和“stroke”CSS属性更改SVG图形的颜色。 - Alex
7个回答
11

但是我该如何将 SVG 移到 CSS 文件中，以便它们可以像图标字体一样在同一页上重复使用，并仍然从这些优势中受益呢？

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

1
好的，基本上所有的答案都表明目前还不能使用SVG进行样式设置。我知道可以使用“use”标签，但这仍然无法帮助将图标放在CSS文件中应该在的位置。 - Alex
4

如果你想深入探讨，可以参考Sara Soueidan的文章，她在SVG方面做了很多工作。她最近做的一个演讲/文章也有很多信息可供消化。

Chris Coyer也有一些非常有用的观点。

3
为了保留SVG图标的细节，目前没有替代方法，除了在HTML页面中包含<svg>。 Chris Coyier的文章描述了通常被接受的最佳实践。大概是这样的：

  1. Store your SVG icon definitions as <symbols>:

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

  2. When you need to use an icon, reference the icon definition:

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

这篇文章介绍了如何动态地将SVG文件包含在HTML中。

3
如果您将SVG用作背景图像，则无法更改路径和填充颜色（据我所知）。但是，您可以使用白色SVG和背景颜色来创建类似Metro的图标。这正是 jQuery移动主题系统所做的事情。 

.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 色相旋转滤镜 来改变 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>

2
似乎您想要将SVG文件中的XML内容与HTML代码分开。
为此，有两种情况可用于将SVG文件嵌入到HTML中：
  1. 使用 <object data="~/img/file.svg" type="image/svg+xml"></object> 元素，因此 xml 将会与 html 分离出来，结果视图将是 html 和 xml 的组合，可以用 css 进行样式设置（可能需要在目标页面上使用 <style scoped="scoped"></style>）。
  2. 使用 <img src="~/img/file.svg"/> 元素，因此 xml 将会与 html 分离出来，结果视图将仅包含 html，css 无法对 svg 文件的 xml 内容进行操作。
另一种使用svg的方法是使用内联技术，例如使用<svg>标签，因此您也可以为其使用内联样式表，但您要在这里将xml与html分开：)

更多信息请参见： 使用SVG和使用CSS对SVG进行样式设置。

1
我之前曾经使用过SVG，但没有专门使用过SVG图标。基于我的经验并且查找了一些资料，以下是我的建议（如果有误解您的问题，请提出更多问题）。

但是如何将CSS文件中的SVG移动到同一个页面上以便重复使用

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

SVG基本上是XML，所以不太清楚为什么您不愿意把SVG放在HTML文件中。如果您将SVG放在HTML文件中，您可以使用内部或外部CSS来为其设置样式。 这里是一个示例。
在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/>标签。这里有一篇文章，它解释了如何使用<img/>标签从单独的文件中使用SVG。这里是伴随其使用的代码。还要注意它使用jQuery插件svginject。

以下是一些其他选项，可以将SVG保持在HTML之外，以及它们的优点。

希望这可以帮助到您。

1
你还可以深入了解 evil-icons项目，这与编程有关。他们提出的最好的想法是将所有图标合并到一个名为“sprite.svg”的文件中。每个svg图标都需要用id封装在<symbol>标签中。然后，通过其他答案中的注释，您可以随时访问它们的xlink。
通过加载整个sprite.svg，您可以节省加载时间并使其更加整洁。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接