Réparer la viewBox d'un SVG
Ajoute la viewBox manquante depuis width et height pour que le SVG s'adapte enfin – dans le navigateur.
Fonctionne dans votre navigateur – le fichier n'est jamais envoyé
Questions fréquentes
Mon fichier est-il envoyé ?
Non. La conversion se fait entièrement dans votre navigateur. Le fichier ne quitte jamais votre appareil – aucun serveur ne peut le voir. Une fois la page chargée, l'outil fonctionne même hors ligne.
À quoi sert la viewBox, et pourquoi manque-t-elle ?
La viewBox indique au navigateur quelle partie du dessin le fichier montre et permet au SVG de s'adapter à n'importe quelle taille. Certains exportateurs n'écrivent que width et height ; un tel fichier s'affiche alors toujours à cette taille fixe – une icône de 24 px reste à 24 px quelle que soit la taille demandée, ou se retrouve rognée. Une viewBox cohérente avec width et height corrige cela sans modifier le dessin.
Qu'est-ce qui est modifié exactement ?
Seule la balise racine <svg> : une viewBox est ajoutée si elle manque, ou réécrite si elle est malformée (mauvais nombre de valeurs, taille nulle ou négative). width et height en pt, mm, cm ou in sont convertis en pixels à 96 dpi, comme le définit le CSS. Tout le reste du fichier reste identique octet pour octet – une viewBox valide n'est jamais touchée.
Quand supprimer width et height ?
Quand le SVG doit s'adapter à son conteneur : icônes en ligne, logos responsives, arrière-plans CSS. Sans width et height, le navigateur suit les dimensions du CSS ou de la balise <img> en conservant les proportions de la viewBox. Gardez-les pour un fichier qui doit avoir une taille naturelle fixe, comme un export pour l'impression.
Pourquoi la taille est-elle dite inconnue ?
width et height en pourcentage, em ou ex dépendent du contexte ; aucune taille en pixels ne peut en être déduite. Ouvrez le fichier dans votre éditeur, définissez une taille absolue (par exemple 64 × 48 px) et réessayez.
Outils similaires
Optimiser un SVG
Réduit les fichiers SVG sans changer leur apparence – dans le navigateur.
● Dans le navigateur
Remplacer des couleurs dans un SVG
Remplace une couleur par une autre dans tout le SVG – remplissages, contours, dégradés et styles – dans le navigateur.
● Dans le navigateur
Convertir SVG en data URI
Transforme un SVG en URL data: compacte pour le CSS et le HTML – dans votre navigateur, sans envoi.
● Dans le navigateur
Convertir SVG en arrière-plan CSS
Écrit une règle CSS prête à coller avec le SVG intégré en arrière-plan ou en masque – dans le navigateur.
● Dans le navigateur
Fusionner des fichiers SVG
Combine plusieurs SVG en un seul – côte à côte, empilés ou en sprite d'icônes – dans le navigateur.
● Dans le navigateur