Qu’est-ce qu’un fichier SVG ? Tout ce qu’il faut savoir sur le format SVG

Un fichier SVG décrit des graphiques en deux dimensions à l’aide d’un balisage basé sur XML. Contrairement aux formats JPEG ou PNG, le SVG est un format vectoriel : il stocke des formes, des tracés, du texte, des dégradés et des transformations plutôt qu’une grille fixe de pixels. Un SVG bien formé peut passer d’une icône à un panneau publicitaire sans devenir flou.

Comment fonctionne le SVG ?

Un document SVG contient des éléments tels que <path>, <circle>, <text> et <image>. Un navigateur ou un moteur de rendu interprète ces instructions à la taille d’affichage demandée. Le CSS peut styliser les éléments, et le SVG peut inclure des liens, des filtres, des animations, des scripts ou des ressources externes.

Cette flexibilité est puissante, mais elle implique que les fichiers SVG téléversés non fiables doivent être traités comme du contenu actif plutôt que comme de simples pixels inoffensifs.

Avantages du SVG

Indépendance de la résolution : reste net à n’importe quelle taille ou densité de pixels.
Ressources géométriques légères : les logos et les icônes peuvent être plus légers que leurs équivalents matriciels.
Structure modifiable : les couleurs, le texte et les formes peuvent être modifiés sans repeindre les pixels.
Contenu accessible : des titres et du texte porteurs de sens peuvent être représentés dans le document.
Animation et mise en forme : s’intègre à la mise en page web et au CSS.

Limites et considérations de sécurité

Le SVG est peu efficace pour les photographies détaillées. Les tracés et effets complexes peuvent aussi être coûteux à rendre. Comme un SVG peut contenir des scripts, des gestionnaires d’événements, des liens et des références externes, n’injectez pas un fichier téléversé non fiable directement dans un document HTML sans l’avoir nettoyé ou rastérisé.

Utilisez PNG, WebP ou AVIF lorsque vous avez besoin d’une image matricielle prévisible ou d’un dérivé sûr pour la diffusion.

Comparaison entre SVG et PNG

Format	Usage idéal	Mise à l’échelle	Modèle de contenu
SVG	Logos, icônes, diagrammes, illustrations	Sans perte à toute taille	Instructions vectorielles XML
PNG	Captures d’écran et pixel art	Rééchantillonnage nécessaire	Pixels matriciels fixes

Comment rastériser des fichiers SVG avec Transloadit

Le Robot 🤖/image/resize peut rendre un SVG téléversé sous forme de PNG prévisible, aux dimensions dont votre produit a besoin :

{
  "steps": {
    ":original": { "robot": "/upload/handle" },
    "png": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "width": 1200,
      "height": 1200,
      "resize_strategy": "fit"
    }
  }
}

FAQ sur le SVG

Le SVG est-il un format d’image ou un format de document ?

C’est un format d’image représenté sous forme de document XML. Cette structure de document explique pourquoi le SVG peut inclure davantage de comportements qu’une image matricielle.

Le SVG peut-il contenir du JavaScript ?

Oui. Le SVG peut contenir du contenu actif : nettoyez ou rastérisez donc les fichiers téléversés avant d’intégrer un SVG non fiable dans une page.

Faut-il convertir les photographies en SVG ?

Non. Le SVG est adapté aux formes et aux illustrations. Utilisez JPEG, WebP ou AVIF pour le contenu photographique.

Qu’est-ce qu’un fichier SVG ? Tout ce qu’il faut savoir sur le format SVG

Comment fonctionne le SVG ?