Fonction — toutes les sources · 3 sur 4
Extrayez une icône d'un sprite SVG
Une planche de sprites empile des dizaines d'icônes dans un seul fichier et peint chacune avec <use href="#id">. Enregistrez-la de la manière évidente et vous obtenez la planche entière — ou du vide. SVG Downloader résout la référence et vous remet le seul glyphe.
Le problème
Pourquoi un sprite donne toute la planche ou rien
Les sprites SVG sont ce qui garde les gros jeux d'icônes rapides. Chaque icône est définie une fois — d'ordinaire comme un <symbol> avec un id, rangé dans un unique <svg> caché — et chaque endroit qui affiche une icône écrit simplement <use href="#chevron">. Le navigateur estampe une copie de ce symbole là où se trouve la référence. Rapide à charger, et piégeux à extraire.
Le piège, c'est qu'un élément <use> ne contient aucun dessin. C'est un pointeur. Essayez d'enregistrer l'icône que vous voyez et vous enregistrez une référence vide — un fichier qui ne dessine rien tout seul, parce que le symbole visé n'y est pas. Prenez l'autre chemin et enregistrez la source du sprite : vous obtenez les quarante icônes soudées en un fichier, la plupart définies à des coordonnées bien hors de tout viewBox. Ni l'un ni l'autre n'est l'icône voulue.
Ce que fait SVG Downloader à la place
Ouvrez le popup et il suit les pointeurs. Pour chaque <use> qui pointe quelque part dans le même document — l'habituel <use href="#chevron"> vers un sprite en ligne caché — il retrouve le <symbol> ou <g> référencé et reconstruit un SVG complet et autonome pour ce seul glyphe. Chacun reçoit son aperçu isolé : une planche de quarante icônes devient quarante aperçus à feuilleter et à enregistrer un par un.
- La référence résolue. Le
href(ou l'ancienxlink:href) est suivi jusqu'à son symbole, et ce symbole est cloné dans un<defs>tout neuf en tête du fichier enregistré. Le<use>reste où il était et se résout désormais contre un balisage que le fichier transporte lui-même — il s'affiche donc correctement partout, sans sprite à côté. - Un glyphe, pas la planche. Vous enregistrez le chevron, pas le chevron plus trente-neuf voisins. Chaque référence est extraite séparément, et vous pouvez taper le nom voulu avant d'enregistrer — ou tout prendre en jeu numéroté avec Tout télécharger en ZIP.
- Ou prenez-les tous. Quand vous voulez le jeu complet, Tout télécharger en ZIP extrait d'un coup chaque symbole référencé, dédoublonné, dans une seule archive.
Ce que vous récupérez
- Format
- Un .svg conforme aux standards par glyphe — le symbole intégré dans un fichier autonome, espace de noms réparé.
- Références lues
- Les
<use>pointant dans le même document, viahrefet l'ancienxlink:href. Les fichiers de sprite externes ne sont pas résolus. - Où ça tourne
- Entièrement dans votre navigateur. Les références sont résolues en local — pas d'envoi, pas de serveur, pas de compte.
- Gère aussi
- Le SVG en ligne, les fonds CSS et le ZIP de page entière.
Bon à savoir
Questions sur les sprites SVG
Qu'est-ce qu'un sprite SVG, exactement ?
Un fichier SVG qui définit beaucoup d'icônes comme des éléments <symbol> distincts, chacun avec son id. Les pages référencent une icône avec <use href="#id"> au lieu de répéter son balisage. C'est l'équivalent, pour un jeu d'icônes, d'une planche de sprites CSS — un téléchargement, beaucoup de glyphes.
Pourquoi l'enregistrement de l'icône me donne-t-il un fichier vide ?
Parce qu'un élément <use> ne contient aucun dessin — il pointe vers un symbole défini ailleurs. Sortie seule, cette référence n'a rien à afficher. SVG Downloader résout d'abord le pointeur jusqu'au symbole réel, si bien que le fichier enregistré dessine l'icône.
Fonctionne-t-il avec un fichier de sprite externe, pas seulement en ligne ?
Non — les sprites externes ne sont pas pris en charge. Si la référence pointe hors du document courant, comme dans <use href="/sprite.svg#cart">, ce <svg> est ignoré et compté comme tel plutôt que remis cassé. Seules les références du même document — <use href="#cart"> vers un sprite en ligne caché, comme la plupart des sites en livrent — sont résolues. Si un site utilise un sprite externe, ouvrir sprite.svg directement vous donne la planche source.
Et un symbole qui référence un autre symbole ?
La résolution va sur un seul niveau. Un <symbol> dont le contenu comporte un autre <use> vers un second symbole reste non résolu : cette partie imbriquée ne s'affichera pas dans le fichier enregistré. C'est rare — la plupart des sprites définissent chaque glyphe à plat — mais mieux vaut vérifier l'aperçu si une icône paraît en partie vide.
Sortez une icône propre de la planche
Gratuit, privé, et il suit la référence que le navigateur cache.