SVG Sprite & <symbol> Generator

Guide de Développement : Générateur de Sprites SVG & Paquets de <symbol>

Regroupez plusieurs icônes SVG dans une feuille de sprites SVG <symbol> unique avec identifiants propres, viewBox préservé et extraits HTML.

Presets:
Sprite Options:
Id prefix label:
8 Symbols Parsed
Input label8 icons
Lines: 47•Chars: 2,750•Size: 2.7 KB
8 Icons Parsed
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
      <polyline points="9 22 9 12 15 12 15 22"/>
  </symbol>

  <symbol id="icon-search" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="8"/>
      <path d="m21 21-4.3-4.3"/>
  </symbol>

  <symbol id="icon-bell" viewBox="0 0 24 24">
    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
  </symbol>

  <symbol id="icon-settings" viewBox="0 0 24 24">
    <circle cx="12" cy="12" r="3"/>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
  </symbol>

  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
      <circle cx="12" cy="7" r="4"/>
  </symbol>

  <symbol id="icon-check" viewBox="0 0 24 24">
    <polyline points="20 6 9 17 4 12"/>
  </symbol>

  <symbol id="icon-arrow-right" viewBox="0 0 24 24">
    <line x1="5" y1="12" x2="19" y2="12"/>
      <polyline points="12 5 19 12 12 19"/>
  </symbol>

  <symbol id="icon-menu" viewBox="0 0 24 24">
    <line x1="4" y1="12" x2="20" y2="12"/>
      <line x1="4" y1="6" x2="20" y2="6"/>
      <line x1="4" y1="18" x2="20" y2="18"/>
  </symbol>
</svg>
Bundle: 1.9 KB•Symbols: 8(-21% overhead)
HTTP: 1 Request vs 8
Stats card1
8Vector Assets Ready

Preserves exact SVG viewBox matrices and scales smoothly across any DPI.

Stats card2
100%Consolidated

1 shared sprite bundle instead of 8 separate network roundtrips.

Stats card3
1.9 KBOptimized Sprite

Eliminates XML declarations and metadata overhead from individual SVG files.

Client-Side Processing

High-performance processing executed entirely in browser memory.

Zero Server Upload Privacy

All data payloads remain strictly local with zero external server communication.

Production Ready Export

Clean, optimized output formats ready for immediate deployment.

Référence technique et guide d'architecture

Guide de Développement : Générateur de Sprites SVG & Paquets de <symbol> — Guide de référence

Regroupez plusieurs icônes SVG dans une feuille de sprites SVG <symbol> unique avec identifiants propres, viewBox préservé et extraits HTML.

Paramètres clés et contrôles

Préfixe d'ID (ID Prefix)string

Préfixe ajouté au début de chaque ID de <symbol> généré (ex. : 'icon-') afin de prévenir les collisions d'identifiants dans le DOM.

Par défaut : icon-
Normalisation currentColorboolean

Remplace les couleurs fixes dans les attributs fill et stroke par 'currentColor' pour hériter dynamiquement de la couleur CSS du texte.

Par défaut : false
Mode Sprite Masqué (Inline Sprite)boolean

Configure la balise racine <svg> avec style='display: none;' pour une intégration directe dans le document HTML sans impact visuel.

Par défaut : true
Minification du codeboolean

Supprime les espaces superflus, sauts de ligne, commentaires et déclarations XML pour réduire le poids du bundle au minimum.

Par défaut : false
Auto-synthèse de viewBoxboolean

Génère des coordonnées viewBox proportionnelles à partir des attributs width et height si le SVG d'origine en est dépourvu.

Par défaut : true

Conseils de pro et bonnes practices

Zéro requête HTTP supplémentaire grâce à l'intégration inline

Intégrez la feuille de sprites directement dans votre gabarit de mise en page ou dans le <body> du HTML pour afficher vos icônes via <svg><use href='#id'/></svg> instantanément sans appel réseau.

Thématisation dynamique grâce à currentColor

Activez la normalisation currentColor pour vos collections d'icônes monochromes afin de contrôler leur teinte avec des classes CSS comme text-indigo-600 hover:text-indigo-500.

Mise en cache optimale du navigateur avec un sprite externe

