La balise image de SVG

Ci-dessous deux canevas SVG avec insertion d'images matricielles.

Premier canevas

Le code correspondant:

<svg width = '900' height = '600' style ="background : linear-gradient( 45deg,blue skyblue, white );" > <image xlink:href="../images/jolie_fille.jpg" width="160" height="200" x = '0' y ='0' /> <image xlink:href="../images/jolie_fille.jpg" width="320" height="400" x = '450' y ='300' /> </svg>

La balise image du format SVG permet d'insérer, de positionner et de redimensionner dans un canevas SVG une image matricielle.

Attention il s'agit d'un simple lien entre le canevas et l'image et non pas d'une incorporation (duplication de l'image dans le fichier destination).

Dans ce canevas j'insère deux fois une image matricielle (jolie_fille.jpg) via la balise image.
Sachant que les dimensions d'origine de l'image matricielle sont 480 par 600 remarquez que l'image matricielle est insérée deux fois dans le canevas avec une réduction au 1/3 puis au 2/3.

Si vous visusalisez cette page avec un ordinateur de bureau ou un portable réduisez la fenêtre d'affichage et observez ...
La largeur du canevas s'adapte à la largeur de la fenêtre ; donc la largeur du canevas n'est pas 900 pixels !
En fait je vous mens depuis la première page de ce tuto ! Le code SVG qui je vous indique dans les encarts roses n'est pas tout à fait le code exact. C'est un mensonge pour la bonne cause ; à des fins pédagogiques.
Donc un peu de patience je vais bientôt vous expliquer comment adapter les canevas SVG à tous les écrans.

Deuxième canevas

Le code correspondant:

<svg width ="900" height ="600" style ="background-image :url(../images/route_nuit.jpg); background-size : cover;" > <image xlink:href="../images/auto2.png" x ="100" y ="250" width ="300" height ="150" /> </svg>

Même remarque que précédemment ; le code SVG indiqué n'est pas tout à fait le véritable code ...

Dans le deuxième canevas j'insère en fond une image via la propriété CSS background et une image PNG via la balise image.
L'image de fond s'adapte à la taille du canevas grâce à la propriété background-size.

En effet il n'est pas possible d'insérer une image vectorielle avec la balise image. C'est pour cette raison que j'ai du faire une copie bitmap (matricielle) de auto2.svg.

Syntaxe


Retour menu