Fichiers SVG : ouvrir, créer, modifier et convertir
Un fichier SVG décrit une image vectorielle en XML. Il conserve des tracés, des formes, des remplissages et des contours plutôt qu’une grille de pixels. Les logos, icônes, schémas et illustrations restent donc nets à toutes les tailles.
Définition du SVG
SVG signifie Scalable Vector Graphics. C’est un standard Web ouvert du W3C. PNG conserve des pixels tandis que SVG conserve des instructions de dessin. viewBox définit le repère interne et width et height la taille initiale.
Usages recommandés
Utilisez SVG pour les logos, icônes d’interface, cartes, graphiques, dessins au trait et animations. Les photos et textures conviennent mieux au PNG ou au JPG. Une vectorisation complexe peut aussi produire un fichier plus lourd qu’une image raster optimisée.
Ouvrir un fichier SVG
Faites glisser le fichier dans Chrome, Firefox, Safari ou Edge. Pour inspecter le zoom, le cadrage et viewBox, utilisez SVG Viewer. Inkscape, Illustrator et Figma servent à modifier le dessin ; un éditeur de code permet de lire le XML.
Créer un SVG
Vous pouvez exporter depuis un logiciel vectoriel ou écrire des formes simples :
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" role="img" aria-labelledby="title">
<title id="title">Blue circle and orange square</title>
<circle cx="35" cy="40" r="24" fill="#2563eb" />
<rect x="68" y="18" width="36" height="44" rx="6" fill="#f97316" />
</svg>
Le namespace est requis pour un fichier autonome. Ajoutez un title lorsque l’image transmet une information.
Modifier et convertir
Modifiez les nœuds et les courbes dans un logiciel vectoriel, ou changez directement les couleurs, viewBox et tracés dans le XML. Vérifiez le résultat avec SVG Editor et SVG Viewer. Nettoyez les fichiers tiers avec SVG Sanitizer avant toute insertion.
- SVG to PNG pour une image raster transparente.
- SVG to JPG pour un aperçu sans transparence.
- SVG to PDF pour la relecture et l’impression.
- SVG to Data URI pour CSS ou HTML.
Vérifications avant publication
Contrôlez le rendu, viewBox, les proportions, le cadrage et le contraste. Supprimez les métadonnées inutiles, assainissez les fichiers non fiables et compressez la version finale avec SVG Optimizer. Gardez la source modifiable séparément.
FAQ
SVG est-il meilleur que PNG ?
SVG convient aux formes redimensionnables ; PNG convient mieux aux photos, textures et tailles de pixels fixes.
Peut-on ouvrir un SVG sans logiciel de design ?
Oui, un navigateur ou SVG Viewer suffit pour l’afficher.
Peut-on convertir un PNG en SVG ?
Le tracé crée une approximation faite de chemins. Les dessins simples donnent les meilleurs résultats.
Pourquoi le SVG est-il vide ?
Vérifiez viewBox, le cadrage, l’arrière-plan, les filtres et la syntaxe XML.
Un SVG est-il sûr ?
Traitez tout upload comme du XML non fiable et nettoyez-le avant l’intégration.
Workflow SVGView
Prévisualisez avec SVG Viewer, modifiez avec SVG Editor, nettoyez avec SVG Sanitizer, optimisez avec SVG Optimizer, puis convertissez uniquement si la destination l’exige.