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.
Tabla de contenidos
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.