Ho un'icona come SVG. Voglio averlo in diversi colori come favicon.Dinamica svg favicon?
Poiché non c'è alcun toDataUrl() per gli elementi SVG, non vedo una soluzione che non coinvolga un server.
Qualche idea per una soluzione lato client?
fabric.js supporta il rendering di elementi SVG negli elementi canvas.
Questo non è esattamente quello che hai chiesto, ma here's a page testare il supporto per le favicon svg nei browser.
Se il browser supporta svg come favicon è banale generare un URL di dati dal markup svg e usarlo. Tuttavia, se volessi un'immagine raster (png, jpg) allora sì, guarda la soluzione canvas. Alcune persone addirittura rendono ...
"Se il browser supporta svg come favicon è banale generare un url di dati dal markup svg e usare quello" cosa intendi? – brillout
+1 per i collegamenti! –
@ brillout.com probabilmente qualcosa di simile a questo: http://jsfiddle.net/estelle/SJjJb/ –
Hai un'icona SVG e vuoi usarla come favicon in modo da poterla mostrare in diversi colori senza colpire il server.
Qualche idea per una soluzione lato client?
Firefox 41 introduced support per le favicon SVG. Ecco un esempio che ho provato in Firefox 52 solo ora:
<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">
Rilasciarlo nella tua pagina e guardarlo aggiornarlo mentre lo modifichi tramite script.
Note
sizes attribute con un value of any per suggerimento per il browser è un'icona del vettore.Neat! Che ne dici di Chrome, Safari e IE? – brillout
Ottima domanda! Ho aggiornato la risposta per includere il supporto del browser. Ecco la richiesta di funzioni in Chrome, che sembra ricevere ultimamente un po 'di attenzione: https://crbug.com/294179 –
Downvoted. OP ha chiesto una soluzione solo per il lato client per le favicon. –
@JoshH right, quindi prendi fabric.js, rendi il dato SVG all'interno di un elemento 'canvas', quindi esporta l'immagine come URL dei dati e usala come URL favicon. –
Intelligente. Ciò non era chiaro dalla risposta precedente. Grazie per il chiarimento. –