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

Question

我已经决定将我的站点 Logo 设为 svg，但它似乎在 chrome 中呈现效果不佳。在 100% 缩放级别，它看起来很模糊，但如果我缩小几次，它看起来还不错。这是我正在使用它的网站:

www.confide.re/confide

有谁知道可能导致此问题的原因以及如何解决？谢谢

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

Answer 1

原因是您使用百分比设置 Logo 所在元素(父元素)的宽度

这意味着 Logo 首先从矢量光栅化为内部位图，该位图是您为图像设置的大小的 100%。然后在您的 #header css 规则中，您将 80% 用于图像所在的标题元素。

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

解决方案是删除 header (父)元素的 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% 的 Logo 大小:

从标题(父)元素中删除 80%，并且为了示例将图像宽度设置为 200px: