Spritesheet SVG
Générer une feuille de sprite SVG avec une carte JSON
Disposez les icônes SVG sur une grille personnalisée et exportez une feuille de sprites PNG, WebP ou SVG avec une carte de cadre JSON. Contrôlez les colonnes, la taille des cellules, le remplissage, l'espacement, l'alignement, l'échelle et l'ordre de tri.
Aperçu
Aucun aperçu. Ajoutez et sélectionnez des fichiers pour voir les résultats.
Aucun fichier pour le moment. Déposez des fichiers ci-dessus ou cliquez sur SÉLECTIONNER DES FICHIERS.
Qu'est-ce qu'un spritesheet SVG ?
Un spritesheet est une seule image qui regroupe de nombreuses images plus petites sur une grille, avec une carte qui indique où chacune se trouve. Ici les sources sont des fichiers SVG : chacun est dessiné dans sa propre cellule et la feuille finie est exportée en PNG, en WebP ou en un seul canevas SVG.
Ce n'est pas la même chose qu'un sprite de symbole SVG. Un sprite de symbole est un fichier SVG avec un <symbol> par icône que les pages référencent par identifiant avec <use>, de sorte que chaque icône reste un balisage vectoriel et CSS peut toujours la colorer. Une feuille de sprite est un canevas visuel : tout ce qui la consomme découpe les images par coordonnées. Choisissez le sprite de symbole pour les icônes HTML, la feuille de sprites pour le canevas, les sprites d'arrière-plan WebGL ou CSS.
Quand utiliser un spritesheet
Un spritesheet réunit de nombreuses petites images dans un seul fichier : un jeu ou une application ne fait qu'une seule requête et garde toutes les images dans une seule texture. Les moteurs de rendu canvas et WebGL y puisent par rectangle, le CSS le positionne avec background-position, et la carte JSON fournit les coordonnées, si bien que rien n'a besoin d'être mesuré à la main. Utilisez-le dès que la cible travaille en pixels ; si vous voulez des icônes qui se mettent à l'échelle et héritent de la couleur dans du HTML, créez plutôt un sprite de symboles SVG.
Comment créer un spritesheet à partir de fichiers SVG
- 1
Déposez vos fichiers SVG, ou cliquez sur SÉLECTIONNER DES FICHIERS, pour les ajouter à la file. Jusqu'à 40 à la fois.
- 2
Réglez la grille (colonnes, lignes, taille des cellules, padding, espacement), puis l'alignement, l'échelle, le tri et le format de sortie. La feuille est redessinée à mesure que vous les changez.
- 3
Cliquez sur TOUT ENREGISTRER pour télécharger une seule archive ZIP contenant la feuille et sa carte d'images JSON.
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
Dois-je utiliser un spritesheet ou un sprite de symboles SVG ?
Utilisez un sprite de symboles quand les icônes vont dans du HTML : il reste vectoriel, hérite de la propriété CSS color, et chaque icône est référencée par id avec <use>. Utilisez un spritesheet quand quelque chose dessine des pixels à partir de coordonnées, par exemple un jeu canvas ou WebGL, ou un sprite d'arrière-plan CSS. La carte JSON du spritesheet vous donne les x, y, width et height de chaque image.
Que contient la carte JSON ?
Une entrée par icône, avec pour clé le nom du fichier sans son extension, par exemple {"home":{"x":0,"y":0,"width":64,"height":64}}. Le rectangle couvre toute la cellule, padding compris, si bien que dessiner ce rectangle reproduit l'icône exactement là où elle a été placée. Les noms en double reçoivent les suffixes -2 et -3, pour que chaque clé reste unique.
Quelle taille la feuille peut-elle atteindre ?
Le canevas est limité à 16 384 px par côté et à 64 mégapixels au total : 40 icônes dans des cellules de 256 px tiennent largement sous la limite. Au-delà, l'outil indique la taille au lieu d'écrire une image vide. WebP dépend aussi du navigateur : là où il ne peut pas encoder le WebP, vous obtenez une erreur plutôt qu'un PNG portant la mauvaise extension.