使用 SVG 图标时的设计和内容分离

【问题标题】：Separation of design and content when using SVG icons使用 SVG 图标时的设计和内容分离
【发布时间】：2016-05-30 12:52:19
【问题描述】：

但作者没有提到是否可以将图标部分与内容分开，就像使用网络字体一样。 SVG 是否总是需要出现在 HTML 代码中？是否可以将它们包含在 CSS 样式中？

【问题讨论】：

【解决方案1】：

如果您像调用普通图像一样调用 svg，则可以在 css 中使用它，例如

.myDiv{background: url(path/to/mySvg.svg) center center;}

此方法的缺点是您无法像将 svg 代码直接嵌入 html 时那样调整 SVG 的填充/描边颜色（即不从 img 元素的 src 调用）

【讨论】：