怎么用SVG给favicon添加标识
导读:本文共5065.5字符,通常情况下阅读需要17分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:接下来,请跟着小编一起来学习吧!一、favicon 的获取方式想知道获取方式,可以先了解设置方式。一般有两种方式可以设置网站的 favicon。第一种,通过 link 标签设置(需要rel="icon"属性)<linkrel="icon"href="xxx.png">第二种,直接在网站根目录放一张favicon.ico(必须是... ...
目录
(为您整理了一些要点),点击可以直达。接下来,请跟着小编一起来学习吧!
一、favicon 的获取方式
想知道获取方式,可以先了解设置方式。
一般有两种方式可以设置网站的 favicon
。
第一种,通过 link
标签设置(需要rel="icon"
属性)
<linkrel="icon"href="xxx.png">
第二种,直接在网站根目录放一张favicon.ico
(必须是这个名称,浏览器默认的),html 中什么也不用设置
-网站目录
index.html
favicon.ico
如果以上都没有设置,那么大概率会看到以下错误
了解这些,获取就简单了,先通过link
获取,只要rel
包含icon
就行了
constlink=document.querySelector('link[rel~="icon"]');
如果找不到,可以请求/favicon.ico
,这里直接添加一个link
functiongetLink(){
constlink=document.querySelector('link[rel~="icon"]');
if(link){
returnlink
}else{
constlink=document.createElement('link');
link.rel="icon";
link.href="/favicon.ico"
document.head.append(link);
returnlink
}
}
这样获取的link
就保证存在了,然后就是绘制
二、利用 canvas 进行绘制
由于需要合成图像,所以需要先绘制原有图像。提到图像绘制,可以想到 canvas 绘制,只需要一点点 canvas 基础知识就足够了。具体实现如下
constcanvas=document.createElement('canvas'),
ctx=canvas.getContext('2d'),
img=newImage();
img.crossOrigin='anonymous';
img.onload=()=>{
canvas.height=img.height;
canvas.width=img.width;
ctx.drawImage(img,0,0,canvas.width,canvas.height);
letdataURL=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 中自由的、像正常网页开发一样,绘制这样一个布局,相信没有什么难度
<body>
<strong>local</strong>
<imgsrc='xxx.png'>
</body>
由于宽度有限,所以需要强制文本换行,超出隐藏,关键样式如下
strong{
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
text-transform:uppercase;
background-color:orange;
color:#fff;
padding:0px2px;
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 本身也是一种图片,这样就达到了合成图像的目的
具体实现如下
constlink=getLink();
consticon=awaitimg2Base64(link.href);
constfavicon=data:image/svg+xml;charset=utf-8,<svgxmlns="http://www.w3.org/2000/svg"width="32"height="32"><foreignObjectx="0"y="0"width="100%"height="100%"><bodyxmlns="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:0px2px; 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> <imgsrc='${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;
四、一些局限性
首先是兼容性。
目前只有 Chrome 和 Firefox 是支持的,为了兼容其他浏览器,可以用一个 .ico
来兜底
<linkrel="icon"href="/favicon.ico"sizes="any">
<linkrel="icon"href="/favicon.svg"type="image/svg+xml">
另外,在 Chrome 上还有一个限制(不知道是不是Chrome 更新后的限制),当 favicon 使用 svg 格式图片时,此时的 svg 会处于一种secure-static-mode,在这种模式下,所有动画都不会执行,会处于第一帧,比如下面这个例子
<svgxmlns="http://www.w3.org/2000/svg"width="100%"height="100%">
<foreignObjectwidth="100%"height="100%">
<bodyxmlns="http://www.w3.org/1999/xhtml">
<style>
html,body{
margin:0;
height:100%
}
div{
height:100%;
background:pink;
animation:hue3sinfinite;
}
@keyframeshue{
to{
filter:hue-rotate(360deg)
}
}
</style>
<div></div>
</body>
</foreignObject>
</svg>
很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的
但是,Chrome 上却不行,只有禁止的第一帧
所以之前想实现标识文本滚动的效果可以就此打住了
比较类似的还有媒体查询,之前在网上看到有这样的实现,直接在 SVG 中实现黑暗模式
<svgwidth="128"height="128"viewBox="00128128"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>
<rectwidth="128"height="128"rx="64"fill="#B09AFE"/>
<pathd="M32.37537.5714H22C2258.00438.259674.571458.312574.5714V98.3571C58.312599.810759.479710160.9062101H66.0937C67.520310168.687599.810768.687598.3571V74.5714C68.687554.138852.427937.571432.37537.5714ZM94.62527C80.97542769.10934.680862.900246.0286C67.390651.01770.713957.07972.464663.8018C90.734461.869210546.144210527H94.625Z"fill="white"/>
</svg>
但是也是同样的问题,只有 Firefox 下可行,Chrome是静止不动的
若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!怎么用SVG给favicon添加标识的详细内容,希望对您有所帮助,信息来源于网络。