Chrome浏览器中，特定缩放级别下的.svg图像模糊

Question

我决定将我的网站徽标设置为 SVG 格式，但在 Chrome 浏览器中显示效果不佳。在100%的缩放级别下它看起来模糊，但如果我缩小几次，则效果良好。这是我使用它的网站: www.confide.re/confide 有没有人知道可能是什么原因导致这种情况，以及如何解决？谢谢！

我使用 Illustrator CS5 制作了这个 SVG ，如果有影响的话。

- Taimur

---

你尝试放大视图看看正在发生什么了吗？ - John Dvorak

你们的商标非常清晰，在100%的大小下看起来效果很好。如果不想失去抗锯齿或者用位图图像来绘制，就无法做得更好了。 - John Dvorak

Answer 1

原因是你使用百分比来设置标志所在元素（父元素）的宽度。

这意味着标志首先从矢量图像栅格化为内部位图，其大小为您设置的图像大小的100％。然后在您的#header css规则中，您正在使用80％来设置包含图像的标题元素。

发生的情况是浏览器用于保存栅格化矢量图像的内部位图将从100％缩放到80％，而不是重新栅格化矢量图像。由于这涉及插值，这将导致一些模糊的边缘。这是浏览器为父内容做出的性能选择。

解决方案是删除标题（父）元素的80％缩放。您可以添加一个新规则并像这样设置图像宽度（当然也可以使用百分比-只要父元素没有缩放，这不会成为问题）-例如：

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

然后在你的HTML代码中：

<img class="header-img" src="logo.svg" alt="" />

（你本可以设置#header img {...}，但这会影响性能。）

这是概念验证（只有100到80％的小差异，但是可以看到——比较最后一部分）：

使用100％光栅化位图作为浏览器缩放到80％的标志大小：

从头部（父元素）中删除80％，为了举例，将图像宽度设置为200px：

- user1693593

---

谢谢，不过我想让它根据屏幕尺寸进行缩放（用于移动设备）- 有没有办法可以同时使用像素和百分比？ - Taimur

我更新了我的答案，并提供了一个解决方案。当然，您可以根据需要调整宽度 - 我只是提供了一个初始值以供参考。 - user1693593

@PassKit FireBug 是你的好帮手 ;) - user1693593

Answer 2

在使用Panzoom的页面上放置以下代码：

<style>
        .panzoom {
            -webkit-backface-visibility: initial !important;
            -webkit-transform-origin: 50% 50%;
        }
</style>  

- Thiago Araújo

---

这解决了我们类似的问题。谢谢！现在能够理解修复的原因会很好 :) 你知道吗？ - Instine

Answer 3

我不认为你的SVG存在问题，因为它是100%矢量图（没有嵌入PNG文件）。

最有可能的原因是你的图片相对较小，在72 dpi（常规屏幕像素密度）下呈现的方式。你字体的不规则边缘被像素化，这导致图像看起来稍微模糊。

在高分辨率的MacBook Pro和iPhone Retina上，你的标志看起来很好，很清晰。

它也可以进行放大。

- PassKit