为什么这个 SVG 图像在按比例缩小时会模糊？答案

【问题标题】：Why is this SVG image blurry when scaled down?为什么这个 SVG 图像在按比例缩小时会模糊？
【发布时间】：2015-09-16 02:33:33
【问题描述】：

我正在使用 Bootstrap 3 框架制作响应式网页。我有一张图片想用作页面上的徽标。

我开始将全尺寸 (788 x 1098) 图像保存为 PNG。我的自定义 CSS 确保图像的最大宽度为 280 像素，当然 Bootstrap 的 CSS 会根据设备适当缩小图像。当我在台式电脑上查看响应式网页时，它看起来还不错，即使它已缩小到 197 x 280。但是当我在手机上查看时，图像看起来很模糊，一点也不好看。

然后我听说了 SVG 图像，并想尝试一下。我下载了 Mac 版 Inkscape，在 Inkscape 中打开了全尺寸 PNG 并重新保存为 SVG 图像。出乎意料的是，当我在手机上查看我的网页时，SVG 图像看起来不错，但在我的台式电脑上查看时却显得模糊而糟糕。

这是为什么？我认为 SVG 图像的全部意义在于它们可以缩放而不会丢失或模糊？

我制作了一个 CodePen 来帮助演示：http://codepen.io/theclarkofben/pen/WvdKgM

<p>SVG 20%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" style="height: 20%; width: 20%;"/>
<p>SVG 100%</p>
<img src="http://www.clarkben.com/img/cv.svg" alt="a" />

【问题讨论】：

标签： css twitter-bootstrap svg

【解决方案1】：

您的“SVG”只是包含单个光栅 (PNG) 图像的 SVG，因此没有真正可扩展的；参见view-source:http://www.clarkben.com/img/cv.svg 中的<image …。

您可以使用 CSS 稍微控制此类光栅的渲染（使用 image-rendering 或强制 GPU 通过一些 transform 处理它，但结果也不会完美。无论如何，即使是这样矢量图像，在我看来，将 A4 渲染成 cca 300 屏幕像素宽的框也不会“可读”。

【讨论】：

谢谢。问题; “cca”是什么意思？另外，我尝试查看页面源，但没有
@theclarkofben 将其粘贴到浏览器地址栏中：view-source:http://www.clarkben.com/img/cv.svg 然后查找<image ... xlink:href="data:image/png;... 那是嵌入在 SVG 文件中的原始 PNG 光栅
我不会在这种情况下使用 circa。
你很可能是对的（我的英语很糟糕），在我的语言环境中，这个词通常表示不确定性，并且不限于日期（就像我刚刚发现的英语一样），所以是的，这可能是不幸的“滥用”。在这种情况下，我的不确定性指的是示例中的相对“20%”SVG 宽度，当人们无法准确预测结果宽度时，因为它将取决于实际的客户端视口（“显示”）或偏移父尺寸。

【解决方案2】：

看起来图像仍然只是一个 PNG 图像；它只是伪装成 SVG，因为您给了它扩展名，而没有实际将其转换为 SVG。您不能通过在inkscape中打开它并将图像保存为SVG来真正将PNG转换为SVG - 您需要从头开始将图像重新创建为SVG或查看如何将光栅图像转换为svg图像.

【讨论】：

更准确地说，它是包装在 SVG 文件中的 PNG 图像。
我不是平面设计师，所以如果有任何术语我错了，请随时编辑
你确定吗？我遵循了有关如何使用 Inkscape 将光栅转换为矢量的指南，在我保存之前大约需要 2 分钟来处理转换。在此处查看它被列为转换产品的位置：en.wikipedia.org/wiki/…
我确定，请参阅@myf 的答案以获取有关如何查看它的更多详细信息。
放大图像会产生模糊的像素化图像；如果此图像被正确矢量化，则不是那种平滑的边缘。