J'ai une icône en SVG. Je veux l'avoir dans différentes couleurs comme favicon.Dynamique svg favicon?
Puisqu'il n'y a pas de toDataUrl() pour les éléments SVG, je ne vois pas de solution qui n'implique pas un serveur.
Une idée pour une solution côté client?
fabric.js prend en charge le rendu des éléments SVG en canvas éléments.
Ce n'est pas exactement ce que vous avez demandé, mais here's a page testant la prise en charge des favicons svg dans les navigateurs.
Si le navigateur prend en charge svg comme favicon, il est trivial de générer une URL de données à partir du balisage svg et de l'utiliser. Cependant, si vous voulez une image raster (png, jpg) alors oui, regardez la solution de toile. Certaines personnes font même games in the favicon ...
"Si le navigateur supporte svg comme favicon, il est trivial de générer une URL de données à partir du balisage svg et d'utiliser" Que voulez-vous dire? – brillout
+1 pour les liens! –
@ brillout.com probablement quelque chose de similaire à ceci: http://jsfiddle.net/estelle/SJjJb/ –
Vous avez une icône SVG et vous voulez l'utiliser comme favicon pour pouvoir l'afficher de différentes couleurs sans toucher le serveur.
Une idée pour une solution côté client?
Firefox 41 introduced support pour les favicons SVG. Voici un exemple dans Firefox je l'ai testé 52 tout à l'heure:
<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">
déposer dans votre page et regardez-le à jour comme vous le modifier via le script.
Remarques
sizes attribute avec un value of any de faire allusion au navigateur, il est une icône de vecteur.Neat! Que diriez-vous de Chrome, Safari et IE? – brillout
Bonne question! J'ai mis à jour la réponse pour inclure le support du navigateur. Voici la demande de fonctionnalités dans Chrome, qui semble attirer l'attention ces derniers temps: https://crbug.com/294179 –
Réduit. OP a demandé une solution réservée aux clients pour les favicons. –
@JoshH à droite, donc prenez fabric.js, rendez le SVG donné dans un élément 'canvas', puis exportez l'image comme URL de données et utilisez-la comme URL de favicon. –
Clever. Ce n'était pas clair à partir de la réponse avant. Merci pour la clarification. –