Dynamic svg favicon?

Question

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?

Answer 1

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

Answer 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 ...

Answer 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.