动态 svg 图标？

Posted 2023-03-25

【中文标题】动态 svg 图标？

【英文标题】：Dynamic svg favicon?

【发布时间】：2011-04-22 20:54:22

【问题描述】：

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

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

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

【参考方案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