动态 SVG 网站图标？

Question

我有一个SVG格式的图标。

我想将它作为网站图标在不同的颜色中使用。

由于SVG元素没有toDataUrl()方法，我不知道如何在客户端实现这个功能，除非使用服务器端的解决方案。

你们有什么关于客户端的解决方法吗？

- brillout

Answer 1

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

- Ionuț G. Stan

---

被踩了。OP要求一个仅限客户端的解决方案来处理网站图标。 - vhs

@JoshH，对的，使用fabric.js，在一个canvas元素中渲染给定的SVG，然后将图像导出为数据URL，并将其用作网站图标的URL。 - Ionuț G. Stan

聪明。之前的回答没有表达清楚。感谢澄清。 - vhs

Answer 2

这不完全是你要求的，但这里有一个页面测试浏览器对svg图标的支持。

如果浏览器支持svg作为图标，那么从svg标记生成数据url并使用它就很容易。然而，如果你想要一个光栅图像（png，jpg），那么看看canvas解决方案。甚至有些人在图标中制作游戏...

- Erik Dahlström

---

如果浏览器支持将SVG作为网站图标，那么从SVG标记生成数据URL并使用它就很容易。您是什么意思？ - brillout

@brillout.com 大概是类似这个的：http://jsfiddle.net/estelle/SJjJb/ - Camilo Martin

Answer 3

你有一个SVG图标，想将其用作网站图标，以便在不访问服务器的情况下显示不同颜色。

有没有客户端解决方案的想法？

Firefox 41 引入了对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 属性 和 value of any 来提示浏览器它是一个矢量图标。 - 浏览器支持：http://caniuse.com/#feat=link-icon-svg。 - 有关编码提示，请参见 在数据 URI 中优化 SVG。

- vhs

---

不错！那Chrome、Safari和IE呢？ - brillout

好问题！我已经更新了答案，包括浏览器支持。这是在Chrome中的功能请求，最近似乎引起了一些关注：https://crbug.com/294179 - vhs