Contenu SVG incorporé – images, SVG imbriqué et HTML

Le contenu incorporé SVG est du balisage SVG qui référence ou contient du contenu autre que les formes de base, comme une image raster, un autre fichier SVG ou du HTML. Ce sujet est important pour les diagrammes, rapports, badges, infographies, aperçus ou graphiques exportés combinant formes vectorielles, logos, photos, captures d’écran ou blocs de texte formatés.

Réponse rapide : utilisez l’élément SVG <image> pour placer un PNG, JPG, GIF, WebP ou un autre SVG dans un document SVG. Utilisez <foreignObject> lorsque vous devez intégrer du HTML dans SVG. Définissez toujours x, y, width et height, contrôlez l’ajustement avec preserveAspectRatio et vérifiez que les ressources liées restent accessibles lors de l’ouverture, du rendu ou de la conversion.

1<svg width="300" height="180" xmlns="http://www.w3.org/2000/svg">
2  <image href="logo.png" x="20" y="20" width="120" height="120" />
3</svg>

Bases du contenu incorporé SVG

SVG ne se limite pas aux paths, formes et textes. Il peut aussi inclure du contenu provenant d’autres formats. Les deux éléments les plus courants sont :

Élément	Utilisation	Notes importantes
`<image>`	Images raster comme PNG, JPG, GIF, WebP ou autre SVG utilisé comme ressource image	Nécessite `width` et `height`; les fichiers externes doivent être accessibles
`<foreignObject>`	HTML ou autre contenu XML dans une région SVG	Nécessite le namespace correct et peut être limité dans certains moteurs de rendu

Utilisez le contenu incorporé lorsque la source doit rester une image ou un fragment HTML. Ne le confondez pas avec la vectorisation : incorporer un PNG dans SVG conserve des pixels; cela ne transforme pas le PNG en paths. Pour tracer une image raster en vectoriel, consultez Convertir une image en SVG en C# ou Vectoriser des images en Python.

Comment incorporer du contenu dans SVG

Choisissez <image> pour une image raster ou un fichier SVG imbriqué, et <foreignObject> pour du HTML.
Définissez x et y pour placer le contenu dans le système de coordonnées SVG.
Définissez width et height; sans eux, beaucoup de rendus n’affichent rien.
Utilisez href pour un fichier, une URL ou une data URI avec <image>.
Utilisez preserveAspectRatio si la source doit garder ses proportions.
Testez le SVG dans le même contexte que la sortie finale, surtout avant conversion PDF, PNG ou JPG.

Incorporer des images dans SVG

L’élément <image> place une ressource image dans un viewport rectangulaire du système de coordonnées SVG. La ressource peut être une image raster, comme PNG ou JPG, ou un autre fichier SVG utilisé comme image.

Attribut	Rôle
`x`, `y`	Position du viewport de l’image
`width`, `height`	Taille du viewport de l’image; généralement requise
`href`	Chemin, URL ou data URI de la ressource
`preserveAspectRatio`	Contrôle l’ajustement, le recadrage ou l’étirement

L’exemple suivant incorpore une image PNG et un fichier SVG externe dans un SVG parent. Les deux images ont des attributs explicites pour un placement prévisible.

1<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
2  <image href="https://docs.aspose.com/svg/images/svg.png" x="20" y="20" width="180" height="180" />
3  <image href="https://docs.aspose.com/svg/files/shapes.svg"
4         x="250" y="10" width="220" height="220"
5         preserveAspectRatio="xMidYMid meet" />
6  <text x="40" y="250">Embedded PNG image</text>
7  <text x="300" y="250">Embedded SVG image</text>
8</svg>

Le SVG rendu montre deux ressources incorporées : une image PNG à gauche et un fichier SVG à droite.

Images PNG et SVG imbriqué incorporées avec des éléments image SVG

Fichiers externes et images data URI

Un élément <image> peut référencer un fichier externe, une URL distante ou une data URI Base64. Les fichiers externes gardent le SVG plus petit et plus facile à modifier, mais ils doivent rester disponibles. Les data URI rendent le SVG plus autonome, mais peuvent augmenter fortement sa taille et compliquer sa maintenance.

1<image href="data:image/png;base64,..." x="0" y="0" width="200" height="120" />

Ajouter du HTML dans SVG

