javascript - 内联 SVG 与 CSS 背景 Sprite

Question

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

我希望能从性能 Angular 对此提出一些想法。我知道 CSS 背景图像会被缓存，所以这是一个优点。 SVG 为我提供了更大的灵 active ，例如，如果我想对某些特定 Logo 进行不同的颜色或大小调整，但如果它在加载时间方面花费了我相当多的费用，我宁愿选择背景图像。

Answer 1

我正在为我工​​作的公司做这样的事情。他们有数百张图像，可以轻松压缩成一个 SVG Sprite 。我想答案取决于元素，它会变大吗？如果是的话，我认为现在花时间实现 Sprite 表是个好主意，你也可以将它用于图标。 here是一篇关于 CSS 技巧的好文章。

如果您开始这样做，我建议您使用 Grunt 并实现 grunt-svgstore它为您节省了大量创建 sprite 表的时间，而且实现起来非常简单，就像这样。

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