Dynamic svg favicon？

我有一个图标作为SVG。我想用不同的颜色作为图标。Dynamic svg favicon？

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

客户端解决方案的任何想法？

来源

2010-10-08 brillout

fabric.js支持SVG元素的渲染成canvas元件。

来源

2010-10-08 12:36:44

Downvoted。 OP要求为客户端提供唯一的favicons解决方案。 – 2017-04-12 14:14:47

@JoshH正确，因此请使用fabric.js，将给定的SVG渲染到“canvas”元素中，然后将该图像导出为数据URL并将其用作收藏夹图标URL。 – 2017-04-12 14:35:42

聪明。这从前面的答案中是不清楚的。感谢您的澄清。 – 2017-04-12 16:01:23

这不完全是你问的，但here's a page在浏览器中测试svg图标的支持。

如果浏览器支持SVG的图标是微不足道的产生从SVG标记数据url和使用。但是，如果你想要一个光栅图像（PNG，JPG），那么看看画布解决方案。有些人甚至制作了games in the favicon ...

来源

2010-10-08 14:20:29

“如果浏览器支持svg作为favicon，那么从svg标记生成数据url并使用”这是什么意思？ – brillout 2010-10-11 16:02:02

为链接+1！ – 2012-04-13 00:35:18

@ brillout.com可能与此类似：http://jsfiddle.net/estelle/SJjJb/ – 2014-08-09 16:33:52

你有一个SVG图标，你想用它作为图标，这样你就可以用不同的颜色显示它，而不必击中服务器。

任何想法，对客户端的解决方案？

Firefox 41 introduced support for SVG favicons。下面是我在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的编码提示。

来源

2017-04-12 14:05:49

整洁！ Chrome，Safari和IE如何？ – brillout 2017-04-13 10:57:51

伟大的问题！我已经更新了包含浏览器支持的答案。以下是Chrome中的功能要求，最近看起来有些关注：https：//crbug.com/294179 – 2017-04-14 13:04:23

Dynamic svg favicon？

回答

相关问题