.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: