Générateur de sprite SVG
Regroupez de nombreuses icônes SVG dans un seul fichier sprite. Chargez-le une fois et affichez n’importe quelle icône avec une courte balise use.
Les fichiers convertis s’affichent ici. Déposez des fichiers SVG ci-dessus, ou essayez avec des icônes d’exemple.
Comment créer un sprite SVG
- Déposez vos icônes SVGAjoutez des fichiers, un dossier, ou collez du code SVG.
- Réglez le préfixe d’idChaque icône devient un symbol nommé d’après son fichier, par exemple icon-rocket.
- Téléchargez sprite.svgMettez-le en ligne et affichez les icônes avec le code use.
Autres outils gratuits
Tous les outils- SVG en PNGDes PNG nets à toutes les tailles, un fichier ou des centaines.
- PNG en SVGVectorisez un PNG ou un JPG en un vecteur propre.
- PNG en ICODes fichiers .ico de favicon de 16 à 256 px.
- Favicon et icônes d’appJeux pour site web, Chrome, iOS et Android.
- SVG en ReactDes composants JSX typés, prêts à coller.
- Optimiseur SVGDes SVG plus légers sans perte visible.
- Sprite SVGPlusieurs icônes dans un seul sprite.svg.
- Créateur de stickersDes stickers pour WhatsApp et Telegram.
Questions
Pourquoi utiliser un sprite SVG ?
Le navigateur charge un seul fichier pour toutes vos icônes et le garde en cache. Chaque icône de la page tient en une ligne au lieu d’un SVG complet.
Comment afficher une icône du sprite ?
Ajoutez un élément svg contenant un élément use dont le href pointe vers le sprite et l’id de l’icône, par exemple /sprite.svg#icon-rocket.
Puis-je changer la couleur en CSS ?
Oui. Les icônes d’une couleur utilisent currentColor : elles prennent la couleur du texte autour.
Les dégradés fonctionnent-ils toujours ?
Oui. Les ids de chaque icône sont préfixés par l’id de son symbol, si bien que dégradés et masques ne se mélangent jamais.