我决定将我的网站徽标设置为 SVG 格式,但在 Chrome 浏览器中显示效果不佳。在100%的缩放级别下它看起来模糊,但如果我缩小几次,则效果良好。这是我使用它的网站:
www.confide.re/confide
有没有人知道可能是什么原因导致这种情况,以及如何解决?谢谢!
我使用 Illustrator CS5 制作了这个 SVG ,如果有影响的话。
我使用 Illustrator CS5 制作了这个 SVG ,如果有影响的话。
#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:
<style>
.panzoom {
-webkit-backface-visibility: initial !important;
-webkit-transform-origin: 50% 50%;
}
</style>
我不认为你的SVG存在问题,因为它是100%矢量图(没有嵌入PNG文件)。
最有可能的原因是你的图片相对较小,在72 dpi(常规屏幕像素密度)下呈现的方式。你字体的不规则边缘被像素化,这导致图像看起来稍微模糊。
在高分辨率的MacBook Pro和iPhone Retina上,你的标志看起来很好,很清晰。
它也可以进行放大。