动态 svg 图标?

发布于 2024-09-26 12:09:52 字数 112 浏览 10 评论 0原文

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

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

对客户端解决方案有什么想法吗?

I have an icon as SVG.
I want to have it in different colors as favicon.

Since there isn't any toDataUrl() for SVG elements I don't see a solution that doesn't involve a server.

Any idea for a client side solution?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

櫻之舞 2024-10-03 12:09:52

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

fabric.js supports rendering of SVG elements into canvas elements.

唱一曲作罢 2024-10-03 12:09:52

这并不完全是您所要求的,但是这里有一个页面测试支持浏览器中的 svg 图标。

如果浏览器支持 svg 作为 favicon,那么从 svg 标记生成数据 url 并使用它就很简单了。但是,如果您想要光栅图像(png、jpg),那么可以看看画布解决方案。有些人甚至在图标中制作游戏...

This is not exactly what you asked, but here's a page testing the support for svg favicons in browsers.

If the browser supports svg as favicon it's trivial to generate a data url from the svg markup and use that. However, if you wanted a raster image (png, jpg) then yeah, look at the canvas solution. Some people even make games in the favicon...

荒人说梦 2024-10-03 12:09:52

您有一个 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">

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

注释

You have an SVG icon and you want to use it as a favicon so you can show it in different colors without hitting the server.

Any idea for a client side solution?

Firefox 41 introduced support for SVG favicons. Here's an example I tested in Firefox 52 just now:

<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">

Drop it in your page and watch it update as you alter it via script.

Notes

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文