怎么知道自己使用的公众号是svg：社区精选 使用 SVG
怎么知道自己使用的公众号是svg：社区精选 使用 SVG目前只有 Chrome 和 Firefox 是支持的，为了兼容其他浏览器，可以用一个 .ico来兜底首先是兼容性。link.href= favicon;这样就能正常的渲染了~完整实现可以参考项目：https://github.com/XboxYan/auto-dev-favicon-chrome-plugin
具体实现如下：
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: con}
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 标签在 svg 中需要写成<img></img>闭合形态，不然会被认为结构错误
- img 只能使用内联图片，比如 base64，这也是为何绘制原始 favicon 的原因
- 如果使用内联 svg，需要对 svg 进行转义
- 字符串中的单双引号问题也需要注意一下
然后，将生成的 SVG 直接设置为 favicon
link.href= favicon;
这样就能正常的渲染了~
完整实现可以参考项目：https://github.com/XboxYan/auto-dev-favicon-chrome-plugin
四、一些局限性首先是兼容性。
目前只有 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 是有动画的
但是，Chrome 上却不行，只有禁止的第一帧
所以之前想实现标识文本滚动的效果可以就此打住了
比较类似的还有媒体查询，之前在网上看到有这样的实现，直接在 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 在绘制方面提供了无限可能，不仅仅是本文中的案例，觉得 canvas 过于复杂的都可以考虑这一方案。
最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发❤❤❤