<foreignObject> permet à SVG de contenir du balisage d’un autre namespace XML. Dans les navigateurs, le cas courant est l’intégration d’un petit fragment HTML, utile pour des libellés formatés, blocs de texte enrichis ou annotations de type interface.

Le contenu HTML racine dans <foreignObject> doit déclarer le namespace XHTML http://www.w3.org/1999/xhtml. Sans ce namespace, le contenu peut ne pas être rendu. Pour un rendu fiable, placez les styles critiques (font-size, font-family, line-height, color) directement sur l’élément XHTML ou utilisez une règle CSS testée dans le moteur cible.

1<svg width="500" height="400" viewBox="0 0 250 200" xmlns="http://www.w3.org/2000/svg">
2  <circle cx="70" cy="70" r="60" fill="red" fill-opacity="0.1" />
3  <foreignObject x="20" y="40" width="210" height="180">
4    <div xmlns="http://www.w3.org/1999/xhtml"
5         style="color:#555; font-family:Arial, sans-serif; font-size:12px; line-height:1.4;">
6      Convert SVG to PNG, PDF, XPS, and major image formats with Aspose.SVG.
7    </div>
8  </foreignObject>
9</svg>

La figure montre un bloc de texte HTML rendu dans une région SVG avec <foreignObject>.

Bloc de texte HTML incorporé dans SVG avec foreignObject

<foreignObject> est puissant, mais moins portable que les formes et textes SVG natifs. Certains workflows d’export, de sécurité ou de rendu serveur peuvent limiter HTML, CSS, scripts ou ressources externes. Si le SVG doit s’afficher partout de façon identique, préférez du texte et des formes SVG purs.

Erreurs courantes et corrections

Problème	Cause	Correction
L’image incorporée n’apparaît pas	`width` ou `height` manque sur `<image>`	Ajoutez des dimensions explicites
L’image disparaît après conversion	Le fichier ou l’URL n’est pas accessible au moteur	Utilisez un chemin accessible, configurez l’accès aux ressources ou une data URI pour une petite image
L’image est étirée	`preserveAspectRatio` manque ou vaut `none`	Utilisez `preserveAspectRatio="xMidYMid meet"`
Le HTML dans `<foreignObject>` est invisible	Namespace XHTML incorrect ou absent	Utilisez `xmlns="http://www.w3.org/1999/xhtml"` sur l’élément HTML racine
La sortie diffère selon les outils	Le support de `<foreignObject>` varie	Utilisez du SVG pur pour une sortie de conversion prévisible
Le fichier SVG devient trop lourd	Grande image raster incorporée en Base64	Gardez les grandes images externes ou optimisez-les

FAQ – contenu SVG incorporé

Puis-je incorporer PNG ou JPG dans SVG ?

Oui. Utilisez <image> avec href, x, y, width et height. L’image reste raster dans le SVG; elle n’est pas convertie en paths.

Puis-je incorporer un autre SVG dans un SVG ?

Oui. Référencez un fichier SVG avec <image href="file.svg"> pour l’afficher comme ressource image. Si vous devez modifier sa structure depuis le document parent, insérez plutôt son balisage en ligne.

SVG peut-il contenir du HTML ?

Oui, via <foreignObject>. Le HTML doit utiliser le namespace XHTML et être testé dans le navigateur ou moteur de rendu cible.

Pourquoi mon image incorporée manque-t-elle en PDF ou PNG ?

Le moteur peut ne pas accéder au fichier, à l’URL, aux polices, au CSS ou au HTML référencés. Utilisez des chemins stables, des data URI pour de petits assets ou configurez l’accès aux ressources avant conversion.

Ressources associées

La spécification SVG 2 Embedded Content définit les ressources incorporées, dont <image> et <foreignObject>.
Formes SVG explique la géométrie de base avant de la combiner avec des images.
Texte SVG couvre le texte SVG natif, plus portable que HTML dans <foreignObject>.
Couleur SVG explique fill, stroke, opacité et valeurs de couleur.
Convertir une image en SVG en C# explique la vectorisation raster, différente de l’incorporation avec <image>.
Convertir SVG en image en C# couvre le rendu de SVG pouvant contenir images, polices, CSS ou ressources liées.

Couleur d'arrière-plan SVG Filtres SVG