为什么这个SVG图像缩小时会模糊？

我正在使用Bootstrap 3框架制作响应式网页。我有一张我想用作页面徽标的图像。为什么这个SVG图像缩小时会模糊？

我开始将全尺寸（788 x 1098）图像保存为PNG图像。我的自定义CSS可以确保图像的最大宽度为280px，当然，Bootstrap的CSS会为设备适当缩小图像。当我在我的台式电脑上查看我的自适应网页时，即使缩小到197 x 280，也看起来不错。但是，当我在移动设备上查看时，图像看起来模糊不清。

那么我听说了SVG图像，并认为我会放弃它。我下载了Inkscape for Mac，在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" />

来源

2015-06-29 theclarkofben

你的“SVG”只是包含单个光栅（PNG）图像的SVG，所以没有任何真正可扩展的;见<image …view-source:http://www.clarkben.com/img/cv.svg。

您可以控制这种光栅的渲染有点用CSS（使用image-rendering或迫使GPU来处理通过某些transform，但结果woudn't是完美的。无论如何，即使这本为矢量图像，渲染A4到cca 300屏幕像素宽的盒子在我看来也不会“可读”

来源

2015-06-29 15:05:03 myf

谢谢。问题; “cca”是什么意思？此外，我尝试查看页面源，但没有<图像...在任何地方？ – theclarkofben

@theclarkofben将其粘贴到浏览器地址栏中：'view-source：http：// www.clarkben.com/img/cv.svg'然后查找'

ad“cca”：https：//en.wikipedia.org/wiki/Circa – myf

它看起来像图像仍然只是一个PNG图像;它只是伪装成一个SVG，因为你给它的扩展名而没有真正将其转换为SVG。您只需在inkscape中打开并将图像保存为SVG，就无法将PNG转换为SVG - 您需要从头开始重新创建图像作为SVG，或者查看如何将光栅图像转换为SVG图像。

来源

2015-06-29 15:01:22 vijrox

更准确地说它是一个包裹在SVG文件中的PNG图像 –

我不是平面设计师，所以如果有任何术语我出错了，随意编辑 – vijrox

你确定吗？我遵循一个关于如何使用Inkscape将光栅转换为矢量的指南，并且在我保存之前花了大约2分钟来处理转换。一个转换产品：https://en.wikipedia.org/wiki/Comparison_of_raster-to-vector_conversion_software – theclarkofben

为什么这个SVG图像缩小时会模糊？

回答

相关问题