El elemento image

facebook-svg gplus-svg twitter-svg

Utilizar imágenes en el SVG

En el SVG el elemento <image> es utilizado para insertar imágenes. Utilizamos el elemento <image> casi como a <rect>, o sea: especificamos tanto las coordenadas x e y de la esquina izquierda arriba, como la anchura ( width ) y altura ( height ) de la imagen. También hay que especificar la imagen a insertar, y esto lo hacemos con xlink:href.



  

Las imágenes pueden ser transformadas utilizando el atributo transform. El atributo transform puede tomar como valor una o varias de las funciones de transformación conocidas. ( translate, rotate, scale... )
En el siguiente ejemplo reducimos la imagen a la mitad

transform="scale(.5) rotate(-45)"

y la giramos 45° en el sentido contrario del reloj

transform="scale(.5) rotate(-45)"



  

Insertar archivos .svg

Además de imágenes .jpg o .png también podemos insertar archivos ( imágenes ) .svg




También en el HTML podemos insertar imágenes generadas con <svg>


archivo SVG
archivo SVG