# Générateur de sprite sheet SVG Téléversez jusqu'à 30 icônes SVG et fusionnez-les en une seule sprite sheet : mode pour en ligne, mode pour fragments de fichier externe. Normalise le viewBox (déduit de width/height), déduplique les icônes, peut retirer fill/stroke pour currentColor, nettoie toujours et attributs on\*, et génère les snippets HTML / React / Vue / CSS avec aperçu en direct de chaque icône. > Page canonique: https://elysiatools.com/fr/tools/svg-sprite-generator - **Catégorie:** Media - **Mots-clés:** sprite svg, feuille de sprites, svg symbol, jeu d'icônes, élément use ## Présentation Règles de fusion : chaque \`\` reçoit le contenu interne du \`\` d'origine (sans l'élément racine) ; si le viewBox manque il est déduit de width/height sous la forme 0 0 W H ; le mode \`\` émet en plus un \`\` pour les références externes (\`\`). Les ID sont nettoyés depuis le nom de fichier (caractères hors \[A-Za-z0-9\_-\] → « - », préfixe i- si chiffre initial, plus le préfixe utilisateur), suffixe -2 en cas de collision. Déduplication par hachage de viewBox + contenu à espaces compressés. Sécurité : \`\` et attributs on\* toujours supprimés. ## Entrées - **Fichiers SVG (jusqu'à 30)** (file): Select up to 30 .svg icon files - **Type de sprite** (select) - **Préfixe d'ID** (text): e.g. icon- - **Supprimer fill/stroke (pour currentColor)** (checkbox) - **Dédupliquer les icônes identiques** (checkbox) ## Quand l'utiliser - Quand vous devez regrouper plusieurs icônes SVG en un seul fichier pour réduire les requêtes HTTP. - Quand vous voulez référencer des icônes via en ligne ou via un fichier sprite externe. - Quand vous avez besoin d'ID nettoyés, d'un viewBox cohérent et de snippets prêts à coller dans HTML, React ou Vue. ## Fonctionnement - Téléversez jusqu'à 30 fichiers SVG (type image/svg+xml). Chaque icône est extraite sans l'élément racine . - Choisissez le type de sprite (symbol ou view), un préfixe d'ID optionnel, et activez éventuellement la suppression de fill/stroke ou la déduplication. - Le viewBox manquant est déduit de width/height (0 0 W H). Les ID sont nettoyés depuis le nom de fichier ; les doublons sont détectés par hachage. - Le résultat affiche la source de la sprite, l'aperçu de chaque icône et les snippets d'utilisation HTML / React / Vue / CSS. ## Cas d'usage - Constituer un jeu d'icônes unique pour un site ou une application web. - Préparer une sprite externe réutilisable via . - Obtenir rapidement les extraits HTML, React, Vue et CSS pour chaque icône. ## Questions fréquentes ### Combien de fichiers SVG puis-je fusionner ? Jusqu'à 30 fichiers SVG, chacun limité à 2 Mo. ### Quelle est la différence entre les modes symbol et view ? Symbol émet des pour en ligne. View émet des et pour des références externes du type . ### Comment les ID des icônes sont-ils générés ? À partir du nom de fichier : caractères hors [A-Za-z0-9_-] remplacés par -, préfixe i- si le nom commence par un chiffre, plus votre préfixe. Un suffixe -2 est ajouté en cas de collision. ### Que fait l'option « Supprimer fill/stroke » ? Elle retire les attributs fill et stroke pour que les icônes héritent de currentColor. ### Les scripts et événements sont-ils conservés ? Non. Les éléments et les attributs on\* sont toujours supprimés. ## Outils associés - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Fragments En-tête/Pied PDF](https://elysiatools.com/fr/tools/pdf-header-footer-snippets): Convertit HTML en PDF avec des fragments logo, titre et date - [Generateur de Favicon SVG](https://elysiatools.com/fr/tools/svg-favicon-generator): Transforme un logo SVG ou raster en pack favicon complet avec ICO, variantes PNG, icone Apple Touch et web manifest - [Convertisseur SVG vers JPG](https://elysiatools.com/fr/tools/svg-to-jpg): Convertir les graphiques vectoriels SVG au format raster JPG avec des options personnalisables de résolution, qualité et fond - [SVG vers PDF](https://elysiatools.com/fr/tools/svg-to-pdf): Convertir les graphiques vectoriels SVG en documents PDF pour impression et partage - [Convertisseur SVG vers PNG](https://elysiatools.com/fr/tools/svg-to-png): Convertir les graphiques vectoriels SVG au format raster PNG avec des options personnalisables de résolution, qualité et transparence - [Convertisseur SVG vers WebP](https://elysiatools.com/fr/tools/svg-to-webp): Convertir les graphiques vectoriels SVG au format raster WebP avec compression moderne et support de transparence - [Verificateur d accessibilite](https://elysiatools.com/fr/tools/accessibility-checker): Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes ## Exemples - [Echantillons XML](https://elysiatools.com/fr/samples/xml-viewer-samples): Fichiers d exemple pour la visionneuse XML dans le navigateur - [Exemples XML](https://elysiatools.com/fr/samples/xml-samples): Exemples de format XML (eXtensible Markup Language) de structures simples à complexes - [Exemples SVG](https://elysiatools.com/fr/samples/svg-samples): Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG - [Échantillons SVG](https://elysiatools.com/fr/samples/svg-viewer-samples): Graphiques vectoriels d'exemple pour la visionneuse SVG ## Contenu associé - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils XML de conversion, mapping et XPath](https://elysiatools.com/fr/hubs/xml-convert): Des outils reunis pour conversion XML, mapping, fusion et extraction XPath dans un seul hub. - [Outils d’extraction, de nettoyage et d’export HTML vers Markdown/PDF](https://elysiatools.com/fr/hubs/html-convert): Comparez les outils de nettoyage HTML, d’extraction d’attributs, d’extraction d’images, de conversion HTML vers Markdown et HTML vers PDF dans un hub unique pour les workflows de conversion web. - [Outils de nettoyage, finition et preparation d images en lot](https://elysiatools.com/fr/hubs/image-utility): Regroupe dans un meme hub les outils de nettoyage d image, rognage, marge, encadrement, redimensionnement et compression par lot, filigrane et finition visuelle.