问题
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?
回答1:
fabric.js supports rendering of SVG elements into canvas elements.
回答2:
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...
回答3:
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
- Use the sizes attribute with a value of any to hint to the browser it's a vector icon.
- For browser support: http://caniuse.com/#feat=link-icon-svg.
- See Optimizing SVGs in data URIs for encoding tips.
来源：https://stackoverflow.com/questions/3890442/dynamic-svg-favicon