动态 svg 图标?
我有一个 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
fabric.js 支持将 SVG 元素渲染为
canvas
元素。fabric.js supports rendering of SVG elements into
canvas
elements.这并不完全是您所要求的,但是这里有一个页面测试支持浏览器中的 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...
您有一个 SVG 图标,并且希望将其用作网站图标,这样您就可以在不影响服务器的情况下以不同的颜色显示它。
Firefox 41 引入了对 SVG 图标的支持。这是我刚刚在 Firefox 52 中测试的一个示例:
将其放入您的页面中,并在您通过脚本更改它时观察它的更新。
注释
尺寸
属性 具有 值any
向浏览器提示它是一个矢量图标。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.
Firefox 41 introduced support for SVG favicons. Here's an example I tested in Firefox 52 just now:
Drop it in your page and watch it update as you alter it via script.
Notes
sizes
attribute with a value ofany
to hint to the browser it's a vector icon.