SVG Es Para Todos

Bob Marley Vector PortraitSpeaker: Chris Coyier.
Título Original: SVG Is For Everybody.
Evento: An Event Apart, Austin 2014.
Tema: Desarrollo Web.

Con la creciente tendencia a pantallas de alta resolución y una necesidad de utilizar gráficos de mayor calidad que no dañen el performance de un sitio web, Chris Coyier nos invita a echarle un vistazo al formato SVG, que nos provee de gráficos nítidos y responsivamente responsables.

Con su característico sentido del humor, Chris Coyier nos explica qué son los gráficos SVG, cómo crearlos, en qué podemos utilizarlos además de tips, herramientas y fallbacks.


¿Qué son los SVG?

SVG por sus siglas en inglés Scalable Vectorial Graphics es un formato vectorial de imágenes que logra gráficos que se pueden estilizar, animar y sobre todo redimensionar sin perder calidad.

El formato SVG no es nuevo, existe desde 1999 pero no tenía el soporte suficiente. Hoy en día cuenta con el soporte de todos los navegadores y esto los convierte en una importante solución a la hora de cuidar el performance de los sitios web responsivos.

Algo que debemos tomar en cuenta con los SVG es que a la hora de lidiar con dimensiones no debemos pensar en términos de pixeles. A diferencia de los mapas de bits que pueden ser medidos con una altura y una anchura fija, los SVG tienen más bien medidas relativas.

Los SVG tienen un Viewport y viewBox. El viewport es el tamaño del elemento. Por ejemplo la ventana del navegador es el viewport de todo el sitio, pero un iframe tiene su propio viewport. Al igual que un iframe los SVG tienen su viewport propio.

El viewBox es un atributo de <svg> . Es el “canvas” donde las instrucciones de nuestro código se llevan a cabo. El viewBox determina el aspect ratio del SVG.

El siguiente código pertenece al logotipo de twitter que exporté como SVG y después abrí en mi editor. Como pueden ver, la sintaxis es un XML y el gráfico ahora está directamente en el DOM.

<svg width="204px" height="153px" viewBox="0 0 274 223">
    <defs>
        <path id="path-1" d="M0.06,0.822 L273.39,0.822 L273.39,222.94 L0.06,222.94"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="TwitterLogo_#55acee" sketch:type="MSLayerGroup">
            <mask id="mask-2" sketch:name="Clip 2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <g id="Clip-2"></g>
            <path d="M273.39,27.123 C263.331,31.584 252.521,34.599 241.175,35.955 C252.756,29.013 261.649,18.021 265.837,4.924 C255,11.351 242.996,16.019 230.22,18.535 C219.988,7.634 205.411,0.822 189.279,0.822 C158.302,0.822 133.188,25.935 133.188,56.91 C133.188,61.306 133.685,65.587 134.641,69.692 C88.025,67.353 46.696,45.023 19.032,11.089 C14.204,19.373 11.438,29.008 11.438,39.287 C11.438,58.746 21.341,75.914 36.391,85.972 C27.196,85.681 18.548,83.158 10.985,78.957 C10.981,79.191 10.981,79.426 10.981,79.662 C10.981,106.838 30.315,129.508 55.974,134.66 C51.267,135.942 46.312,136.627 41.196,136.627 C37.582,136.627 34.068,136.276 30.644,135.621 C37.781,157.905 58.495,174.121 83.039,174.574 C63.843,189.617 39.658,198.584 13.38,198.584 C8.853,198.584 4.388,198.319 0,197.801 C24.822,213.715 54.305,223 85.98,223 C189.148,223 245.564,137.533 245.564,63.414 C245.564,60.982 245.51,58.563 245.402,56.158 C256.36,48.25 265.87,38.371 273.39,27.123" id="Fill-1" fill="#5D9EC9" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
        </g>
    </g>
</svg>

See the Pen GpKbZW by Natalia de la Selva (@NatyLove) on CodePen.

El viewport y viewBox se encuentran en la primer línea del pen. El viewport en este caso está determinado por width=”204px” height=”153px” y desplegará esas dimensiones en un navegador. Mientras que viewBox=”0 0 274 223″ define el aspect ratio que en este caso es proporcional al del viewport.

