有没有办法在不受支持的浏览器中呈现 SVG 图标？

Question

截至目前，似乎支持它们的唯一浏览器是 Firefox。显然 Opera 曾经支持它，但后来放弃了它。也许是 JavaScript 垫片？

Answer 1

重用来自How do I set an SVG element to my page's favicon?的过程中与序列化无关的部分：

1. 创建<canvas> 元素（以下简称canvasElement）。
2. 创建一个<img> 元素（以下称为imageElement）并将其href 设置为您的SVG 图标。
3. 一旦图像被加载（通过在设置href后检查元素的complete属性，如果是则直接调用以下步骤，如果不是则将它们添加为load事件的侦听器），设置与canvasElement.width = imageElement.width 和canvasElement.height = imageElement.height 匹配的画布尺寸）。
4. 使用canvasElement.getContext('2d')（以下简称ctx）为画布创建绘图上下文。
5. 使用ctx.drawImage(imageElement, 0, 0, canvasElement.width, canvasElement.height) 将图像（在设置ctx.globalCompositeOperation = "copy" 之后，尤其是在重新使用canvas 元素时）绘制到画布上。
6. 使用canvasElement.toDataURL() 从画布创建一个PNG DataURL，并将that 设置为HTML 中<link rel="icon"> 元素的href 属性。

Answer 2

我不知道有任何垫片。不幸的是，我认为没有任何方法会起作用，因为网站图标显示在浏览器用户界面中，而不是网站本身。不过，我相信浏览器的支持情况终于开始好转。截至目前，Firefox 中的 SVG 图标仅在第一个页面加载时加载，然后回退到 .png 或 .ico 图标（如果有）。 The upcoming Safari 9 also has partial support，为新的“固定标签”功能使用单色 SVG 图标 - 但这需要 SVG 完全黑色，包含非官方的 mask 属性，如果您愿意，可以定义一个单一颜色的整体图标应使用（不相关的）<meta name="theme-color"> 标签着色。 Firefox seems to be working on a fix （更新：在 Firefox 41 中修复），所有其他浏览器都有一个功能请求站点，用于实现 SVG 图标（Edge、Chrome 和 Webkit/Safari）。

现在，除了指定<link rel="icon" sizes="any" href="favicon.svg" type="image/svg+xml">，您还应该继续指定.png 和/或.ico 图标。