当前位置:首页-正文

谷歌浏览器将在v80正式版里支持网站使用SVG矢量图形来保证图标清晰度

多数网站都会在源代码头部声明某个图像作为网站图标,这个图标也会在浏览器加载时显示在标题前方进行区分。

也正是如此基于个性化和品牌宣传缘故网站都会设计自己的图标,但是问题在于这个图标尺寸非常小清晰度不够。

业界通常将这种图标称之为 Favicon 并且使用专门的格式ICO,网站需要将普通的图片转换成.ICO后再进行展示。

而火狐浏览器则支持使用矢量图形格式SVG作为网站图标,SVG不会随缩放而变形因此也不存在清晰度下降问题。

谷歌浏览器将在v80正式版里支持网站使用SVG矢量图标来保证清晰度

谷歌浏览器也将支持SVG图标:

在最近的测试版更新里谷歌浏览器开发团队已经开始测试SVG图标,当加载网站时可以将SVG识别为网站的图标。

为何这么久才准备支持矢量图片格式作为网站图标也有原因 , 因为Chrome SVG相关代码已经高度集成在渲染器。

如果需要支持网站使用矢量图片格式则需要调整整个渲染器代码,这也是谷歌工程师不愿意进行支持的主要原因。

不过在谷歌浏览器金丝雀测试版里谷歌已经支持矢量图像格式图标 ,  预计将在Chrome v80版开始正式进行支持。

网站如何设置使用矢量图像格式:

谷歌浏览器的这个变化也会影响到其他使用Chromium的浏览器,包括Edge、维瓦尔第、Opera以及Brave等等。

因此网站也可以广泛使用SVG矢量格式作为网站的主要图标,当然对于不兼容的浏览器还可以设置额外替代办法。

此外谷歌浏览器还将支持使用Prefers Color scheme属性调整图标颜色 , 例如在黑色模式下将图标也调整为黑色。

# 当浏览器支持使用SVG图像时调用SVG图像
<link rel="icon" type="image/svg+xml" href="happyface.svg"/>
# 当浏览器不支持使用SVG图像时调用替代图像
<link rel="alternate icon" type="image/png" href="sadface.png"/>
#以上方法来自:http://Dahlström.net/svg/favicon/favicon.html
本文来源Dahlström,由山外的鸭子哥转载或编译发布,如需转载请联系原作者。