怎么用SVG给favicon添加标识

一、favicon 的获取方式

想知道获取方式,可以先了解设置方式。

一般有两种方式可以设置网站的 favicon

名列前茅种,通过 link 标签设置(需要rel="icon"属性)

<link rel="icon" href="xxx.png">

第二种,直接在网站根目录放一张favicon.ico(必须是这个名称,浏览器默认的),html 中什么也不用设置

- 网站目录    index.html    favicon.ico

如果以上都没有设置,那么大概率会看到以下错误

怎么用SVG给favicon添加标识

了解这些,获取就简单了,先通过link获取,只要rel包含icon就行了

const link = document.querySelector('link[rel~="icon"]');

如果找不到,可以请求/favicon.ico,这里直接添加一个link

function getLink(){    const link = document.querySelector('link[rel~="icon"]');    if (link) {        return link    } else {        const link = document.createElement('link');        link.rel = "icon";        link.href = "/favicon.ico"        document.head.append(link);        return link    }}

这样获取的link就保证存在了,然后就是绘制

二、利用 canvas 进行绘制

由于需要合成图像,所以需要先绘制原有图像。提到图像绘制,可以想到 canvas 绘制,只需要一点点 canvas 基础知识就足够了。具体实现如下

const canvas = document.createElement('canvas'),ctx = canvas.getContext('2d'),img = new Image();img.crossOrigin = 'anonymous';img.onload = () => {    canvas.height = img.height;    canvas.width = img.width;    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);    let dataURL = canvas.toDataURL("image/png");    resolve(dataURL);    canvas = null;};img.src = url;

由于存在/favicon.ico没有设置的情况,所以需要在 img 加载失败的时候给一张默认图

img.onerror = () => {    resolve("默认图base64");}

这样就能获取到 favicon 的图像信息了

三、利用 SVG 进行图片合成

在上面的基础上,其实可以继续通过 canvas 进行绘制,再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制,有以下一些优点

  • 成本更低,比 canvas 更易理解

  • 灵活性高,可以通过 CSS 进行一些样式控制

首先,我们可以在 HTML 中自由的、像正常网页开发一样,绘制这样一个布局,相信没有什么难度

怎么用SVG给favicon添加标识

<body>  <strong>local</strong>  <img src='xxx.png'></body>

由于宽度有限,所以需要强制文本换行,超出隐藏,关键样式如下

