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

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

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

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

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

使用svg模板

让我们创建一个svg模板.

模板(html)

它是一个模板,所以我们隐藏它.(但仍然在DOM中)

.hide { display: none;} //css

使用(html)

这可以在页面的任何位置重复使用.

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

简单,风格一流!

CSS

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

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

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