我刚刚进行了测试，唯一的区别似乎是在移动浏览器上。

我为 Twitter 图标创建了一个 990 x 900 像素的图像（该图标看起来太详细了，无法进行良好的缩放，因此非常适合此测试）。我将它保存为 SVG、JPG、GIF、透明 GIF（只是鸟的形状，没有背景颜色，而是用 CSS 添加）、PNG、透明 PNG。

然后我将它们缩小到 15px、25px、50px、100px 和 150px。

这是 Firefox 中的结果：

这是 Chrome 中的结果：

如果我们放大最小结果的屏幕截图，以便我们可以看到正在生成哪些像素，那么 Firefox（顶部）会使非透明版本的边缘略微变暗，但所有其他结果都非常相似。

但是，在 iPod Touch Safari 浏览器上，SVG 版本看起来很模糊，而其他版本则相当像素化：

在 Android Chrome 上也可以看到类似的结果。我没有截取这个截图。

我想知道这是否与像素密度有关，这是显示的主要区别，尽管如果所有图像在移动设备上的处理方式不同，而不仅仅是 SVG 图像，这对我来说更有意义。

如果有人可以解释为什么会这样，那么我将转移接受的答案打勾。否则，我猜 TL;DR 的答案是，这取决于您是否更喜欢模糊或像素化图标（或者为响应断点制作大量像素完美尺寸的图标）。

编辑：从那以后，我观察到 svg 在苹果设备上通常更清晰 - twitter 鸟可能过于详细，无法在我上面的测试中显示，所以觉得它们是用于图标的正确格式。

（注意：请在此之前阅读OP 自己的答案，因为我的回答是对 OP 调查的评论）

这是 Android Chrome 的一个已知问题。在他们的一些构建中，他们禁用了抗锯齿，导致矢量形状呈现出清晰的边缘。这样做的原因是为了减少抗锯齿计算产生的过载。由于抱怨，他们发布了一个应该启用反锯齿的更新。

Stack Overflow 中有几个线程讨论这个问题。这是其中之一：
https ://stackoverflow.com/questions/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas

我在 iPod Touch Safari 上找不到对相同问题的引用，但可以安全地推断并假设问题是相同的。

有一些方法可以尝试强制抗锯齿，即使它被禁用，例如这个技巧，它基本上在元素周围添加一些填充，导致浏览器出于某种原因应用抗锯齿。您还可以尝试将元素的shape-rendering属性设置为不同于清晰边缘的属性，并查看浏览器是否支持它。

矢量图像和位图图像之间有一个非常重要的区别。如果我们稍微简化一下，矢量图像由客户端渲染，而位图图像由您渲染。

这意味着您将图像发送到的应用程序对其行为方式有更多发言权。最终结果是您有以下缺点：

• 需要更多资源才能使图像看起来像
  • 在这种情况下，渲染可能会选择降低质量，因为它没有足够的资源来做得更好。
• 每个成像系统都有自己的一套怪癖和缺陷
  • 更难保持一致
  • 你会遇到程序员的问题

另一方面，这样做有一些好处：

• 图像可以自由缩放并具有更多的操作选项。
  • 这只是在客户端完成工作的结果，因此如果您发送知道如何缩放的元素，他们可以花更多时间计算像素以获得更大的画面。
• 在许多情况下，数据小于像素图像（尽管并非必须如此）

如果系统的渲染器有问题，那么您无能为力。您给最终应用程序一个选择，他们可以使用该选择做出错误的决定。

哪个更好

这取决于您渲染图像的能力以及您可以使用的带宽。当然有可能比浏览器做得更好。一个人能比 Illustrator 做得更好也就不足为奇了。但是你会失去延迟渲染的所有好处。

还有第三种选择。

如果您对结果不满意，您可以随时尝试制作自己的渲染引擎。使用支持 webgl 的平台，您可以。但这是非常核心的，不会为您节省表单实现细节。

（还没有足够的分数直接评论理查德 B 的答案。）

为了回答您的问题，Richard B，我们经常在低功率硬件上需要抗锯齿的元素上看到这种效果。这甚至发生在圆角 DOM 元素上，当抗锯齿从这些环境中减少或删除时。

在我们公司，我们有一些使用低功耗硬件的案例，并开始遇到这种“边缘非常锯齿状”的问题。我们禁用/减少了抗锯齿的数量以提高性能。这可能与您在移动设备上的测试返回的结果相同的原因。