Sprite de symboles SVG
Réunir des icônes SVG dans un seul sprite de symboles
Combinez un dossier d'icônes SVG en un seul sprite réutilisable. Chaque fichier devient un <symbol> avec un extrait <use> prêt à l'emploi, tandis que les ID internes préfixés empêchent les dégradés, les masques et les chemins de détourage d'entrer en collision.
Ces réglages s'appliquent à l'ensemble du sprite.
Aperçu du sprite
Ajoutez des fichiers SVG pour créer un sprite.
Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.
Sprite de symboles ou spritesheet ?
Un sprite de symboles est un fichier SVG unique qui contient un <symbol> par icône. Rien n'est dessiné tant que vous ne référencez pas un symbole avec <use> : les icônes restent vectorielles, restent stylables en CSS et restent nettes à toute taille. C'est ce qu'il vous faut pour un jeu d'icônes d'interface.
Un spritesheet est une seule image où toutes les icônes sont disposées sur une grille, dessinée avec background-position ou avec une carte d'images JSON. Les icônes sont des pixels à des coordonnées fixes, ce qu'attendent les moteurs de jeu et les moteurs de rendu sur canevas, et ce dont vous avez besoin quand la cible ne peut pas du tout utiliser <use>.
Ouvrir le générateur de spritesheet SVGQuand utiliser un sprite de symboles
Un sprite de symbole conserve un jeu d'icônes dans un fichier SVG réutilisable, et chaque instance d'icône devient un court élément <use> au lieu d'un bloc de chemins répété. Ceci est utile pour la navigation, les boutons, les tableaux et autres interfaces qui réutilisent les mêmes icônes. Les symboles restent un balisage vectoriel, ils restent donc nets et peuvent hériter de la couleur et de la taille de CSS.
Comment créer un sprite de symboles SVG en ligne
- 1
Déposez vos icônes SVG, ou cliquez sur SÉLECTIONNER DES FICHIERS, pour les ajouter à la file. Jusqu'à 40 à la fois, et l'ordre de la liste est celui des symboles.
- 2
Choisissez un sprite externe ou un sprite en ligne, décidez s'il faut optimiser les icônes et normaliser leurs viewBox, et regardez la grille d'icônes se reconstruire à partir du sprite lui-même.
- 3
Cliquez sur TOUT ENREGISTRER pour télécharger sprite.svg, ou une archive ZIP contenant sprite.svg et usage.html quand les exemples d'utilisation sont activés.
Confidentialité : vos fichiers ne quittent pas le navigateur
La conversion s'exécute localement dans votre navigateur à l'aide de JavaScript et WebAssembly. Il n'y a pas de téléchargement de fichiers ni de conversion côté serveur, donc les fichiers que vous ajoutez restent sur votre appareil.
Le traitement local permet de protéger les logos confidentiels, les documents internes et les illustrations client inédites. Les pages et le code de conversion sont mis en cache au fur et à mesure que vous les utilisez, afin que les outils que vous avez déjà ouverts puissent continuer à fonctionner sans connexion réseau.
Questions fréquentes
Que se passe-t-il quand deux fichiers produisent le même ID ?
Les ID viennent du nom de fichier sans extension, mis en minuscules et transformé en slug : "Arrow Left.svg" devient donc arrow-left. Quand deux fichiers produisent le même ID, le premier le conserve et les suivants reçoivent -2, -3, et ainsi de suite. Renommer un fichier dans la liste change son ID immédiatement, tout comme trier la liste ou y glisser un fichier, car c'est le premier fichier dans l'ordre qui garde l'ID simple.
Vaut-il mieux un sprite externe ou un sprite en ligne ?
Un sprite externe est un fichier sprite.svg que vous référencez avec <use href="sprite.svg#icon-id">. Il est mis en cache comme n'importe quelle autre ressource et garde votre HTML léger, au prix d'une requête supplémentaire, et il doit venir de la même origine, sauf si CORS l'autorise autrement. Un sprite en ligne, c'est le même balisage collé dans la page à l'intérieur d'un <svg> masqué et référencé avec <use href="#icon-id">. Il ne demande aucune requête et se résout toujours, mais ces octets se répètent dans chaque document HTML qui l'utilise.
Créer un sprite change-t-il l'apparence de mes icônes ?
Non. Le <svg> racine de chaque fichier devient un <symbol> avec le même viewBox, et ses enfants sont repris tels quels, au préfixage des ID près. L'option Optimiser le SVG applique le même jeu de passes sûres que l'Optimiseur SVG : les commentaires, les métadonnées d'éditeur et les attributs redondants disparaissent, la géométrie reste. L'option Normaliser le viewBox recentre chaque icône dans une boîte de coordonnées carrée, ce qui change la boîte et non le dessin. Les éléments <script> et les attributs on* sont toujours supprimés, car un sprite finit intégré dans votre page.