动态 svg 图标？答案

【问题标题】：Dynamic svg favicon?动态 svg 图标？
【发布时间】：2011-04-22 20:54:22
【问题描述】：

我有一个 SVG 图标。我想把它做成不同颜色的图标。

由于 SVG 元素没有任何 toDataUrl()，我看不到不涉及服务器的解决方案。

对客户端解决方案有任何想法吗？

【问题讨论】：

标签： javascript svg favicon fabricjs

【解决方案1】：

fabric.js 支持将 SVG 元素渲染为 canvas 元素。

【讨论】：

投反对票。 OP 要求为网站图标提供仅客户端的解决方案。
@JoshH 对，所以使用 fabric.js，在 canvas 元素中渲染给定的 SVG，然后将图像导出为数据 URL 并将其用作网站图标 URL。
聪明。从之前的答案中并不清楚。感谢您的澄清。

【解决方案2】：

这不是你问的，而是 here's a page 测试浏览器对 svg favicon 的支持。

如果浏览器支持 svg 作为 favicon，那么从 svg 标记生成数据 url 并使用它是很简单的。但是，如果您想要一个光栅图像（png、jpg），那么是的，请查看画布解决方案。有些人甚至把games in the favicon...

【讨论】：

"如果浏览器支持 svg 作为 favicon，那么从 svg 标记生成数据 url 并使用它是很简单的"你是什么意思？
@brillout.com 可能与此类似：jsfiddle.net/estelle/SJjJb

【解决方案3】：

您有一个 SVG 图标，并且希望将其用作网站图标，以便您可以在不访问服务器的情况下以不同的颜色显示它。

对客户端解决方案有任何想法吗？

Firefox 41 introduced support 用于 SVG 图标。这是我刚才在 Firefox 52 中测试的一个例子：

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M224 387.814V512L32 320l192-192v126.912C447.375 260.152 437.794 103.016 380.93 0 521.287 151.707 491.48 394.785 224 387.814z'/%3E%3C/svg%3E">

将它放到您的页面中，并在您通过脚本更改它时观察它的更新。

备注

使用sizes attribute 和value of any 向浏览器提示它是一个矢量图标。
浏览器支持：http://caniuse.com/#feat=link-icon-svg。
有关编码提示，请参阅 Optimizing SVGs in data URIs。

【讨论】：

整洁！ Chrome、Safari 和 IE 怎么样？
好问题！我已经更新了答案以包括浏览器支持。这是 Chrome 中的功能请求，最近似乎受到了一些关注：crbug.com/294179