Ventajas del SVG

  • Flexible y Nítido: Como es un gráfico vectorial puede redimensionarse sin perder calidad. No importa la resolución de la pantalla, el SVG nos dará siempre una imagen nítida.
  • Accesible: Permite gráficos accesibles de todas las maneras posibles sin utilizar hacks o caer en malas prácticas.
  • Archivos Pequeños: Otra de las grandes ventajas del SVG es que los archivos que se generan no son pesados y por lo tanto el performance del sitio no se ve afectado.
  • Estilizable y Responsivo: SVG permite ser estilizado con CSS y con ello la posibilidad de utilizar media queries para lograr grandes efectos dependiendo del tamaño o resolución de la pantalla. Por ejemplo los íconos responsivos que cambian tanto de estilo como de tamaño.
  • Sistemático: Con SVG podemos definir un set de gráficos dentro de nuestro documento y mandarlos llamar cuando lo ocupemos. Esto nos permite crear un sistema de íconos que podemos utilizar a manera de sprite.
  • Animable: Puede animarse con <animate> (sintaxis de SVG) con CSS o con Javascript.
  • Editable con código: Si así lo quisiéramos, podemos editar el gráfico directamente desde el código, ya que es una sintaxis que puede aprenderse fácilmente.
  • Bien Soportado: Todos los navegadores actuales soportan SVG, así que no hay necesidad de esperar más para comenzar a utilizarlos.

¿Para qué puedo utilizar SVG?

Los SVG no van a reemplazar a los mapas de bits. Así que para imágenes como fotografías seguirá siendo mejor el formato JPEG o PNG. Los SVG funcionan con gráficos vectoriales no limitándose a logotipos ni diseño plano ya que se les puede agregar degradados y otros efectos que den sensación de profundidad.

Mapa de Bits vs Vectores
La imagen de la izquierda no servirá para SVG, así que es mejor mantenerla en formato JPG o PNG. La imagen de la derecha es ideal para usarla como SVG.

¿Cómo creo mis gráficos SVG?

  1. Syntaxis de SVG: La primer forma que Chris Coyier nos sugiere, es la de aprenderse la sintaxis de SVG y generar el gráfico con código desde el editor de texto. El código que genera un gráfico SVG se trata de sólo XML y es algo que puede aprenderse, a diferencia del JPG o del GIF, cuyo código jamás vemos y que para editarlos necesitamos la ayuda de un programa de edición gráfico.
  2. Utiliza un programa gráfico vectorial: Conocer la sintaxis es un plus que nos daría mayor entendimiento sobre SVG, pero no es necesario saberla para trabajar con este tipo de gráficos. También podemos crear nuestro archivo vectorial con algún programa gráfico y guardarlo como .svg.

    Panel para guardar SVG en Ilustrador
    Panel para guardar SVG en Ilustrador
  3. Sitios de Recursos Gráficos: Otra opción es descargar nuestros vectores de algún sitio de recursos gráficos (como iStockphoto o Shutterstock), abrirlo en nuestro programa, editarlo a nuestras necesidades y guardar el archivo como .svg .

Optimizando SVGs

Al igual que con las imágenes tradicionales, los archivos .svg contienen información que no se utiliza y que sólo aumenta su tamaño. Por eso es necesario optimizarlos antes de utilizarlos en nuestro sitio web. Lo que podemos hacer para reducir al máximo el tamaño de nuestros SVG es:

  1. Combinar todo tipo de paths y dejar el vector en una sola y limpia figura. Dejar formas separadas aumenta el tamaño del archivo.
  2. Simplificar al máximo las formas. Algunos programas gráficos (como ilustrador) tienen un filtro o una opción de simplificar que elimina nodos sin que afecte el aspecto visual. Debemos recordar que la mayoría de las veces utilizaremos SVG para íconos pequeños y los detalles no van a apreciarse tan fácilmente. Eliminando nodos y simplificando las formas también reducirá el tamaño del SVG.
  3. Remover elementos ocultos. Es importante borrar cualquier elemento que tengamos invisible, pues al guardar nuestro gráfico como .svg la información de ese elemento oculto se traducirá al código y aumentará el tamaño del archivo innecesariamente.
  4. Remover espacios en blanco. El espacio en blanco también aumenta el tamaño del archivo, por ello es importante mantenerlo al ras.
  5. En Ilustrador es importante desactivar la casilla de “mantener editable” a la hora de guardar el SVG. Si la dejamos activa, se guardarán líneas guía y otros elementos que no servirán absolutamente para nada al usarlos en web y sólo crearán un SVG muy grande.

    Preservar Capacidad de Edición
    Es necesario desactivar la casilla que preserva las capacidades de edición
  6. Además de seguir estas prácticas, también podemos pasar nuestro por un programa que le quite meta data y simplifique el código. Kyle Foster tiene varios videos acerca de cómo optimizar SVG.