Enregistrez le bundle sous /public/sprite.svg et appelez les symboles avec <use href='/sprite.svg#icon-id'/> pour tirer parti du cache HTTP sur l'ensemble de votre site web.

Évitez les collisions d'IDs sur les dégradés et masques

Si vos SVG contiennent des éléments <linearGradient> ou <clipPath>, veillez à préfixer également leurs identifiants internes pour éviter toute altération croisée des styles.

Pièges courants et dépannage

L'icône ne s'affiche pas ou apparaît vide (0x0) avec la balise <use>

Vérifiez que le <symbol> contient un attribut viewBox valide et que l'élément <svg> conteneur définit des dimensions width/height explicites ou des classes CSS (ex. : w-6 h-6).

Erreur de sécurité CORS lors de l'appel d'un sprite SVG externe

Les navigateurs restreignent l'usage de <use href='/sprite.svg#id'> entre domaines distincts. Hébergez le sprite sur la même origine ou configurez les en-têtes 'Access-Control-Allow-Origin: *'.

Les styles CSS fill ou stroke ne modifient pas la couleur de l'icône

Des attributs fill ou stroke codés en dur dans les tracés prévalent sur les règles CSS en cascade. Activez l'option 'Normalisation currentColor' pour corriger ce comportement.

Foire aux questions (FAQ)

Pourquoi privilégier un sprite SVG <symbol> plutôt que des balises <img> ou des polices d'icônes ?▼

Les sprites SVG <symbol> allient la netteté vectorielle et la flexibilité CSS du SVG inline à la performance réseau d'une ressource unique. Contrairement aux polices d'icônes, ils évitent tout effet de clignotement (FOUT), gèrent le multicolore et supportent l'accessibilité ARIA native.

Quelle est la différence entre un sprite inline et un fichier de sprite externe ?▼

Un sprite inline est injecté directement dans le flux HTML et s'affiche sans délai ni requête supplémentaire. Un sprite externe est un fichier .svg autonome stocké sur le serveur, profitant de la mise en cache efficace du navigateur sur toutes les pages du site.

Comment gérer la taille et le redimensionnement réactif des icônes ?▼

Chaque symbole encapsulant son propre viewBox, c'est la balise parente <svg> qui détermine les dimensions réelles. Définissez width et height ou appliquez des classes Tailwind (ex. : w-5 h-5) pour adapter la taille sans déformation.

Le générateur prend-il en charge les icônes SVG multicolores complexes ?▼

Oui. Les tracés multiples, opacités et dégradés colorés sont intégralement préservés. Veillez simplement à désactiver l'option 'Normalisation currentColor' afin de conserver les teintes originales.

Comment intégrer ce sprite dans un projet React, Next.js ou Vue ?▼

Consultez les onglets 'React' ou 'Vue' pour copier un composant réutilisable typé en TypeScript (<Icon name='icon-name' />). Ce composant offre l'autocomplétion sur l'ensemble des IDs de symboles inclus dans le sprite.

Outils et utilitaires connexes

Tous les outils →
Générateur de dégradés CSS interactifdesign

Créateur visuel de dégradés CSS avec points d'arrêt, angles, formes radiales, palettes prédéfinies et export CSS en un clic.

Ouvrir l'outil→
Nettoyeur et minificateur interactif de code SVGdesign

Nettoyez, minifiez et supprimez les métadonnées des graphiques SVG dans le navigateur pour réduire drastiquement la taille du fichier.

Ouvrir l'outil→
Extracteur de palette de couleurs et vérificateur de contrastedesign

Vérificateur de contraste de couleurs accessible WCAG 2.1 et générateur de palettes harmonieuses.

Ouvrir l'outil→
Générateur CSS de Glassmorphismedesign

Créateur moderne d'effet de verre dépoli avec flou d'arrière-plan, transparence et bordures.

Ouvrir l'outil→
Aide-Mémoire des Ratios d'Aspect et Résolutions Vidéodesign

Spécification des proportions d'affichage, simplification PGCD euclidienne, alignement Mod 2/4/8 pour codecs vidéo et CSS aspect-ratio.

Ouvrir l'outil→
Générateur de Favicon & Icônes d'Application Cheatsheetdesign

Aide-mémoire technique complet pour créer des favicons de navigateurs, icônes Apple Touch, manifestes PWA et balises d'intégration HTML.

Ouvrir l'outil→