Blog personal de Helmer Galvis

Razones para usar SVG en nuestros diseños

Artículo publicado el Sábado, Marzo 23, 2013. Guardado en la categoría: Diseño web

SVG es un formato de imagen para gráficos vectoriales. Literalmente significa Scalable Vector Graphics. Es el formato con el que trabajan los editores de imagen en vector como Illustrator, Freehand, Inkscape o Corel Draw. Gracias a los nuevos estándares y navegadores modernos se puede utilizar SVG en la web con bastante facilidad.

Para los que trabajamos con editores de vector desde hace años, este nuevo formato de “imagen” nos resulta bastante cómodo para construir la web. Si desconocías este formato o no habías trabajado con el en la web te daré algunas razones por la que su uso es bastante positivo.

Escalable
SVG es escalable. Al ser un gráfico vectorial, este no tiene problemas de pixelado al contraer o expandir. Es una de las mejores opciones para que los gráficos de tu web sea vean perfectamente en cualquier tipo de pantalla. Incluso en las de alta resolución como las retina de algunos productos de Apple.

Interactivo
Es un formato al que mediante CSS o Javascript podemos variar colores, tamaños, posiciones, etc. Da más opciones en cuanto transformaciones que los típicos PNG, JPG o GIF. Por ejemplo podemos darle color al borde de un circulo y otro color al relleno o dos objetos en una imagen, tal como se hace este ejemplo.

Liviano
Por lo general los archivos vectoriales son poco pesados. El logo de nuestra web puede estar perfectamente en formato SVG y podemos ahorrarnos un 50% del peso que si estuviera en PNG o JPG.

Formas de uso
Se puede usar de muchas maneras. En línea con la etiqueta , con la etiqueta para poder sacarle más partido a los graficos. Directamente desde CSS, con PHP, etc.

SVG no es compatible, como era de esperar, con todos los navegadores. Pero como suele ser habitual, tenemos manera de solucionar eso como con Modernizr o “hacks” en este caso, con javascript.

Modernizr

if (!Modernizr.svg) {
$(".logo img").attr("src", "images/logo.png");
}

javascript

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

Puedes ver la compatibilidad de SVG con los navegadores más usados. Si quieres saber más sobre el uso de SVG, te recomiendo este artículo de CSS Tricks.