Geek Answers Handbook

Dynamic svg favicon?

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

Since toDataUrl () does not exist for SVG elements, I do not see a solution that is not server related.

Any idea for a client solution?

+7
javascript favicon svg fabricjs
source share
3 answers

fabric.js supports rendering SVG elements to canvas elements.

+6
source share

This is not exactly what you requested, but here is a page that checks for svg favicons support in browsers.

If the browser supports svg as favicon, it is trivial to generate the data url from the svg markup and use this. However, if you want a bitmap (png, jpg), then yes, look at the solution to the canvas. Some people even make games in the icon ...

+5
source share

You have an SVG icon, and you want to use it as an icon so that you can display it in different colors without clicking on the server.

Any idea for a client solution?

Firefox 41 introduced support for SVG icons. Here is an example that I tested now in 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">

Drop it on your page and view it when you change it with a script.

Notes

+1
source share

More articles:


All Articles