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

【问题标题】：.svg image blurry at specific zoom levels in ChromeChrome 中特定缩放级别的 .svg 图像模糊
【发布时间】：2012-12-19 17:42:10
【问题描述】：

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

www.confide.re/confide

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

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

【问题讨论】：

你试过放大in看看发生了什么吗？
您的徽标非常清晰，并且 100% 看起来不错。如果不丢失抗锯齿或绘制位图图像，您将无法变得更好。

标签： html css xml google-chrome svg

【解决方案1】：

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

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

从标题（父）元素中删除 80% 并且为了示例将图像宽度设置为 200px：

【讨论】：

谢谢，我希望它根据屏幕尺寸进行缩放（对于移动设备）——有什么方法可以使用 px 和 % 吗？
我也用解决方案更新了我的答案。当然，随意调整宽度 - 我只是输入一个初始值开始。
@PassKit FireBug 是你的朋友 ;)

【解决方案2】：

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

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

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

它也可以放大。

【讨论】：

【解决方案3】：

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

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

【讨论】：

这解决了我们的类似问题。谢谢！现在很高兴了解修复的原因 :) 你碰巧知道吗？