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

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;
}

工作实例？你走了:小提琴

浏览器支持？不是100%肯定,但在所有大型浏览器中都支持svg:CanIUseIt

Answer 2

如需深入讨论，请查看Sara Soueidan，他在 SVG 方面做了很多工作。她最近发表的一篇文章/演讲可能也有很多信息供您消化。

克里斯·科耶也有一些非常有用的事情要说。