Las imágenes vectoriales .svg en HTML5

Las imágenes vectoriales .svg en HTML5, están ya estandarizadas por lo que todos los navegadores web lo permiten. El formato SVG se basa en XML, así que en resumidas cuentas un vector es puro código.

El SVG en la etiqueta <img>

Podemos utilizar un .svg en el atributo src

<img src=”star.svg” alt=”estrella svg”>

Si no especificamos una anchura o altura con los atributos width o height, el svg tendrá el tamaño original del archivo .svg

 

Tipos de imágenes en la web

En la web trabajaremos con 2 tipos de imágenes:

  • Imágenes rasterizadas: formadas por un conjunto de puntos llamados pixeles, cada pixel tiene un valor de color. Los formatos de ráster web más populares son : .jpg, .png, .gif
  • Imágenes vectoriales: puntos, líneas , curvas. Se puede ampliar sin perdida de calidad.

 

Ejemplo práctico en Codepen

En este ejemplo, puedes ver perfectamente si amplias, como el .png se pixela y el .svg mantiene totalmente su nitidez

 

 

Ventajas de usar SVG a través de un elemento <img>

  • Son más ligeros que sus equivalentes ráster,
  • Nunca se pixela

 

Desventajas de usar SVG a través de un elemento <img>

  • No puede manipular la imagen con JavaScript.

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.