Tengo un icono como SVG. Quiero tenerlo en diferentes colores como favicon.Dynamic svg favicon?
Dado que no hay ningún toDataUrl() para elementos SVG, no veo una solución que no involucre un servidor.
¿Alguna idea para una solución del lado del cliente?
fabric.js admite la representación de elementos SVG en elementos canvas.
Esto no es exactamente lo que pidió, pero here's a page probando el soporte para svg favicons en los navegadores.
Si el navegador admite svg como favicon, es trivial generar una url de datos a partir del marcado svg y usar eso. Sin embargo, si desea una imagen ráster (png, jpg), entonces sí, mire la solución de lienzo. Algunas personas incluso hacen games in the favicon ...
"Si el navegador admite svg como favicon, es trivial generar una URL de datos del marcado svg y usar ese" ¿qué quieres decir? – brillout
+1 para los enlaces! –
@ brillout.com probablemente algo similar a esto: http://jsfiddle.net/estelle/SJjJb/ –
Tiene un icono SVG y desea usarlo como favicon para que pueda mostrarlo en diferentes colores sin tocar el servidor.
¿Alguna idea para una solución del lado del cliente?
Firefox 41 introduced support para favicons SVG. He aquí un ejemplo que he probado en Firefox 52 hace un momento:
<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 en su página y ver que se actualizan a medida que se altera a través de la escritura.
Notas
sizes attribute con un value of any hacer alusión al navegador que es un icono del vector.¡Aseado! ¿Qué hay de Chrome, Safari y IE? – brillout
¡Buena pregunta! He actualizado la respuesta para incluir compatibilidad con el navegador. Aquí está la solicitud de función en Chrome, que parece estar recibiendo atención últimamente: https://crbug.com/294179 –
Downvoted. OP solicitó una solución solo para el cliente para favicons. –
@JoshH bien, así que tome fabric.js, renderice el SVG dado dentro de un elemento 'canvas', luego exporte la imagen como URL de datos y utilícela como la URL de favicon. –
Inteligente. Eso no estaba claro en la respuesta anterior. Gracias por la aclaración. –