Question

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

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

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

Answer 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

Answer 2

要进行深入讨论，请查看已在SVG上做过大量工作的Sara Soueidan。 recent article/talk she gave也可能有很多信息供你消化。

Chris Coyer也有一些非常有用的东西可以说。

Answer 3

如果您使用SVG作为背景图像，则无法更改路径和填充颜色（AFAIK）。但是，您可以使用白色SVG和背景颜色来创建Metro-ish图标。这正是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>

Answer 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描述了如何动态地在HTML中包含SVG文件。

Answer 5

之前我曾使用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/>标记从单独的文件中使用SVG。这是伴随它的code。另请注意，它使用jQuery插件svginject。

以下是其他一些options来保持SVG不受HTML及其优点的影响。

希望这有帮助。

Answer 6

您似乎想要保留xml来自svg文件的内容html 码。

为了实现这一目标，我们可以使用两种方案将svg个文件嵌入html：

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

使用svg的另一种方法是使用内联技术，例如，使用<svg>标记，这样您也可以使用内联样式表，但是您想要将xml与html此处：）

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

Answer 7

您还可以对evil-icons项目进行一些挖掘。你会发现一些使用svg的简洁方法。

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

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

转到SVG图标 - 如何将它们与代码分开？

7 个答案: