.svg图片在Chrome中的特定缩放级别模糊 [英] .svg image blurry at specific zoom levels in Chrome

问题描述

我决定将我的网站标志视为svg，但它似乎并没有在chrome中渲染得很好。在100％缩放级别，它看起来模糊，但如果我缩小几次，那么它看起来很好。这是我使用它的网站：

I've decided to have my site logo as an svg, but it doesn't seem to be rendering nicely in chrome. At the 100% zoom level it looks blurry but if I zoom out a few times then it looks alright. Here is the site I'm using it on:

www.confide.re/ confide

有人知道什么可能导致此问题以及如何解决？感谢

Does anyone know what might be causing this and how to fix it? Thanks

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

I made the svg in Illustrator CS5, if that matters.

推荐答案

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

The reason is that you use percentage to set the width of element the logo is in (parent element)

这意味着徽标首先从向量光栅化内部位图，它是为图像设置的大小的100％。然后在你的#header css规则中，你使用的图像在头部元素的80％。

This means the logo is first rasterized from vector to an internal bitmap that is 100% of the size you set for the image. Then in your #header css rule you are using 80% for the header element which the image is inside.

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

What happens is that the internal bitmap the browser use to hold the rasterized vector image is scaled from 100% to 80% instead of re-rasterizing the vector. As this involves interpolation it will result in some blurry edges. This is a performance choice made by the browsers for parent's content.

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

The solution is to remove the 80% scaling of the header (parent) element. You can add a new rule and set the image width like this (you can of course use percentage instead - as long as the parent element isn't scaled this won't be an issue) - f.ex:

#header {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    /*width: 80%;*/
}

.header-img {
    width:200px;
    height:auto;
    }

然后在您的HTML代码中：

Then in your html-code:

<img class="header-img" src="logo.svg" alt="" />

（您可以设置 #header img {...}

(you could have set #header img {...} but this has a performance penalty).

这里是概念验证（一个小的差异100到80％，但可见 - 比较最后一个部分）：

Here is proof-of-concept (a small difference 100 to 80%, but visible - compare the last part):

使用100％栅格化位图来将浏览器缩放到80％的徽标大小：

Using 100% rasterized bitmap for logo size scaled by browser to 80%:

从标题中删除80％ ）元素，为了示例将图片宽度设置为200像素：

Removing 80% from header (parent) element and for sake of example setting image width to 200px:

这篇关于.svg图片在Chrome中的特定缩放级别模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！