Elemento de imagen <image> en SVG

El elemento <image> de SVG se utiliza para incrustar imágenes bitmap dentro de la imagen SVG. De esta manera, se puede dibujar encima o al lado de la imagen bitmap. Los programas de conversión de formato de imágenes SVG admiten formatos JPEG y PNG; en SVG, el elemento image también puede incrustar cualquier imagen raster. En las imágenes raster, se pueden aplicar filtros, máscaras, rotación, recorte y todas las otras herramientas de SVG.

Ejemplo de imagen SVG

Este es un ejemplo de imagen 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>

Efecto de la imagen después de ejecutar:

Primero, dibuje un rectángulo negro. Luego, mi logotipo se dibuja como imagen en la parte superior del rectángulo negro. Finalmente, se dibujó una línea blanca en la parte superior de mi imagen y del rectángulo negro.

El orden en que se enumeran los elementos SVG en el archivo es el orden en que se dibujan. El elemento siguiente se dibuja sobre el elemento anterior.

También puedes usar el elemento <image> para incrustar otras imágenes SVG. No tiene que ser una imagen de mapa de bits.

Ejemplo de rotación de imagen:

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

Explicación del uso:

• width y height definen el ancho y la altura de la imagen.

• xlink：href define el enlace de la imagen.

El efecto de ejecución final es el siguiente: