哪个具有更快的绘制SVG或请求精灵图像的加载时间？

Question

对于特定示例，以不同的颜色绘制在网站的不同部分中使用的基本形状和图标。 我应该使用svg还是sprite？

但是，请问是否有标准答案。

Answer 1

与使用精灵相比，使用SVG具有很大的优势，尤其是在正确实现的情况下。 SVG在所有浏览器之间都具有良好的兼容性。

• SVG是可以无限放大的矢量形状，而您必须具有多个用于不同密度显示的精灵-作为旁注，只有一个高分辨率的精灵，然后使用背景尺寸将其缩小并不能很好地缩放在所有浏览器中都保留了工件。

• 可以内嵌使用SVG精灵，从而减少HTTP调用-例如，根据您所使用的语言/框架，可以使用插件/插件将SVG内联化（例如在ember中）。

• 您尚未指定要谈论的形状类型，但是如果我们谈论的是单色形状，则可以使用icomoon之类的工具将所有SVG文件导入到一个Icon字体文件中。 因此，您需要一个HTTP调用来获取字体，就像使用sprite一样。 另外，可以使用CSS color属性更改图标的颜色。 因此，仅使用一个图标，您就可以使用CSS而不是Sprite进行具有不同颜色的多次迭代，而在Sprite中，您必须设计不同的迭代，然后将其实现为Sprite。

在性能方面，我认为这些天并不重要，除非我们要谈论的是与图像精灵相比的数百个SVG。 即使速度较慢，它也只会在“纸上”，并且用户无法识别差异。