Hoy en coopademia: Formas de incorporar imágenes en SVG a un proyecto web

Pero primero ¿Qué es un SVG?

SVG es el acrónimo de ‘Scalable Vector Graphics’, en la práctica es utilizado como un etiquetado especial para dibujar vectores, describiendo coordenadas dentro de un lienzo​ que nos permite generar ilustraciones escalables sin pérdida de resolución.

Sus ventajas

Son muy livianas y lo mejor de todo es que los atributos de sus etiquetas son accesibles y manipulables mediante CSS o JS.

¿Cómo incorporar un SVG en tu proyecto web?

Existen diferentes formas que nos van a dar mayor o menor grado de manipulación, por eso la decisión va a estar basada en nuestro propósito las cuales veremos a continuación…

SVG Como imagen en un HTML

Podemos incorporarla como cualquier imagen referenciando un <svg>​ con una etiqueta ​<img>​a través su atributo source​. En este caso la ilustración no será accesible ni manipulable más allá de lo que podemos hacer con una etiqueta <img>​


<img alt="Un" height="48" src="​enlace-a-la-imagen.svg​" width="48" />

SVG como imagen decorativa con CSS

También podemos llamar al <svg>mediante la función ​url() de CSS a través de la propiedad background-image, de esta forma tampoco son manipulables los atributos propios del SVG.

.svg ​{
 ​width: 40rem;
 ​height: 22.5rem;
 ​background-image​:​ url(enlace-a-la-imagen.svg)​;
 ​background-size​:​ cover​;
}

SVG como un sprite de imágenes

Se recomienda cuando tenemos varias imágenes y no queremos perjudicar la performance de la aplicación​ al realizar un alto número de peticiones al servidor para recuperar estos recursos.

Sprite.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<defs> 
<symbol ​id=”avestruz”​ viewBox="0 0 512 512"> 
<circle cx=”10” cy=”10” r=”30” /> 
<path d=”...” /> 
</symbol> 
</defs> 
</svg>

Index.html

 <svg width=”48” height=”48”>
 <use ​xlink:href=”enlace-al-recurso/sprite.svg#avestruz”
 />
 </svg>

# SVG en línea

Si queremos manipular el SVG por CSS o JS esta es la que más control nos da, ya que todas las etiquetas y atributos propios que conforman la etiqueta SVG quedan accesibles.

Index.html


<svg width="300" height="300" viewbox="0 0 300 300">
 <circle cx="150" cy="150" r="100"></circle>
</svg>

Styles.css

circle​ ​{ ​
 transition​:​ fill 250ms​;
}
svg:hovercircle​ ​{ ​
 fill​:​ #f06​; 
}

¿Sabías estos beneficios?

¡Hasta la próxima!

Links

  • https://www.boream.com/insights/como-animar-un-svg-con-css