Html 在维护css控件的同时重用SVG图像

我有一些剪影类型的图像，它们需要能够改变颜色，有时只是显示在不同的位置，有时是悬停效果

使用直接嵌入到HTML中的SVG很容易做到这一点。复制粘贴和CSS到你的心的愿望

但我必须复制粘贴或按程序插入我想要的任何地方。其中一些被使用了几十次。重复传输相同的SVG标记似乎是一种糟糕的做法

---

是否有一个两全其美的解决方案，在这个解决方案中，我可以对路径进行CSS转换，并以某种方式在前端重用SVG

svg中有一个标签，可以让您重用“符号”。我想这是你能得到的最接近的了

通过将路径等包装到符号元素中来创建符号。给它一个id（以便以后可以重复使用）：

例子和代码无耻地从他们的网站上摘取，阅读他们的内容，点击他们的广告！如果曾经有一个网站值得在你的广告拦截器例外，这是它

正文{
填料：2米；
}
svg{
宽度：100px；
高度：125px；
边框：1px实心#ddd；
}
使用C.ic-1{
填充：天蓝色；
}
使用C.ic-2{
填充：#FDC646；
}
使用C.ic-3{
填充：#FF2D49；
}
svg路径{
填充：继承；
}

---

svg中有一个标记，可以让您重用“符号”。我想这是你能得到的最接近的了@这正是我需要的。请发帖回答。

<svg style="display: none;">
  <symbol id="ic">
      <paths and polygons and other fun stuff>
  </symbol>
</svg>

<svg viewBox="0 0 100 125" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="#ic" class="ic-blue"  x="0" y="0" />
</svg>