SVG图像看起来比高分辨率的png，jpg或gif更好地按比例缩小吗？
Answers:
（注意：请先阅读OP的答案，因为我的答案是对OP调查的评论）
这是Android Chrome的已知问题。在某些版本中，他们禁用了抗锯齿功能，从而使矢量形状的边缘变得清晰。这样做的原因是为了减少由抗锯齿计算造成的过载。由于抱怨，他们发布了应启用反混叠的更新。
Stack Overflow中有多个线程讨论此问题。这是其中之一：https :
//stackoverflow.com/questions/19875908/vectors-poorly-displayed-on-chrome-for-android-canvas
我在IPod Touch Safari上找不到相同问题的参考，但是推断并假设问题相同可能是安全的。
有一些方法即使在禁用时也可以尝试强制使用抗锯齿，例如，该技巧基本上会在元素周围添加一些填充，从而由于某种原因导致浏览器应用抗锯齿。您还可以尝试将元素的shape-rendering属性设置为不同于整边的元素，并查看浏览器是否认可它。
我刚刚进行了测试，唯一的区别似乎是在移动浏览器上。
我创建了一个990 x 900px的Twitter图标图像（该图标似乎过于详细，无法实现良好的缩放比例，因此对本次测试非常有用）。我将其另存为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鸟可能太详细了，因此无法在上面的测试中显示出来，因此感到它们是用于图标的正确格式。
矢量图像和位图图像之间有非常重要的区别。如果我们简化一点，矢量图像是由客户端渲染的，而位图图像是由您渲染的。
这意味着您发送图像的应用程序对它的行为有更多的发言权。最终结果是您有以下缺点：
- 需要更多的资源来使图像呈现
- 在这种情况下，渲染器可能会选择降低质量，因为它没有足够的资源来更好地改善质量。
- 每个成像系统都有自己的一套怪癖和缺陷
- 使保持一致变得更加困难
- 您遇到了程序员的问题
另一方面，这样做有一些好处：
- 图像可以自由缩放并具有更多操作选项。
- 这仅仅是客户端完成工作的结果，因此，如果您发送知道如何缩放的元素，则他们可以花更多时间在像素计算上获得更大的图像。
- 在许多情况下，数据都小于像素图像（尽管不一定如此）
如果系统有错误的渲染器，您将无能为力。您的最终应用程序有一个选择，他们可以使用该选择做出错误的决定。
哪个更好
这取决于您可以渲染图像的程度以及可以使用的带宽量。当然，可以实现比浏览器更好的渲染效果。毫不奇怪，一个人还能比Illustrator做得更好。但随后，您将失去延迟渲染的所有好处。
还有第三种选择。
如果您对结果不满意，可以随时尝试制作自己的渲染引擎。使用支持webgl的平台，您可以。请参阅此处的示例。但这是很硬核的，不会节省您表单实现的详细信息。
（尚不足以直接评论Richard B的答案。）
为了回答您的问题，Richard B，我们经常看到这种影响在需要低功耗硬件上进行抗锯齿的元件上。当减少或从那些环境中删除了抗锯齿时，甚至在圆角DOM元素上也会发生这种情况。
在我们的公司中，有些情况下我们使用功率较低的硬件，并开始遇到此“锯齿状边缘”的问题。我们禁用/减少了抗锯齿的数量，以提高性能。这可能与您在移动设备上的测试返回测试结果的原因相同。