我知道将任何图像格式转换为 SVG 都不是一件容易的事，对于复杂的图像也不是我所追求的。让我解释一下我为什么要问这个问题。作为一名网页设计师，我通常会使用图像来处理网站中的某些元素。其中包括简单的几何形状、鸢尾花、一些简单的徽标等。这些 HTTP 请求的成本相对较小（我们在这里讨论的是 KB）。
但是，如果使用 svg 或其他画布元素而不是简单图像的图像格式，这些请求是否会更小，我很感兴趣。是否有任何研究或测试来比较 SVG 与图像？是否可以通过将画布用于页面上的简单元素来使 HTTP 请求更小？如果是这样，那将是个好消息。我什至可以开始创建画布图像库以重复使用并与他人共享。
我认为这将取决于具体情况。
精灵可以提供帮助.. 但是如果您的精灵包含一些简单的线条但必须是 500px * 500px... 那么画布（甚至是 svg）确实会小很多。最重要的是，通常会缓存外部 javascript（甚至比图像更好）。在这方面，它们确实有助于减轻体重。
但是，如果您希望 IE 也能“工作”，那么您可能需要开始提供一些 html5/canvas 垫片，是的，这会增加权重。
编辑：
看看这个jsfiddle 示例（我为这个问题准备了），其中使用径向渐变创建了全尺寸的“花岗岩”背景。正如您所看到的（在源代码中），这比单独的图像少了很多字节（并且总是像素完美）。
另一方面，它也（取决于复杂性）需要一些常规图像不会花费的计算时间（在将必要的字节下载到客户端之后）。
Edit2：
我找到了一个链接，他们在其中进行了一些测试。
在我们的 sprite 示例中，原始 SVG 文件为 2445 字节。PNG 版本只有 1064 字节，双像素比率设备的双倍 PNG 为 1932 字节。在第一次出现时，矢量文件在所有帐户上都会丢失，但对于较大的图像，光栅版本的大小会更快地升级。
由于是 XML 格式，SVG 文件也是人类可读的。它们通常包含非常有限的字符范围，这意味着它们在通过 HTTP 发送时可能会被大量 Gzip 压缩。这意味着实际下载大小比原始文件小很多倍——很容易超过 30%，可能更多。PNG 和 JPG 等光栅图像格式已经被压缩到最大程度。
然而，请注意这一切仍然取决于图像的复杂程度：作为一个极端的反例......尝试描述一张福雷斯特（树叶......）的全彩照片而不是简单的 jpg......
对于简单的形状，压缩后的 SVG 会非常小，并且在现代浏览器中非常有用。
但是，对于页面加载性能而言，请求数量是一个非常重要的因素，因此如果您使用CSS 精灵表而不考虑图像格式，您将获得显着的性能提升。
如果通过画布您的意思是将形状存储为 JavaScript 绘图命令（或基于某些 JSON 发出它们的库），那么与 gzip 压缩的 SVG 相比，它不太可能节省大量带宽（SVG 具有非常有效的路径定义格式，并且 gzip 消除了XML 很好）。
您将不得不等待 JS 加载并在整个文档中插入多个画布，或者在压缩生成的图像和构建data:URL 时消耗 CPU，所以我认为总体上它不会比使用 SVG 或优化的 PNG更快。
尺寸总是取决于具体的图像，对不起，但你必须自己测试。一般没有办法比较这个。