Mixer les médias avec SVG.

Les images.

L'élément 'image' permet d'inclure une image dans un fichier svg. Les types de fichier courament supportés sont .jpg, .png et .gif. De la même manière que 'use', 'image' utilise une URI pour appeler le fichier 'xlink:href="mon_fichier.jpg". Il faudra définir un couple de coordonnées pour placer l'image, x et y et aussi définir sa 'width' et sa 'height'.

<svg width="400px" height="120px" viewBox="0 0 400 120"
	xmlns:xlink="http://www.w3.org/1999/xlink">
	<rect x="150" y="20" width="80" height="80" style="fill: #D16DBA;" />

	<image xlink:href="../images/share/note_petite_taille.png" 
	x="155" y="25" width="70" height="64" />

</svg>
								

Ce qui affiche:


Documents et sources:

#

Keep and Try it ! Dernière mise à jour: 22/10/2020

Tests effectués sous Firefox 61.0.1 et Midori 0.5.11