谷歌浏览器将在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,由 山外的鸭子哥 整理编辑,其版权均为 Dahlström 所有,文章内容系作者个人观点,不代表 蓝点网 对观点赞同或支持。如需转载,请注明文章来源。
1
leishiming
哇哦恭喜您已成功屏蔽了蓝点网的小广告
扫码关注蓝点网微信公众号

评论:

3 条评论,访客:3 条,站长:0 条
  1. 黄飞鸿933
    黄飞鸿933发布于: 
    Google Chrome 78.0.3904.96 Google Chrome 78.0.3904.96 Android 10 Android 10

    可以可以

  2. Harvey
    Harvey发布于: 
    Google Chrome 78.0.3904.108 Google Chrome 78.0.3904.108 Android 9 Android 9

    svg格式确实很好用,放大也不会变模糊,用来做地图标志最好

  3. fudashuai
    fudashuai发布于: 
    Maxthon 5.3.8.2000 Maxthon 5.3.8.2000 Windows 10 64位版 Windows 10 64位版

    能够保证图标清晰度!太好了!

发表评论