Razones para usar SVG en nuestros diseños

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


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.

Publicaciones Similares

Un comentario

  1. si utilizas varias imagenes en svg, igual puedes ocupar el siguiente código para que reemplaze por png, en caso de que no sea compatible con el navegador =)

    if(!Modernizr.svg) {
    $(‘img[src*=»svg»]’).attr(‘src’, function() {
    return $(this).attr(‘src’).replace(‘.svg’, ‘.png’);
    });
    }

    fuente: http://toddmotto.com/mastering-svg-use-for-a-retina-web-fallbacks-with-png-script/

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Helmer Galvis Rojas.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.