Question

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

我开始将全尺寸（788 x 1098）图像保存为PNG。我的自定义CSS确保图像的最大宽度为280px，当然Bootstrap的CSS会适当缩小设备的图像。当我在桌面PC上查看自己的响应式网页时，即使它已经缩小到197 x 280，它看起来还不错。但是当我在手机上查看时，图像看起来很模糊，并且一点都不好。

然后我听说了SVG图像，并认为我会试一试。我下载了Inkscape for Mac，在Inkscape中打开了全尺寸PNG并重新保存为SVG图像。出乎意料的是，当我在手机上查看我的网页时，SVG图像看起来不错，但在我的桌面PC上查看时看起来模糊不清。

这是为什么？我认为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" />

Answer 1

您的＆＃34; SVG＆＃34;只是SVG包含单个光栅（PNG）图像，所以没有什么可以实现可扩展;请参阅indexVector = [emp + upperBound(t, pull) for emp, pull in zip(empAvg, pullCount)]中的<image …。

您可以使用CSS控制这种光栅的渲染（使用view-source:http://www.clarkben.com/img/cv.svg或强制GPU通过某些image-rendering来处理，但结果也不是完美的。无论如何，甚至这个是矢量图像，将A4渲染成cca 300个屏幕像素的宽边框，在我的意见中也不会是可读的。

Answer 2

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

缩小时，为什么此SVG图像模糊？

2 个答案: