如何为页面的图标设置 SVG 元素？答案

【问题标题】：How do I set an SVG element to my page's favicon?如何为页面的图标设置 SVG 元素？
【发布时间】：2021-09-28 11:28:44
【问题描述】：

我的页面上有一个 SVG 元素。我想用它作为页面的图标。如何在 JavaScript 中执行此操作？

【问题讨论】：

标签： svg favicon

【解决方案1】：

这样做令人震惊令人费解。您可以在here 中看到我的解决方案：方法如下所述（通过 ID 或其他方式获取 HTML 元素，留给读者作为练习）。

在 HTML 中

确保您的 SVG 元素包含属性 xmlns="http://www.w3.org/2000/svg"，因为您需要将元素的源作为自己的文件，并且独立 SVG 文件需要 XMLNS 声明。（另请注意，这意味着您的 SVG 需要是自包含的，并且不能使用 <use> 之类的方式引用其父文档中的元素。）
（可选）将元素包装在<div> 或<span> 中，您可以使用.innerHTML 获取<svg> 元素的内容。（innerHTML 和 outerHTML 属性均不存在于当前 HTML 标准中的 SVG 元素上。）
在页面的<head> 中包含<link rel="icon">。

在 JavaScript 中

获取要设置为收藏夹图标的 SVG 元素的来源，方法是获取您已将其包装在其中的 HTML 元素的 innerHTML 属性，或在 SVG 元素上调用 new XMLSerializer().serializeToString()。
通过将字符串 "data:image/svg+xml," 添加到源中，为此元素创建一个 DataURL 作为文档。（如果大多数浏览器都支持网站图标的 SVG，我们就到此为止了，但由于在撰写本文时它们不支持，我们必须更深入。）
创建一个<img> 元素，您将通过该元素路由图像，为load 事件添加一个事件侦听器，该事件将在控件返回事件循环后绘制图像（因为符合规范的浏览器胜出't let you read the image synchronously - see this crbug)，并将 SVG 源的 DataURL 设置为其 src 属性。（这和第 8 步之间的步骤现在可以同步发生，也可以作为侦听器回调的一部分；它们只需要在您绘制图像之前发生。）
决定要将网站图标呈现为何种分辨率 - 我的示例将使用 64x64，以与高 DPI（Retina 和 Super Retina）显示器兼容。
创建一个<canvas> 元素（以前称为canvasElement）并设置其尺寸（通过设置canvasElement.width = 64 和canvasElement.height = 64）。
使用canvasElement.getContext('2d')（以前称为ctx）为画布创建绘图上下文。
如果您要重复使用之前创建的画布，请设置ctx.globalCompositeOperation = "copy"，或使用ctx.clearRect(0, 0, 64, 64) 清除它。
在您添加到在步骤 3 中创建的 <img> 元素的 load 侦听器之后的执行序列中的某个位置，使用 ctx.drawImage(svgImg, 0, 0, 64, 64) 将图像绘制到画布上（其中 svgImg 是 <img> 元素您将 src 设置为 SVG DataURL）。
使用canvasElement.toDataURL() 从画布创建一个PNG DataURL，并将that 设置为HTML 中<link rel="icon"> 元素的href 属性。

【讨论】：

另外，由于crbug.com/475009，您目前需要确保在您的<svg> 元素上指定了width 和height 属性。
使用toBlob 为画布制作 Blob 也可能更快，省去了 Base64 编码步骤。
这个支持哪些浏览器？
这应该适用于所有当前的浏览器（支持 Canvas、drawImage 和 toBlob 和/或 toDataURL），并且在撰写本文时，它确实有效；但是，由于a pretty nasty regression bug，这似乎在 Chrome 中被破坏了。
@ElliotLabs 我已经更新了帖子以修复依赖超出规范行为的部分（当 Chrome 修复其规范合规性时触发了我在上面链接的错误）：此处描述的过程应该适用于所有现代浏览器。

【解决方案2】：

我知道它已经回答了，但是对于这样一个简单的任务来说，只需将您的 svg 存储在一个 svg 文件中并将其用作 Head Tag 中的图标。

<link rel="shortcut icon" href="favicon.svg" type="image/x-icon">

【讨论】：

即使在 2021 年，不同浏览器的支持也不统一 - caniuse.com/link-icon-svg
是的，它在移动浏览器中的主要问题，这导致丑陋的用户界面

【解决方案3】：

我试过了，这对我有用：

<link rel="shortcut icon" href="favicon.svg" type="image/svg">

将type="image/x-icon" 更改为type="image/svg"。

【讨论】：