SVG Favicon FTW 你不知道的居然还有这些!

译文
开发
本文探索了 SVG 收藏夹图标的有趣新世界。我们介绍了将它们添加到 HTML、使用表情符号、将它们内联为数据 URI 以及支持暗模式。

【51CTO.com快译】我最近一直在做一辅助项目(Style Check和Bedrocss),就像我其他任何长期项目一样,我已经到了想要添加favicon的地步。

于是,我决定尝试使用 SVG 图标,在BOO Safari浏览器上是足以支持的,但对于一些需求还不是达到要求。如果在不受支持的浏览器上没有显示图标,也是可以接受的。

通过使用 SVG,可以获得很多的好处,例如:

• 单个文件的清晰图像质量

• 对表情符号的支持

• 内联图标(无需链接资源)

• 暗模式检测

为了了解如何将 SVG 图标添加到项目中,因此,通过对以下示例(除了表情符号)进行操作,我们将使用一个非常基本的圆形 SVG:

  1. <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> 
  2.   <circle cx="50" cy="50" r="50"/> 
  3. </svg> 

将 SVG Favicon 添加到 HTML

将favicon添加到网站的语法同以往操作一样,同样适用于 SVG 收藏夹图标(减去文件扩展名)。

在 HTML 文件的<head>标签中,放置一个<link>元素,其rel属性设置为“icon”,href属性设置为图标所在的路径。

  1. <link rel="icon" href="path/to/favicon.svg"/> 

因为我们使用的是 SVG,所以图标可以是任何你想要的大小,只要确保画布是方形的。

如果需要搜索免费图标,icones是一个很好的资源,或者可以使用penpot创建自己的图标

将 SVG Favicon 内联为 Data-URI

在切换到 SVG 收藏夹图标后,我尝试做的第一件事是看看是否可以将它们与内联格式一起使用,而不是链接到单独的文件。

曾经在内联图像或背景中使用过 Data-URI 技巧,它的效果非常好,并且,也适用于网站图标。

不要链接到路径,而是在整个 SVG 代码前加上data:image/svg+xml;utf8,(包括最后一个逗号)并将整个内容传递给href属性。

  1. <link rel="icon" href="data:image/svg+xml;utf8,<svg...>...</svg>"

我真的很喜欢这种方法,因为如果忘记将图标文件放在某个文件夹中的某个位置,我可以将此代码复制/粘贴到任何项目(我的大多数副项目都使用相同的图标)。

当然,你可能会觉得这样使用内联 SVG 图标不太好,因为这样会占用内存,并且在每个页面上添加内联 SVG 会增加 HTML 的大小。

如果只有一个网站要处理,这可能不是什么大问题,但对于一个维护多个网站并使用同一个favicon的人来说,是一个不错的选择。

使用表情符号表达Favicon

Lea Verou在推特上展示了如何将表情符号添加为Favicon,使用方法特别简单。

语法的工作原理与之前相同,由于SVG通过<text>元素支持文本内容,并且表情符号几乎都是文本,因此可以在 SVG 中将放置任何表情符号(可能需要四处移动以适应正确的位置一些移动来适应)。

  1. <link rel="icon" href="data:image/svg+xml,<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> 
  2. <text y=".9em" font-size="90">[place emoji here]</text> 
  3. </svg>" /> 

这使得创建favicon非常容易,而无需创建自定义favicon。查看Bryson Reece提供的emojicon.dev,可以得到一个表情符号列表,点解其中任何一个,将整个favicon片段复制到剪贴板上。

除此之外,Wes Bos还创建了fav.farm。这是一项第三方服务,将为你生成网站图标。可以使用你想要的表情符号直接链接到他的服务。

  1. <link rel="icon" href="https://fav.farm/[place emoji here]" /> 

开发社区的创造力从未停止,在那里有很多很酷、聪明和有创意的开发者。

添加暗模式检测

我们可以在SVG中添加一个<style>标记,并使用prefers color scheme media查询根据用户的暗模式首选项更改图标。

  1. <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'
  2.   <style> 
  3.     svg { 
  4.       background: white; 
  5.     } 
  6.     circle { 
  7.       fill: black; 
  8.     } 
  9.     @media (prefers-color-scheme: dark) { 
  10.       svg { 
  11.         background: black; 
  12.       } 
  13.       circle { 
  14.         fill: white; 
  15.       } 
  16.     } 
  17.   </style> 
  18.   <circle cx="50" cy="50" r="50"/> 
  19. </svg>"> 

在本例中,我直接针对SVG和<circle>,但你也可以使用类。对于定制SVG,你可能需要这样做。 

SVG中的<style>标记包含在该XML文档中,因此你不必担心样式会泄漏到应用程序的其余部分中。

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

 

责任编辑:梁菲 来源: AZone
相关推荐

2022-01-04 07:30:24

IT热门技术

2018-09-03 11:30:44

跳槽潜规则工资

2022-04-24 16:00:15

LinuxLinux命令ls命令

2022-03-03 07:00:43

Mybatiswhere标签

2018-09-02 15:43:56

Python代码编程语言

2015-04-14 09:46:09

Apple Watch秘密

2020-03-05 11:10:18

Left join数据库MySQL

2022-05-05 12:02:45

SCSS函数开发

2018-05-08 14:24:50

虚拟化服务器网络

2020-07-28 08:26:34

WebSocket浏览器

2020-06-12 09:20:33

前端Blob字符串

2017-03-17 20:03:20

人脸识别

2019-03-15 16:28:17

携号转网网络质量电话卡

2020-06-22 15:41:20

IF函数Excel用法

2023-09-08 08:23:29

Servlet程序MVC

2009-12-10 09:37:43

2011-09-15 17:10:41

2022-10-13 11:48:37

Web共享机制操作系统

2021-02-01 23:23:39

FiddlerCharlesWeb

2010-08-23 09:56:09

Java性能监控
点赞
收藏

51CTO技术栈公众号