我知道将任何图像格式转换为 SVG 都不是一件容易的事,而且这不是我追求的复杂图像。让我解释一下为什么我会问这个问题。作为一名网页设计师,我通常会在网站中使用图像来处理某些元素。包括简单的几何形状、百合花、一些简单的标志等。这些 HTTP 请求的成本相对较小(我们这里说的是 KB)。
但是,如果通过使用 svg 或其他 Canvas 元素而不是简单图像的图像格式,这些请求是否可以更小,我很感兴趣。是否有任何研究或测试来比较 SVG 与图像?是否可以通过对页面上的简单元素使用 Canvas 来使 HTTP 请求更小?如果是这样,那将是个好消息。我什至可以开始创建 Canvas 图像库以重复使用并与他人共享。
最佳答案
对于简单的形状,gzipped SVG 会非常小,在现代浏览器中它是 quite usable .
然而,对于页面加载性能来说,请求数量是一个非常重要的因素,所以如果你使用 CSS sprite sheets,你将获得显着的性能提升。无论图像格式如何。
如果 Canvas 是指将形状存储为 JavaScript 绘图命令(或基于某些 JSON 发布它们的库),那么与压缩 SVG 相比,它不太可能节省大量带宽(SVG 具有非常有效的格式来定义路径,并且 gzip很好地消除了 XML 的开销)。
您将不得不等待 JS 加载,或者在整个文档中插入多个 Canvas ,或者在压缩生成的图像和构建 data:
URL 时消耗 CPU,所以我认为它不会总体上比使用 SVG 或 optimized PNG 更快.
关于javascript - 使用 Canvas 会导致比使用图像更小的 HTTP 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15303230/