El elemento image
Podemos utilizar imágenes en SVG de la misma manera en que utilizamos un rectángulo, o sea: especificando tanto las coordenadas x e y de la esquina izquierda arriba, como la anchura ( width ) y altura ( height ) de la imagen. Para esto utilizamos el elemento <image>
Algunos atributos: x, y, width, height, xlink:href o href, preserveAspectRatio
La anchura width y la altura height
En SVG es importante especificar la anchura (width) y la altura (height) de las imagenes. Si no especificados estos atributos toman por defecto el valor 0 y la imagen no aparece. Observación: Hay algunos navegadores donde es posible especificar solo la anchura de la imagen, la altura siendo calculada respectando las proporciones.
Coordenadas x e y
Las imagenes SVG pueden ser posicionadas utilizando los atributos x e *y. Si no especificados, estos atributos toman el valor por defecto: x="0" y="0". También podemos posicionar una imagen con transformaciones.
El atributo xlink:href o href
El atributo xlink:href indica el URL o la fuente de la imagen que queremos enlazar. En SVG2 ya no es necesario utilizar el espacio de nombres xlink así que, en navegadores modernos, podemos utilizar solo href.
El atributo preserveAspectRatio
El atributo preserveAspectRatio decide como redimensionar la imagen si la anchura y la altura del elemento <image> no respectan las proporciones del archivo de imagen.
Lea más acerca del atributo preserveAspectRatio
See the Pen 8739185db30a55b4128b88c943d307b1 by Gabi (@enxaneta) on CodePen.
Utilizar imágenes como relleno de trazados
Hay varias maneras de utilizar imágenes como relleno de trazados:
1. Utilizar el trazado como trazado de recorte <clipPath> y recortar la imagen con este trazado.
2. Utilizar la imagen como patrón de relleno.
Recortar la imagen con <clipPath>
Supongamos que quiero utilizar una imagen como relleno de un trazado representando un grano de café. Para esto voy a transformar el grano de café en un trazado de recorte:
<clipPath id="clip"> <path id="cafe" d="..." /> </clipPath>
Y voy a recortar la imagen utilizando este trazado de recorte.
<image clip-path="url(#clip)" xlink:href="cafe.jpg" width="480" height="533"/>
Es importante utilizar un trazado cuya caja delimitadora (bounding box) es más pequeña que la imagen que queremos recortar
See the Pen Imagenes recortadas con clipPath**** by Gabi (@enxaneta) on CodePen.
Utilizar la imagen como patrón de relleno
Primero necesito saber el tamaño del trazado svg. Para esto en javascript voy a utilizar el método getBBox() para conseguir la anchura y la altura del trazado y voy a utilizar el más grande de los dos como anchura de la imagen. Es importante que la imagen sea más grande que el trazado para que no queden espacios en blanco.
<image xlink:href="café.jpg" width="448" />
La anchura y la altura del patrón es width="1" height="1". Alternativamente podría haber utilizado porcentajes: width="100%" height="100%" Esto quiere decir que el patrón cubre todo el trazado.
<pattern id="img" width="1" height="1"> <image xlink:href="café.jpg" width="448" /> </pattern>
Finalmente puedo utilizar el patrón como valor del atributo fill del trazado #cafe.
See the Pen Imagenes como patrones de relleno en svg**** by Gabi (@enxaneta) on CodePen.