Un diagramme SVG a souvent besoin d'un élément qui n'est pas dessiné en vecteur : le logo d'un partenaire fourni en PNG, une capture d'écran, ou une icône déjà existante au format SVG. Redessiner ce visuel à la main, tracé par tracé, serait à la fois long et inutile.
L'élément <image> permet d'intégrer directement ce fichier externe (PNG, JPEG, GIF, WebP, ou même un autre SVG) à l'intérieur du canevas, positionné et redimensionné avec la même précision que n'importe quelle forme vectorielle voisine.
Définition
<image> affiche un fichier bitmap ou un document SVG externe à l'intérieur d'un SVG, référencé par l'attribut href (ou l'ancien xlink:href sur les navigateurs plus anciens). Contrairement à une forme dessinée par des points, il n'est pas construit à partir de coordonnées géométriques mais à partir des pixels ou du contenu du fichier pointé, placé dans un rectangle défini par x, y, width et height.
Attributs principaux
- href : l'URL ou les données en base64 du fichier à afficher.
- x, y, width, height : la zone rectangulaire dans laquelle l'image vient se placer.
- preserveAspectRatio : contrôle le comportement quand les proportions du fichier ne correspondent pas exactement à celles du rectangle
x/y/width/height. Valeur par défautxMidYMid meet: l'image est redimensionnée en conservant ses proportions et centrée, avec un espace vide si nécessaire.xMidYMid sliceremplit tout le rectangle en rognant l'excédent, etnonedéforme l'image pour qu'elle colle exactement au cadre.
Exemple de rendu concret
Un logo bitmap intégré à côté d'un cadre vectoriel dessiné avec un rectangle :
<svg viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="300" height="120" rx="12" fill="#0f172a" />
<image href="logo-partenaire.png" x="20" y="20" width="80" height="80" preserveAspectRatio="xMidYMid meet" />
<text x="120" y="65" fill="#ffffff" font-size="18">Partenaire officiel</text>
</svg>Le logo garde ses proportions d'origine grâce à preserveAspectRatio, même si le rectangle qui l'accueille n'a pas exactement le même ratio que le fichier PNG source.
Différence avec la balise HTML <img>
Les deux affichent une image, mais pas dans le même monde. La balise HTML <img> vit dans le flux normal d'une page web, avec ses propres attributs comme alt, loading ou srcset. <image> vit uniquement à l'intérieur d'un document SVG, positionné par des coordonnées géométriques exactement comme une forme voisine, et peut être transformé, découpé ou animé avec les mêmes outils que le reste du dessin, ce qu'un <img> HTML classique ne permet pas nativement.
| Aspect | <img> en HTML | <image> en SVG |
|---|---|---|
| Contexte | N'importe où dans une page HTML | Uniquement à l'intérieur d'un document SVG |
| Attribut source | src | href |
| Texte alternatif | Attribut alt natif | Passe par un <desc> ou un attribut ARIA |
| Transformations | Nécessite du CSS (transform, clip-path...) | Natif, avec les mêmes attributs que les autres formes |
Piège classique
<image> ne permet pas de modifier ses couleurs ou son contenu depuis le document parent : contrairement à un <use> qui référence un <symbol> interne et reste stylable, le SVG chargé par <image> est traité comme une image aplatie et opaque, exactement comme le serait un PNG.Cas d'usage réel
Dans une interface, <image> sert typiquement à afficher un logo de partenaire ou de paiement à côté d'éléments dessinés en vecteur, à intégrer une capture d'écran dans un schéma explicatif, ou à charger une icône SVG externe complexe sans avoir à recopier tout son balisage dans le document.
FAQ
<image> peut-elle être animée comme le reste du document ?Le rectangle qui la contient peut être déplacé, redimensionné ou animé normalement, mais le contenu interne du fichier SVG chargé reste figé : ses propres formes ne sont pas accessibles depuis le document qui l'intègre.
width et height ?Oui, dans la grande majorité des navigateurs une image sans largeur ni hauteur explicites ne s'affiche tout simplement pas, contrairement à une balise HTML où l'image garde ses dimensions naturelles par défaut.
Oui, l'attribut href accepte une chaîne data URI directement, ce qui évite une requête réseau séparée et garde le SVG entièrement autonome dans un seul fichier, pratique pour un export ou un email.