strong{  position: absolute;  bottom: 0;  left: 50%;  transform: translateX(-50%);  text-transform: uppercase;  background-color: orange;  color: #fff;  padding: 0px 2px;  border-radius: 2px;  font-size: 12px;  box-sizing: border-box;  max-width: 100%;  width: max-content;  height: 16px;  line-height: 16px;  word-break: break-all;  overflow: hidden;}

接着,将这一段 html 放入 foreignObject标签中,关于 foreignObject 的作用,有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用,在这里,你可以简单理解为是可以包含 HTML 的标签,而 SVG 本身也是一种图片,这样就达到了合成图像的目的

怎么用SVG给favicon添加标识

具体实现如下

const link = getLink();const icon = await img2Base64(link.href);const favicon = `data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><foreignObject x="0" y="0" width="100%" height="100%"><body xmlns="http://www.w3.org/1999/xhtml">  <style>    html,body{      height: 100%;      margin: 0;      text-align: center;    }    img{      display: block;      width: 100%;      height: 100%;      object-fit: contain;    }    strong{      position: absolute;      bottom: 0;      left: 50%;      transform: translateX(-50%);      text-transform: uppercase;      background-color: ${color};      color: #fff;      padding: 0px 2px;      border-radius: 2px;      font-size: 12px;      box-sizing: border-box;      max-width: 100%;      width: max-content;      height: 16px;      line-height: 16px;      word-break: break-all;      overflow: hidden;    }  </style>  <strong>local</strong>  <img src='${icon}'></img>  </body></foreignObject></svg>`.replace(/n/g, '').replace(/t/g, '').replace(/#/g, '%23')

这里需要注意几点

  • img 标签在 svg 中需要写成<img></img>闭合形态,不然会被认为结构错误

  • img 只能使用内联图片,比如 base64,这也是为何绘制原始 favicon 的原因

  • 如果使用内联 svg,需要对 svg 进行转义

  • 字符串中的单双引号问题也需要注意一下

然后,将生成的 SVG 直接设置为 favicon

link.href= favicon;

怎么用SVG给favicon添加标识

四、一些局限性

首先是兼容性。

目前只有 Chrome 和 Firefox 是支持的,为了兼容其他浏览器,可以用一个 .ico来兜底

<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/favicon.svg" type="image/svg+xml">

另外,在 Chrome 上还有一个限制(不知道是不是Chrome 更新后的限制),当 favicon 使用 svg 格式图片时,此时的 svg 会处于一种secure-static-mode,在这种模式下,所有动画都不会执行,会处于名列前茅帧,比如下面这个例子

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">  <foreignObject width="100%" height="100%">      <body xmlns="http://www.w3.org/1999/xhtml">        <style>        html,body{            margin: 0;            height: 100%        }        div{            height: 100%;            background: pink;            animation: hue 3s infinite;        }        @keyframes hue {            to {                filter: hue-rotate(360deg)            }        }        </style>        <div></div>      </body>    </foreignObject></svg>

很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的

怎么用SVG给favicon添加标识

但是,Chrome 上却不行,只有禁止的名列前茅帧

怎么用SVG给favicon添加标识

所以之前想实现标识文本滚动的效果可以就此打住了

比较类似的还有媒体查询,之前在网上看到有这样的实现,直接在 SVG 中实现黑暗模式

<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">    <style>        path {            fill: #fff;        }        rect {            fill: #B09AFE;        }        @media (prefers-color-scheme: dark) {            path {                fill: #B09AFE;            }            rect {                fill: #fff;            }        }    </style>    <rect width="128" height="128" rx="64" fill="#B09AFE"/>    <path d="M32.375 37.5714H22C22 58.004 38.2596 74.5714 58.3125 74.5714V98.3571C58.3125 99.8107 59.4797 101 60.9062 101H66.0937C67.5203 101 68.6875 99.8107 68.6875 98.3571V74.5714C68.6875 54.1388 52.4279 37.5714 32.375 37.5714ZM94.625 27C80.9754 27 69.109 34.6808 62.9002 46.0286C67.3906 51.017 70.7139 57.079 72.4646 63.8018C90.7344 61.8692 105 46.1442 105 27H94.625Z" fill="white"/></svg>

但是也是同样的问题,只有 Firefox 下可行,Chrome是静止不动的

怎么用SVG给favicon添加标识

到此,关于“怎么用SVG给favicon添加标识”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

文章标题:怎么用SVG给favicon添加标识,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/23674

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
亿速云的头像亿速云认证作者
上一篇 2022年9月8日 上午1:40
下一篇 2022年9月8日 上午1:41

相关推荐

  • NMAP的端口扫描技术是什么

    什么是端口? 将网络设备比作一间房子,那么端口就是进出该房子的出入口(奇怪的地方就是这个房子的出入口太多了,多达65535个),这些出入口供数据进出网络设备。 设置端口的目的,就是为了实现 “一机多用”,即在一台机器上运行多种不同的服务。那么当一台机器上运行着多个程序时,机器是如何区分不同程序的数据…

    2022年9月8日
    73100
  • 项目团队如何高效沟通?

    在职场工作中,最常遇到的问题就是 沟通 。 如何能在最短的时间做到令对方明白您的目的? 彼此确认好双方的需求? 确保大家都明确任务最终想要达成的效果? 这需要极强的沟通和协作能力,而高效沟通几乎是现下每个团队的管理盲点。 团队沟通是团队协作的基础。 为了更好地合作,就必…

    2022年3月20日
    76700
  • win8如何取消开机账户登录

    win8取消开机账户登录的方法 1、win+r打开运行界面。 2、对话框输入“netplwiz”,回车确定。 3、然后把“要使用本计算机,用户必须输入用户名和密码”前面的勾去掉。 4、点击确定之后系统会再次弹出一个密码输入框,这个时候我们再次输入密码点击确定就可以了。 关于“win8如何取消开机账户…

    2022年9月24日
    40500
  • mysql如何对列求和

    在mysql中,可以使用SUM()函数来对列求和;SUM()是一个求总和的函数,可以返回指定列值的总和,语法“SELECT SUM(DISTINCT 列名) FROM 表名;”,“DISTINCT”运算符允许计算集合中的不同值;SUM()函数在计算时,会忽略列值为NULL的行。 本教程操作环境:wi…

    2022年9月22日
    1.7K00
  • 如何进行APT中的迂回渗透

    引言 随着信息安全行业发展,很多企业,政府以及互联网公司对网络安全越来越重视。习大大指出,没有网络安全就没有国家安全,没有信息化就没有现代化。 众所周知,现在的安全产品和设备以及对网络安全的重视,让我们用常规手段对目标渗透测试的成功率大大降低。当然,对于一些手握0day的团队或者个人来说,成功率还是…

    2022年9月21日
    57100
  • roaming文件夹有什么作用

    roaming文件夹是用于存放一些程序运行后产生的数据文件的;该文件夹是Windows存放一些使用程序后产生的数据文件,如软件听音乐,登入的号码等而缓存的一些数据,若删除该文件夹不会对系统产生什么影响,但是会对软件造成一定的影响,建议不要删除。 本教程操作环境:windows10系统、DELL G3…

    2022年9月8日
    1.7K00
  • vlookup函数条件怎么填写

    vlookup函数条件填写方法 1、名列前茅个条件,选择需要查找的单元格,这里为“张三” 2、第二个条件,选中需要查找内容的列。 3、第三个条件,查看所需查找内容在第几列,这里工资在第三列,所以填“3” 4、第四个条件,如果要查找精确数据,就选择“0”,要模糊查找就用“1” 5、最后按下回车,就可以…

    2022年9月22日
    2.6K00
  • word页码不连续突然断页怎么设置

    word页码不连续突然断页设置方法: 1、首先进入word文档,并点击上方的插入。 2、然后在菜单内找到点击“页码”选项。 3、在选项中可以看到页码点击。 4、随后在起始页码的后面输入1。 5、最后点击下方的确定保存即可。 读到这里,这篇“word页码不连续突然断页怎么设置”文章已经介绍完毕,想要掌…

    2022年9月20日
    1.6K00
  • windows office365怎么卸载干净

    office365卸载干净步骤: 1、左键你的开始菜单,找到设置,如图。 2、点击进入到应用中。 3、在应用与功能里找到和office365。 4、点击卸载。 6、将保留我的的数据和使用习惯取消勾选。 7、此时点击继续卸载,就会将残留文件也移除了。 到此,关于“windows office365怎么…

    2022年9月21日
    94600
  • windows pcstory常见问题怎么解决

    pcstory是什么 答:pcstory是一款游戏下载软件。 1、其中有着大量的优异正版单机游戏可以下载,各种游戏应有尽有。 2、而且软件有着优异的下载通道,即使上百GB的游戏也能很快下载。 3、软件还自带了游戏管理服务,可以移动、卸载在这里下载到的游戏。 4、此外,pcstory还拥有免费更新功能…

    2022年9月20日
    2.1K00
注册PingCode 在线客服
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部