Transforme un SVG en data URI à coller dans du CSS ou du HTML sans fichier séparé. Le SVG est d’abord optimisé, puis encodé en URL (généralement le plus court), en Base64 ou intégré à une ligne background-image: url("data:image/svg+xml,…") prête à l’emploi. Idéal pour petites icônes, coches et motifs chargés avec la feuille de style.
Mode d’emploi
- Ouvrez un SVG, déposez-le sur l’aperçu ou collez son code. Un exemple est chargé au départ.
- Optimiser : choisissez le nombre de décimales et les nettoyages. La taille avant et après s’affiche ; copiez le code, une data URI ou une ligne CSS, ou téléchargez le fichier.
- En PNG : indiquez la largeur ou la hauteur (ou touchez 2×, 4×, 1024…), choisissez PNG, JPG ou WebP et un fond, puis téléchargez.
- Vectoriser : déposez un PNG ou un JPG, choisissez le nombre de couleurs et le détail, puis téléchargez le SVG.
- Code : modifiez le balisage et regardez l’aperçu se mettre à jour pendant la saisie.
- L’optimiseur ne modifie jamais la largeur, la hauteur ni le viewBox du SVG, garde les ID utilisés et arrondit les tracés sans dérive. Vérifiez les fichiers complexes dans l’aperçu avant de remplacer l’original.
- Deux décimales suffisent pour la plupart des icônes ; prenez 3 ou 4 pour les grands plans techniques.
- La vectorisation donne les meilleurs résultats sur les logos, icônes et illustrations en aplats. Une photo donne beaucoup de grandes formes ; réduisez les couleurs pour un effet affiche.
- Les fichiers sont traités dans votre navigateur. Les scripts contenus dans un SVG ne sont jamais exécutés ici : les aperçus sont affichés comme des images.
Pourquoi les SVG sont lourds
Les logiciels de dessin exportent bien plus que le dessin : métadonnées de l’éditeur, commentaires, ID et définitions inutilisés, groupes vides, attributs à leur valeur par défaut et coordonnées à six décimales ou plus. Sur une icône courante, ce surplus peut représenter l’essentiel du fichier. L’optimiseur le supprime, arrondit les tracés à la précision choisie et fusionne les groupes inutiles, sans jamais toucher à la largeur, à la hauteur ni au viewBox racine, et en gardant les ID référencés.
Deux décimales suffisent pour la plupart des icônes et logos à l’écran ; les grands plans techniques peuvent en demander trois ou quatre. Comparez toujours l’aperçu avant de remplacer l’original, surtout avec masques, filtres ou polices intégrées.
Vectoriel ou matriciel
Un SVG décrit des formes : il reste net à toute taille et pèse très peu pour icônes, logos et schémas ; pour les photos, mieux vaut JPG, PNG ou WebP. Quand une plateforme exige une image matricielle, comme une icône d’app, un favicon PNG ou une image pour les réseaux, exportez à la taille exacte : un viewBox de 24 × 24 rendu à 1024 px reste net, car le vecteur est redessiné et non étiré. Le JPG ne gère pas la transparence : choisissez une couleur de fond.
Vectorisation et data URI
La vectorisation marche le mieux sur des aplats à peu de couleurs et aux bords nets, comme logos, icônes, signatures et dessins au trait ; une photo devient une multitude de grandes formes. Pour de petites icônes en CSS, une data URI encodée en URL est en général plus courte que le Base64, car le SVG est du texte et le Base64 ajoute environ 33 %.
Questions fréquentes
L’optimisation change-t-elle l’apparence de mon SVG ?
Elle ne devrait pas. L’optimiseur garde le viewBox et les ID référencés et arrondit les coordonnées à la précision choisie. Si un fichier complexe bouge légèrement, augmentez le nombre de décimales et comparez à nouveau.
Comment convertir un SVG en PNG haute résolution ?
Ouvrez le SVG, allez dans Vers PNG et fixez une largeur ou une hauteur, ou touchez 2×, 4× ou une taille comme 1024. L’image est redessinée depuis le vecteur à cette taille, jusqu’à 8192 px, et reste nette.
Peut-on convertir un PNG ou un JPG en vrai SVG vectoriel ?
Oui, par vectorisation : l’outil repère les zones de couleur proche et les transforme en tracés. Logos et icônes à peu de couleurs donnent de bons résultats ; les photos produisent des fichiers lourds à l’aspect postérisé.
Data URI en Base64 ou encodée en URL ?
Pour du SVG, l’encodage URL est en général plus compact et reste lisible, car le Base64 grossit le texte d’environ un tiers. Le Base64 n’est utile que si un outil l’exige.
Puis-je ouvrir ici un SVG d’origine inconnue sans risque ?
Oui. Un SVG peut contenir des scripts, mais les aperçus sont affichés comme images, que le navigateur dessine sans exécuter de script, et rien n’est envoyé.
Le convertisseur garde-t-il la transparence ?
PNG et WebP conservent les zones transparentes, sauf si vous choisissez une couleur de fond. Le JPG ne gère pas la transparence : ces zones sont remplies de blanc ou de la couleur choisie.