Vecteur SVG (.svg)
Recommandation StandardScalable Vector Graphics (SVG) est un format d'image vectorielle basé sur XML destiné aux graphiques en deux dimensions et prenant en charge l'interactivité, les feuilles de style CSS et l'animation.
Convertir SVG en PNG
Outil de conversion gratuit de SVG vers PNG dans le navigateur. Convertissez des fichiers instantanément sur votre appareil.
Compresser des fichiers SVG en ligne
Privé - les fichiers ne quittent jamais votre appareil
Inspection et métadonnées
Les systèmes d'exploitation et les analyseurs de fichiers identifient les fichiers SVG en inspectant leur séquence initiale d'octets binaires :
Signature d'en-tête au niveau des octets (octets magiques)
Les systèmes d'exploitation et les analyseurs de fichiers identifient les fichiers SVG en inspectant leur séquence initiale d'octets binaires :
SIGNATURE HEXADÉCIMALE (DÉCALAGE 0) :
3C 73 76 67REPRÉSENTATION ASCII : <svg
Normalisation : Recommandation du W3C (SVG 1.1 / SVG 2)
Spécifications techniques
| Architecture de conteneur | Document de balisage textuel basé sur XML définissant une géométrie vectorielle 2D |
| Compression | Compression de texte Gzip / Brotli (SVGZ utilise la compression gzip) |
| Ordre des octets | Non applicable (flux de caractères textuel UTF-8 / UTF-16) |
| Espaces colorimétriques | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Canaux et structure | Formes vectorielles à résolution illimitée, courbes de Bézier, typographie et masques d’opacité |
| Dimensions maximales | Indépendant de la résolution (s'adapte indéfiniment à n'importe quelle zone d'affichage sans pixellisation) |
| Transparence | Transparence alpha entièrement variable et modes de fusion CSS |
| Prise en charge du traitement en continu | L’analyseur XML du navigateur peut traiter le document au fil de sa réception. |
Matrice de comparaison technique : SVG face aux concurrents
| Attribut technique | SVG (Actuel) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Modèle de rendu | DOM vectoriel en mode conservé | Canevas bitmap en mode immédiat | Conteneur de page fixe en mode conservé | Grille de pixels matriciels |
| Mise en forme et CSS | Entièrement personnalisable via des classes et des variables CSS | Nécessite des redessins via l'API canvas JavaScript | Aucun style CSS dynamique | Pixels matriciels fixes |
| Évolutivité infinie | Oui (courbes vectorielles mathématiques) | Nécessite une mise à l'échelle manuelle de la résolution | Oui (éléments vectoriels) | Non (pixellisation en cas d'agrandissement) |
| Interactivité | Événements DOM natifs (survol, clic, animations) | Nécessite des calculs de détection de collision manuels | Document statique | Nécessite une carte d'image ou un canevas |
Modes de corruption courants et guide de restauration hexadécimale
Le navigateur affiche une erreur d'analyse XML : jeton non fermé ou balise non correspondante.
Cause initiale: Syntaxe XML malformée, balises fermantes manquantes ou esperluettes non échappées (« & » au lieu de « & »).
Récupération: Validez le fichier avec un outil de vérification XML (xmllint file.svg), puis corrigez les balises déséquilibrées.
Analyse de sécurité et vecteurs d'attaque de l'analyseur
Comme le SVG est un document XML exécutable prenant en charge les balises « <script> » et les entités externes, l’affichage de fichiers non fiables présente des risques importants de XSS et de SSRF.
Vecteurs d’attaque connus
- Script intersite (XSS) stocké dans des balises « <script> » intégrées ou des gestionnaires d’événement « onload= ».
- Attaques par entités externes XML (XXE) lisant des fichiers de serveur locaux lors d'une analyse sur des serveurs back-end.
- L’expansion d’entités XML « Billion Laughs » peut provoquer un déni de service.
Bonnes pratiques de défense: Nettoyez toujours les fichiers SVG avec DOMPurify avant de les intégrer. Sinon, servez-les avec la politique « Content-Security-Policy: default-src 'none' » ou dans des balises « <img> », qui désactivent automatiquement les scripts.
Origines historiques et jalons
Principaux avantages
- Indépendant de la résolution : lignes et typographie restent nettes à toutes les tailles d’affichage ou d’impression.
- Fichiers très légers pour les logos, les icônes et les éléments d’interface.
- Entièrement scriptable et personnalisable via CSS et JavaScript dans le DOM du navigateur.
Limites techniques
- Inadapté aux photographies ou aux images complexes à tons continus.
- Les chemins vectoriels complexes comportant des milliers de nœuds peuvent ralentir le rendu et entraîner une forte consommation du processeur et de la batterie.
- Le format XML autorise l’intégration de scripts ; nettoyez donc rigoureusement les fichiers envoyés par des sources non fiables avant de les afficher.
Faits intéressants
- Le SVG étant du texte XML brut, sa compression avec Gzip (qui produit un fichier .svgz) réduit souvent sa taille de 70 % à 80 %.
- L'attribut viewBox définit un canevas de coordonnées abstrait qui correspond dynamiquement aux pixels de l'écran physique.
- Les premiers navigateurs Web ne disposaient pas de moteur SVG natif. Adobe a alors distribué le module Adobe SVG Viewer, jusqu’à la généralisation de la prise en charge native vers 2011.
Foire aux questions techniques
Les fichiers SVG peuvent-ils contenir du code malveillant ?
Oui. Le SVG étant un document XML valide, il peut contenir du JavaScript intégré (« <script> »), qui s’exécute si le fichier est chargé directement dans un navigateur ou inclus dans un élément « <svg> ». Servir un SVG dans une balise « <img> » neutralise automatiquement l’exécution des scripts.
Quand dois-je utiliser SVG plutôt que PNG ?
Utilisez le format SVG pour les icônes, les logos, les graphiques, les illustrations et la typographie lorsqu'un affichage net à toutes les tailles d'écran et des fichiers de petite taille sont nécessaires. Utilisez PNG ou WebP pour les photographies.
Comment puis-je optimiser des fichiers SVG volumineux ou complexes ?
Vous pouvez nettoyer les chemins vectoriels en supprimant les métadonnées redondantes, les commentaires de l'éditeur (provenant d'Inkscape ou d'Illustrator), les groupes invisibles et les déclarations d'espace de noms inutilisées à l'aide d'outils tels que SVGO ou en exécutant une compression SVG.
Conversions associées à SVG
La conversion de fichiers vectoriels SVG en images matricielles PNG transforme des graphiques vectoriels évolutifs définis par du code en grilles de pixels fixes pour une compatibilité universelle avec les applications.
Intégrez des images matricielles PNG dans un conteneur vectoriel SVG XML pour une mise à l'échelle adaptative sur le web et une intégration dans des mises en page compatibles avec les vecteurs.
Convertissez des enregistrements de dessins vectoriels GDI Windows 16 bits anciens en tracés SVG modernes et redimensionnables, sans perte de résolution.
Convertissez des graphiques Windows Enhanced Metafile 32 bits en vecteurs SVG nets et adaptables pour le web et les logiciels de design.
La conversion d'un dessin DXF au format SVG pour la CAO transforme des données vectorielles d'ingénierie complexes en graphiques XML légers pour navigateurs web et éditeurs vectoriels.
La conversion des graphiques vectoriels évolutifs (SVG) au format d’échange DXF transforme des illustrations destinées au Web en coordonnées mathématiques précises utilisables par les logiciels de CAO.
Partagez un logo ou une illustration SVG sous forme de PDF d'une seule page. Ses tracés vectoriels deviennent une image à résolution fixe, de sorte qu'un zoom ne peut pas récupérer les détails vectoriels.