.svg图像在Chrome中的特定缩放级别模糊

Question

我决定将我的网站徽标作为svg，但它似乎没有在chrome中很好地呈现。在100％缩放级别，它看起来很模糊，但如果我缩小几次，那么它看起来不错。这是我正在使用它的网站：

www.confide.re/confide

有谁知道可能导致这种情况的原因以及如何解决这个问题？感谢

如果重要的话，我在Illustrator CS5中制作了svg。

Answer 1

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

这意味着徽标首先从矢量栅格化到内部位图，该位图是您为图像设置的尺寸的100％。然后在#header css规则中，您使用80％作为图像所在的标题元素。

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

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

#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：

Answer 2

我不相信您的SVG存在问题，因为它是100％矢量（没有嵌入的PNG fies）。

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

在高分辨率的MacBook Pro和iPhone视网膜上，您的徽标看起来很精致。

它也放大了。

Answer 3

将此代码放在使用Panzoom的页面上：

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