12

我决定将我的网站徽标设为 svg，但它似乎在 chrome 中渲染得并不好。在 100% 缩放级别，它看起来很模糊，但如果我缩小几次，它看起来还不错。这是我正在使用它的网站：

www.confide.re/confide

有谁知道这可能是什么原因以及如何解决它？谢谢

如果这很重要，我在 Illustrator CS5 中制作了 svg。

4

3 回答 3

11

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

这意味着徽标首先从矢量光栅化为内部位图，该位图是您为图像设置的大小的 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：

在此处输入图像描述

于 2013-01-05T12:07:13.397 回答
1

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

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

在高分辨率 MacBook Pro 和 iPhone Retina 上，您的徽标看起来精致而清晰。

它也可以放大。

在此处输入图像描述

于 2013-01-05T12:00:44.610 回答
1

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

<style>
        .panzoom {
            -webkit-backface-visibility: initial !important;
            -webkit-transform-origin: 50% 50%;
        }
</style>
于 2016-01-20T14:22:26.417 回答