哪个加载速度更快？svg 作为图像或 svg 代码

Question

我有一个很长的网页，显示了大量的版式设计。简单地将它们加载到图像中还是使用 svg 代码会更快吗？

除了速度问题之外，我会在代码中选择 svg，因为我可以使用 css 过渡和动画来为设计增添趣味。

在两者之间进行选择时我还需要考虑哪些因素？

Answer 1

如果你的设计不复杂，最好使用SVG元素来显示排版设计。

1. SVG 元素的质量不取决于屏幕的分辨率。它在任何设备上看起来都非常清晰，而在图像中，它的清晰度取决于其大小。
2. 由于简单的 SVG 文件是由其包含的颜色、图层、渐变、效果和蒙版定义的，因此与由其组成的像素数定义的图像大小相比，SVG 代码的大小很小。
3. SVG 代码加载速度更快，因为不需要 HTTP 请求来加载图像文件。SVG 代码所花费的时间只是渲染时间。
4. 正如您所说，SVG 代码有很多编辑和动画的机会。
5. 假设您在整个网站中使用相同的设计，但颜色和尺寸不同，则可以使用单个 SVG 代码并相应地更改其参数。您不必像图像那样创建它的多个副本。

然而，如果你的设计有复杂的细节，那么很难用SVG代码来显示设计，这时候，除了图像之外别无选择。