Dynamische svg Favicon?

Question

ich ein Symbol als SVG haben. Ich möchte es als Favicon in verschiedenen Farben haben.

Da es keine toDataURL ist () für SVG-Elemente Ich sehe nicht, eine Lösung, die keinen Server beinhaltet.

Jede Idee für eine Client-Side-Lösung?

Answer 1

fabric.js unterstützt Rendering von SVG-Elemente in canvas Elemente.

Answer 2

Dies ist nicht genau das, was Sie gefragt, aber hier ist eine Seite die Unterstützung für sVG-Favicons in Browsern zu testen.

Wenn der Browser unterstützt svg als Favicon es trivial ist, dass eine Daten URL aus dem SVG-Markup und Verwendung zu erzeugen. Wenn Sie jedoch ein Rasterbild (png, jpg), dann ja, Blick auf die Leinwand Lösung gesucht. Einige Leute auch machen Spiele in der Favicon ...

Answer 3

Sie haben ein SVG-Symbol und Sie wollen es als Favicon verwenden, so dass Sie es in verschiedenen Farben, ohne auf den Server zeigen können.

  

Jede Idee für eine Client-Side-Lösung?

Firefox 41 eingeführte Unterstützung für SVG Favicons. Hier ist ein Beispiel, das ich in Firefox getestet 52 gerade jetzt:

<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 es auf Ihrer Seite und beobachten Sie es aktualisieren, wie Sie es über ein Skript ändern.

Notizen

• Verwenden Sie die sizes Attribut mit einem < a href = "https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes-any" rel = "nofollow noreferrer"> Wert von any an den Browser Hinweis es ist ein Vektor-Symbol.
• Für Browser-Unterstützung: http://caniuse.com/#feat=link-icon -svg .
• Siehe Optimizing SVGs in Daten URIs Tipps kodieren .