Javascript 内联SVG与CSS背景精灵

我正在我的应用程序中创建几个页面（目前在我的前端运行Angular），每个页面都包含大量的徽标。我目前正在为每个SVG徽标创建指令（将内联SVG代码放在模板中），这使代码更具可读性，但由于徽标的数量，我开始怀疑是否创建CSS精灵更有意义

---

我希望能从性能角度对此提出一些想法。我知道CSS背景图像会被缓存，所以这是一个加号。SVG为我提供了更大的灵活性，如果我想（比如）改变某些特定徽标的颜色或大小，但是如果它在加载时间方面花费了我相当大的成本，我宁愿选择背景图像

TL；DR:从编码的角度来看，我会说保持简单，从UX/UI的角度来看，这取决于您的用例

我会选择背景图像，除非与徽标的交互是用户旅程的关键元素

例如，如果它显示了客户的数量、他们的高姿态或您的状态，那么图像就可以了。你不会经常更改它，也没有必要设置这样的情况，这样你就可以过多地操纵徽标

如果您有一个使用徽标的完整交互，用户将徽标悬停在屏幕上，更改颜色，然后单击展开并显示更多信息，那么SVG路线是有意义的，可能值得付出努力

---

---

以用户为中心-您的及时成本是否足以获得用户利益？

我正在为我工作的公司做类似的事情。他们有数百个图像，可以轻松压缩成一个SVG精灵。我想答案取决于项目，它会变大吗？如果是的话，我认为现在花点时间来实现sprite表单将是一个好主意，您也可以将其用于图标。这是一篇关于CSS技巧的好文章

如果你开始这样做，我建议使用Grunt并实现它，它为你节省了大量创建sprite表的时间，而且实现起来非常简单，类似这样的东西

grunt.initConfig({
  svgstore: {
    options: {
      option like prefix ID with 'icon', indentation, etc.
      }
    },
    default : {
      files: {
        'dest/dest.svg': ['svgs/*.svg'], //destination, files to convert
      },
    },
  },
});