¿Cómo utilizo mis SVG?

  • HTML: Después de guardar tu SVG, lo puedes utilizar como una imagen agregándola en el HTML dentro de <img>.
<img src=“clover.svg” alt=“Imagen Vectorial de un trébol”>

  • CSS: Puedes utilizar el SVG como imagen de fondo:
.clover {
    background: url(“clover.svg”);
}

Utilizar SVG como fondo tiene ciertas ventajas en comparación con las imágenes de mapa de bits. La principal, es que podemos dejar de preocuparnos por la calidad de la imagen si la utilizamos con cover, pues tendremos un gráfico nítido a cualquier resolución.

  • Tip: Usando gradientes en IE9
    IE9 no soporta degradados con CSS pero sí soporta SVG. Una manera en la que puedes hacer que un degradado CSS se vea en IE9, es agregándole el degradado al SVG (puede ser con código o desde el programa gráfico), de esta forma IE9 cargará el SVG y con él el degradado.
  • Inline SVG: También puedes poner el código SVG inline. Las ventajas de hacerlo de esta forma son:
    • Los gráficos están directamente en el DOM y por lo tanto capaces de ser controlados por CSS.
    • No es necesario hacer más peticiones al servidor, ya que la imagen se carga con el HTML.
    • Puedes definir una sola vez el código y utilizarlo en otras ocasiones. (SVG sprites)

SVG Sprites

Un sprite es un conjunto de imágenes agrupadas en otra imagen. La idea de los sprites es la de poder utilizar cada imagen individual en nuestra página web por medio de coordenadas sin tener que realizar varias peticiones al servidor.

Actualmente los sprites consisten en imágenes de mapa de bits, pero ya es posible hacerlos con SVG y resulta mejor porque:

  1. Es más sencillo posicionar el ícono de esta forma que con background-position.
  2. Estamos utilizando vectores. Siempre serán nítidos y no pesarán tanto como un JPG, PNG o GIF.
  3. El CSS nos permite tener más control sobre el gráfico (permite utilizar media queries, darle estilos, etc).
  4. Hay fallbacks.

Para crear los sprites con SVG sólo necesitamos:

  1. Colocar nuestro código SVG de manera inline en nuestro documento.
  2. Envolver nuestro gráfico SVG dentro de la etiqueta <g> y darle un id único.
  3. Envolver nuestros elementos en <defs>. La etiqueta <defs> sólo sirve para definir algo, no muestra ni modifica el objeto en el documento.
  4. Agregar un display:none a la etiqueta de <svg>.
  5. Nuestro código quedará más o menos de esta manera:
    <svg style=“display:none;”>
        <defs>
            <g id = “iconoTwitter”>
                <path d="M273.39,27.123 C263.331,31.584 252.521,… ></path>
            <g>
            <g id=“iconoFacebook”>
                <path d="M273.39, 39.287 C11.438,58.746 21.341,75.914 36.391,…></path>
            <g>
        </defs>
    </svg>
    
  6. Una vez que se ha definido el código en alguna parte del documento, ya está listo para que accedamos a las imágenes según las necesitemos:
    <svg viewBox=“0 0 100 25” class=“icono”>
    <use xlink:href=“#iconoTwitter”></use>
    </svg>
    
  • Dentro de la etiqueta <use> es donde se coloca el id único que se le dio al icono svg.
  • Más información en Icon System with SVG Sprites.

