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

Question

我有一个冗长的网页，其中显示了许多排版设计。简单地将它们加载到图像中或使用 svg 代码会更快吗？

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

在两者之间进行选择时我还需要考虑哪些其他事项？

Answer 1

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

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

然而，如果您的设计具有复杂的细节，则很难以 SVG 代码显示设计。此时，别无选择，只能使用图像。