image/svg+xml

Description

image/svg+xml est le type MIME des fichiers SVG — des images vectorielles décrites en XML. Contrairement aux formats raster (PNG, JPEG), un SVG est entièrement résolution-indépendant : il reste net à toutes les tailles, des icônes de 16px aux bannières de 4K. Les fichiers SVG peuvent être stylisés via CSS et manipulés via JavaScript quand ils sont inline.

Usage en HTML

Via <img> (accès CSS/JS limité) :

<img src="logo.svg" alt="Logo de l'entreprise" width="200" height="60">

Via <object> :

<object data="graphique.svg" type="image/svg+xml" width="400" height="300">
  <img src="graphique.png" alt="Graphique des ventes">
</object>

SVG inline (accès CSS/JS complet) :

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

En-tête HTTP :

Content-Type: image/svg+xml; charset=UTF-8

Notes

SVG inline vs <img src=".svg"> : le SVG inline permet de le styler avec CSS (currentColor, variables CSS) et de l’animer avec JavaScript. Via <img>, le CSS externe ne s’applique pas — c’est une image opaque.

Sécurité : les SVG peuvent contenir du JavaScript (<script>) et des références externes. Ne jamais servir un SVG uploadé par un utilisateur avec Content-Type: image/svg+xml sans désinfection — préférer Content-Type: text/plain ou filtrer le SVG.

SVGZ : .svgz est un SVG compressé en gzip. Servir avec Content-Type: image/svg+xml et Content-Encoding: gzip.