SVGs VS Icon Fonts

Los Icon Fonts consisten en una tipografía especial, en la que en lugar de caracteres aparece un ícono. Al igual que un SVG Sprite, los Icon Fonts se utilizan cuando requerimos de un sistema de íconos en nuestra página web.

Ambas técnicas se utilizan para lograr lo mismo: Archivos pequeños que nos den íconos nítidos en cualquier pantalla. Sin embargo, Chris Coyier nos ofrece una comparación de las ventajas de utilizar SVG en vez de Icon Fonts, convenciéndonos de por qué debemos optar por mejor crear un sprite de SVG y dejar los Icon Fonts de lado:

  • Calidad: La primera es la calidad del gráfico. Aunque ambos son vectores, las fuentes van a verse afectadas por el anti-alias que le aplique cada navegador. Por lo tanto, si usamos Icon Fonts, es posible que no se vean nítidos en algunas pantallas.
  • Control con CSS: Los SVGs te permiten agregarle muchos estilos y atributos (como media queries, bordes, transiciones, etc) a diferencia de un IconFont al que sólo puedes cambiar de color y tamaño.
  • Posicionamiento: El posicionamiento a través de fuentes es un dolor de cabeza. El problema es que las fuentes se ven afectadas por interlineados, espacios entre caracteres, anti-alias, kerning, que son distintos en cada navegador.
  • Semántica: La semántica se ve beneficiada con SVG sprites, pues se trata de una imagen a la que le das su atributo y descripción. Sin embargo, un ícono con fuentes se trata de un caracter extraño que no se puede leer y sólo tiene significado visual.
  • Fácil de usar: Ambos son sencillos de aprender a usar y de implementar.
  • Soporte: Este es el único aspecto en el que los Icon Fonts le ganan al SVG, pues tiene soporte con navegadores más viejos. Aún así hay muchos fallbacks que se pueden utilizar para poder implementar SVG sprites en navegadores viejos.

Fallbacks

Si por algún motivo tienes que darle soporte a navegadores viejos (como versiones anteriores a IE9 o a Android 2), Chris Coyier nos ofrece unos cuantos fallbacks:

  1. No depender tanto del SVG. El primer fallback es no utilizar ningún fallback. Es una buena práctica diseñar nuestro sitio sin depender en exceso de algún elemento. Si el SVG se utiliza sólo para resaltar algunos elementos, no afectará de manera dramática si el navegador no lo soporta.
  2. SVGeezy: Es un plugin de Javascript que detecta los SVG de un sitio y los reemplaza por un PNG si el navegador no soporta el formato. El problema con este fallback es que el navegador viejo carga ambos archivos, el PNG y el SVG.
  3. PictureFill: Es una buena alternativa para no castigar a los navegadores viejos con el fallback anterior. Con PictureFill necesitaríamos guardar diferentes archivos (SVGs, JPGs en diferentes tamaños y resoluciones) y utilizarlos sólo cuando las condiciones que le indiquemos se cumplan.
  4. Fondos con SVG: El fallback para los SVG que utilizamos como fondo, es utilizar fondos múltiples con CSS. De esta forma, si el navegador no soporta el SVG cargaría el otro fondo que le asignemos.

Herramientas

  • Programas de Edición Vectorial: Ilustrador (USD $19.99 al mes ), Sketch (USD $79.99), WebCode (USD $39.99), iDraw (USD $24.99), Inkscape (gratuito).
  • SVGO: Es un optimizador de SVGs que simplifica el código, se deshace del meta data y otra información que no se necesita.
  • IconMoon: No sólo te permite descargar íconos que necesites de su galería, sino que también puedes subir tus propios archivos y administrarlos para tu proyecto.

El potencial de SVG

SVG nos ofrece un amplio mundo de posibilidades. Desde sistemas de íconos a animaciones, filtros, interactividad y la lista sigue creciendo. El tema de los SVG es demasiado amplio pero afortunadamente ya hay mucha gente que está explorando lo que se puede hacer con ellos y compartiendo sus hallazgos. Nosotros por nuestra parte, no tenemos pretexto para no seguirlos usando.