怎么用SVG给favicon添加标识

这篇文章主要介绍“怎么用SVG给favicon添加标识”，在日常操作中，相信很多人在怎么用SVG给favicon添加标识问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用SVG给favicon添加标识”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！想知道获取方式，可以先了解设置方式。一般有两种方式可以设置网站的 favicon。第一种，通过 link 标签设置（需要rel="icon"属性）第二种，直接在网站根目录放一张favicon.ico（必须是这个名称，浏览器默认的），html 中什么也不用设置如果以上都没有设置，那么大概率会看到以下错误了解这些，获取就简单了，先通过link获取，只要rel包含icon就行了如果找不到，可以请求/favicon.ico，这里直接添加一个link这样获取的link就保证存在了，然后就是绘制由于需要合成图像，所以需要先绘制原有图像。提到图像绘制，可以想到 canvas 绘制，只需要一免费云主机、域名点点 canvas 基础知识就足够了。具体实现如下由于存在/favicon.ico没有设置的情况，所以需要在 img 加载失败的时候给一张默认图这样就能获取到 favicon 的图像信息了在上面的基础上，其实可以继续通过 canvas 进行绘制，再绘制一个标签也不是难事。不过这里可以采用 SVG 的方式来进行绘制，有以下一些优点成本更低，比 canvas 更易理解灵活性高，可以通过 CSS 进行一些样式控制首先，我们可以在 HTML 中自由的、像正常网页开发一样，绘制这样一个布局，相信没有什么难度由于宽度有限，所以需要强制文本换行，超出隐藏，关键样式如下接着，将这一段 html 放入 foreignObject标签中，关于 foreignObject 的作用，有兴趣的可以参考张鑫旭老师的这篇文章 SVG 简介与截图等应用，在这里，你可以简单理解为是可以包含 HTML 的标签，而 SVG 本身也是一种图片，这样就达到了合成图像的目的具体实现如下这里需要注意几点img 标签在 svg 中需要写成闭合形态，不然会被认为结构错误img 只能使用内联图片，比如 base64，这也是为何绘制原始 favicon 的原因如果使用内联 svg，需要对 svg 进行转义字符串中的单双引号问题也需要注意一下然后，将生成的 SVG 直接设置为 favicon首先是兼容性。目前只有 Chrome 和 Firefox 是支持的，为了兼容其他浏览器，可以用一个 .ico来兜底另外，在 Chrome 上还有一个限制（不知道是不是Chrome 更新后的限制），当 favicon 使用 svg 格式图片时，此时的 svg 会处于一种secure-static-mode，在这种模式下，所有动画都不会执行，会处于第一帧，比如下面这个例子很简单的一个背景颜色动画。在 Firefox 上是用作 favicon 是有动画的但是，Chrome 上却不行，只有禁止的第一帧比较类似的还有媒体查询，之前在网上看到有这样的实现，直接在 SVG 中实现黑暗模式但是也是同样的问题，只有 Firefox 下可行，Chrome是静止不动的到此，关于“怎么用SVG给favicon添加标识”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: css字体不可复制代码怎么写

这篇文章主要讲解了“css字体不可复制代码怎么写”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css字体不可复制代码怎么写”吧！ css字体不可复制代码是“-moz-user-select:none; -web…