Élément d'image <image> SVG

L'élément <image> SVG est utilisé pour intégrer des images bitmap dans l'image SVG. De cette manière, vous pouvez dessiner au-dessus ou à côté de l'image bitmap. Le logiciel de conversion de format d'image SVG prend en charge les formats JPEG, PNG ; dans l'image SVG, l'élément image peut également intégrer n'importe quel image raster. Dans l'image raster, vous pouvez appliquer des filtres SVG, des masques, des rotations, des coupes et tous les autres outils.

Exemple d'image SVG

Voici un exemple d'image SVG :

　　　　<svg　width="500"　height="160">
　　　　　　　　<rect　x="10"　y="10"　height="130"　width="500"　style="fill:　#000000"></rect>
　　　　　　　　<image　x="20"　y="20"　width="300"　height="80"　xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image　x="20"　y="20"　xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line　x1="25"　y1="80"　x2="350"　y2="80"></line>
　　　　</svg>

Effet d'image après exécution :

D'abord, dessinez un rectangle noir. Ensuite, mon logo est dessiné en haut du rectangle noir en tant qu'image. Enfin, une ligne blanche est dessinée au-dessus de mon image et du rectangle noir.

L'ordre des éléments SVG dans le fichier est l'ordre dans lequel ils sont dessinés. L'élément suivant est dessiné au-dessus de l'élément précédent.

Vous pouvez également utiliser l'élément <image> pour intégrer d'autres images SVG. Elle n'a pas besoin d'être une image bitmap.

Exemple de rotation d'image :

<svg　width="500"　height="160">
<image　x="90"　y="-65"　width="100"　height="146"　transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

Explication de l'utilisation:

• width et height définissent la largeur et la hauteur de l'image.

• xlink:href définit le lien de l'image.

Le résultat final du fonctionnement est le suivant: