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？

回答

相關問題