Qué es un archivo SVG y cómo hacerlo

Al desarrollar un sitio web fácil de usar es posible encontrarse con ciertos retos; sobre todo con las imágenes si no se visualizan con la resolución necesaria. Es importante hacer énfasis en este elemento, ya que, si la calidad de imagen no es la correcta, tu sitio lucirá menos profesional. Esto aplica tanto para el logotipo, iconos o fotos que se encuentren en tus páginas web.

Este problema puede irse agravando cuando de diseño responsivo se trata. Actualmente, los visitantes ven el contenido de los sitios web en sus dispositivos móviles con mayor regularidad que en su computadora de escritorio. Esto hace vital que todo el contenido, incluyendo tus imágenes, se optimice para cada uno. ¿No sería genial si hubiera un formato digital que hiciera que las imágenes se vieran adecuadamente, sin importar su tamaño?

Por fortuna, ¡sí lo hay! Se llama formato SVG y es perfecto para imágenes no fotográficas en sitios web.

Los SVG son una especie de truco mágico en el diseño de sitios web, ya que no solo generan gráficos nítidos a cualquier escala, sino también están optimizados para motores de búsqueda y pueden programarse. A menudo son más pequeños que otros formatos y son capaces de reproducir animaciones dinámicas.

Como puedes ver, hay mucho por hablar sobre el formato SVG. Por ello, esta guía cubre todos los aspectos básicos que necesitas saber para comenzar a trabajar con él. En este contenido podrás descubrir qué, cuándo y cómo aprovechar los archivos SVG. 

A diferencia de otros formatos de archivo de imagen populares, como png o jpg, el formato SVG almacena imágenes como vectores; es decir, que están formados por puntos, líneas, curvas y formas basadas en fórmulas matemáticas.

¿Qué es un gráfico vectorial y en qué se diferencia del gráfico de trama?

Si en este momento te preguntas qué es exactamente un gráfico vectorial, te lo explicamos a continuación.

Hay una gran variedad de formatos de archivo de imagen en uso en la web actualmente, los cuales podemos dividir en dos categorías: gráficos de trama y gráficos vectoriales.

Como ya lo mencionamos, hay formatos de archivo de imagen más populares que otros, como lo son el PNG y el JPG. Ambos son formatos de gráficos de trama, lo que significa que almacenan información de imagen en una cuadrícula de colores conocida como mapa de bits. Los cuadrados se combinan para formar una imagen coherente, muy parecida a los píxeles de la pantalla de un ordenador.

Los gráficos de trama funcionan bien para imágenes muy detalladas, como fotografías, en donde es necesario especificar el color exacto de cada píxel. Las imágenes rasterizadas tienen una resolución fija, por lo que aumentar su tamaño reduce la calidad de imagen.

Los formatos de gráficos vectoriales como lo son el SVG y el PDF funcionan de manera diferente. Estos formatos almacenan imágenes como un conjunto de puntos y líneas entre puntos. Sabemos que puede sonar confuso, pero justamente las fórmulas matemáticas son las que dictan la ubicación y la forma de estos puntos y líneas, y mantienen sus relaciones espaciales cuando la imagen se amplía o se reduce. Los archivos gráficos vectoriales también almacenan información de color e incluso pueden mostrar texto.

¿Cómo funcionan los archivos SVG ?

Los archivos SVG están escritos en XML, el cual es un lenguaje de marcado utilizado para almacenar y transferir información digital. El código XML en un archivo SVG sirve para especificar todas las formas, colores y texto que componen la imagen.

Te compartimos algunos ejemplos, comenzando por el dibujo de un círculo simple en SVG:

Cuando se abre el archivo de este círculo en un editor de textos aparece el código XML:

Como puedes ver, no hay mucho código aquí. Solo es necesaria una línea de código para dibujar en círculo. Esto se debe a que XML hace la mayor parte del trabajo por nosotros con las etiquetas. En el código anterior, las etiquetas se muestran en rosa entre paréntesis angulares.

Para dibujar el círculo, el código XML especifica la forma con una etiqueta <circle>, su posición con los atributos cx y cy, el radio con el atributo r y el color dentro de la etiqueta <style>. El código #f4795b indica el color hexadecimal para este tono particular de naranja.

Cuando hay un archivo SVG, un navegador web o cualquier otra aplicación toma esta información XML, la procesa y la muestra en pantalla como una imagen vectorial. Todos los navegadores modernos representan SVG de esta manera, al igual que el software de edición de gráficos especializado.

De igual manera podrás notar que este archivo XML está escrito en inglés. Los SVG son básicamente archivos de texto, lo que los hace legibles por humanos. Esto permite a los desarrolladores realizar ediciones en archivos XML directamente. Pondremos un ejemplo en donde se reemplaza el valor de relleno en el siguiente círculo:

Si quieres ver más vectores, además de simples círculos, te mostramos el logotipo de la rueda dentada de HubSpot:

Si bien es un icono simple, este gráfico consta de 30 líneas conectadas por 30 puntos:

Si se abre el archivo SVG en un editor de texto, su aspecto sería el siguiente: 

Como puedes ver, hay más cosas en este código, pero el concepto es el mismo. Aún está la etiqueta <style>, que indica el color. Y en vez de una etiqueta <circle> para dar forma, está la etiqueta <path>. Todos los valores de esta etiqueta especifican los puntos gráficos y las líneas entre estos puntos.

Ventajas de los archivos SVG

El código XML no solo es agradable a la vista, sino que hace que los archivos SVG sean muy potentes y prácticos para sitios y aplicaciones web, como exploraremos en esta sección.

1. Escalabilidad infinita

Los archivos SVG se pueden expandir o reducir a cualquier tamaño, sin pérdida de calidad. El tamaño de la imagen y el tipo de visualización no importan con los SVG: siempre tienen el mismo aspecto.

Esto es importante porque el tamaño de las imágenes web difiere según el espectador, las dimensiones de la ventana del navegador, el dispositivo, el zoom, el diseño del sitio y el diseño receptivo. Tus imágenes deben aparecer completamente renderizadas para todos los espectadores y los SVG hacen que esto sea mucho más fácil.

Una vez más, el logotipo de HubSpot como SVG de 100 píxeles de ancho:  

Aquí está el mismo logo en formato PNG, con los mismos 100 píxeles de ancho:  

Si bien ambos pueden distinguirse bien, si los escalamos hasta cinco veces su tamaño, la calidad de imagen es completamente diferente:

Si fuera necesario expandir o reducir un SVG, el programa que lee el archivo reajusta los puntos y líneas para conservar los límites claros y los colores sólidos.

Las imágenes rasterizadas, de forma contraria, aparecen pixeladas cuando se amplían en las pantallas. Si bien existen soluciones para mantener la fórmula ráster, como usar diferentes archivos de tamaño creciente para la misma imagen, requieren más trabajo y son más propensos a errores. En última instancia, las imágenes de trama no se diseñaron para escalar.

Sin embargo, hay una compensación para una mejor escalabilidad: por diseño, los SVG carecen de los detalles de las imágenes rasterizadas, mientras que un formato ráster puede mostrar imágenes tan detalladas como lo permita el mapa de bits. Cualquier intento de representar perfectamente un PNG detallado (es decir, una fotografía) como un vector dará como resultado un archivo SVG masivo y poco práctico.

Entonces, ambos tipos de archivos tienen su lugar en el diseño web: usa PNG, JPEG y otros formatos rasterizados para fotos y elige archivos SVG para cualquier cosa menos detallada.

2. Personalización

Los SVG dan a los diseñadores y desarrolladores mucho control sobre su apariencia. En lugar de modificar los archivos directamente en un editor de texto, puedes emplear uno de los muchos programas de edición compatibles con SVG para cambiar las formas vectoriales, colores, texto e incluso otros efectos visuales como degradados de color y sombras.

3. Compatibilidad con secuencias de comandos

El formato de archivo SVG fue desarrollado por World Wide Web Consortium como un formato estandarizado para gráficos web. Fue diseñado para funcionar con otras convenciones web como HTML, CSS, JavaScript y el modelo de objeto de documento.

Gracias a esta compatibilidad, las imágenes SVG se pueden controlar con scripts. Esto abre una amplia gama de posibilidades de visualización dinámica, desde animaciones hasta gráficos dinámicos e imágenes adaptables a dispositivos móviles. Este nivel de control sobre la apariencia no es posible con los formatos JPEG y PNG.

4. Accesibilidad y optimización de motores de búsqueda

Los archivos SVG son archivos de texto, y esto en sí mismo ofrece algunas ventajas sobre los formatos rasterizados. Primero, como hemos cubierto, los programadores pueden mirar el código XML y entenderlo rápidamente.

Además, si un gráfico SVG contiene texto, la información del texto se almacena en el archivo como texto literal (no como formas). Esto permite que los lectores de pantalla interpreten SVG, lo que ayuda a quienes tienen dificultades para interactuar con el contenido digital.

Por último, los motores de búsqueda como Google pueden indexar los archivos SVG. Si deseas colocar una infografía con mucho texto u otra visualización SVG en tu página, incluir texto de palabras clave en la imagen ayuda a clasificar tu página y mejorar tu SEO. Los PNG y JPEG se limitan a metadatos y texto alternativo.

5. Tamaños de archivo más pequeños

Los archivos SVG suelen almacenar imágenes de manera más eficiente que los formatos de trama comunes, siempre que la imagen no sea demasiado detallada. Los archivos SVG contienen suficiente información para mostrar vectores a cualquier escala, mientras que los mapas de bits requieren archivos más grandes para las versiones ampliadas de las imágenes: más píxeles ocupan más espacio de archivo.

Esto es bueno para los sitios web porque los archivos más pequeños se cargan más rápido en los navegadores, por lo que los SVG pueden aumentar el rendimiento general de la página. Sin embargo, esto no significa que debas convertir todas las imágenes a SVG. Por ello, te diremos cómo los sitios web tienden a aplicar SVG.  

¿Para qué se utilizan los archivos SVG?

Como ya mencionamos, los archivos SVG funcionan mejor para imágenes que contienen menos detalles que una infografía. Eso sigue siendo bastante amplio, así que analicemos algunos de los usos más comunes de los SVG en línea.  

Iconos

La mayoría de los iconos se traducen bien en vectores, dada su simplicidad y bordes claramente definidos. Los iconos para los elementos de la página, como los botones, deberán responder a los diferentes tamaños de pantalla, lo que significa que deben ser perfectamente escalables.

Logotipos

El formato SVG es particularmente adecuado para logotipos que pueden aparecer en encabezados de sitios web, correos electrónicos e impresos o cualquier otra cosa; desde folletos hasta sudaderas con capucha y vallas publicitarias. Una vez más, los logotipos suelen tener un diseño más simple, lo que se adapta muy bien al formato SVG.

Ilustraciones

Los vectores también se adaptan muy bien al arte visual no fotográfico. Los dibujos decorativos en páginas web se pueden escalar fácilmente y conservar espacio de archivo, si se agregan como archivos SVG. Las ilustraciones que se muestran a continuación, incluso las texturas, se pueden lograr con SVG.  

Imagen de awwwards

Animaciones y elementos de la interfaz

Al aprovechar las capacida

des de CSS y JavaScript, puedes configurar los SVG para que cambien su apariencia dinámicamente y se activen de modo automático o después de algún evento. Los SVG animados pueden servir para agregar un estilo visual a sus páginas o pueden usarse para interactuar con las animaciones de la interfaz de usuario:

Imagen de Tiger Tells

Infografías y visualizaciones de datos

¿Tu sitio web se beneficiaría de pantallas informativas como una infografía o un gráfico ilustrado? Esta es otra aplicación útil para SVG. Tus diseños se escalarán sin problemas y el texto dentro del archivo SVG es indexable.

Incluso puedes diseñar gráficos como SVG que se actualizan dinámicamente en función de la entrada de datos en tiempo real. Por ejemplo, puedes crear un vector de «barra de progreso» para una recaudación de fondos que se completa a medida que aumenta el total de la donación.

También verás SVG implementados a menudo en sitios informativos para visualización de datos y mapas:

Imagen de Peter Collin Gridge 

¿Cómo crear o editar un archivo SVG?

Si simplemente deseas abrir una imagen SVG sin editarla, puedes hacerlo directamente en tu navegador web, ya que este está diseñado para interpretar y mostrar estos archivos. También puedes obtener una vista previa de los SVG en un programa de edición especializado como el que te mostraremos a continuación.

Para modificar un archivo SVG puedes cambiar directamente el archivo en un editor de texto, pero esto no es práctico para cambiar la mayoría de las cosas más allá de los colores. En su lugar, utiliza un software para editar arte vectorial. Las opciones gratuitas y de pago son:  

• Adobe Illustrator es un programa de Adobe para crear y editar gráficos vectoriales. Puedes exportar proyectos de Adobe como SVG o en varios formatos de trama.
• Microsoft Visio crea varios tipos de diagramas e infografías.
• CorelDRAW es un editor de gráficos vectoriales dedicado.
• GIMP es un programa de manipulación de imágenes GNU gratuito, popular y de código abierto.
• Google Docs con esta aplicación puedes exportar dibujos creados a SVG.
• Inkscape es una herramienta gratuita de dibujo vectorial y texto.

Para comenzar a crear SVG desde cero no necesitas saber nada sobre XML o programación. Puedes dibujar tus vectores en uno de los programas enumerados anteriormente y exportarlos en formato SVG.

Cada programa tiene sus propias limitaciones y curva de aprendizaje. Si planeas explorar más los SVG, puedes probar con algunas alternativas y familiarizarte con las herramientas disponibles antes de decidirte por una opción gratuita o de pago.

Aquí hay un ejemplo de cómo usar el software Adobe Illustrator para vectorizar una imagen PNG:  

1. Crea un diseño en Illustrator para convertirlo en un archivo gráfico vectorial escalable. Asegúrate de que las imágenes sean uniformes con esquinas o curvas claramente indicadas para garantizar una transición limpia de png a SVG.

2. Haz clic en «Calco de imagen» sobre el diseño en la mesa de trabajo para que Illustrator lo seleccione. En el menú desplegable, ve a Opciones avanzadas. Cada diseño es único, así que asegúrate de ajustarlo adecuadamente. La práctica general recomienda reducir la cantidad de «Rutas» para suavizar aún más los bordes del diseño. Cuando hayas terminado selecciona «Vista de contorno» para obtener claridad sobre los bordes del diseño y la cantidad de nodos presentes.

3. Haz clic en «Expandir para tomar el diseño» que has identificado y convertirlo en un vector. Para diseños simples como este, abre la herramienta «Varita mágica», haz clic nuevamente en el blanco de la mesa de trabajo y elimínalo. Esto descarta el fondo y deja visible la capa transparente con tu vector.

4. Cambia el tamaño de la mesa de trabajo según sea necesario. Cuanto más pequeño sea el archivo, mejor se apreciará en un sitio web y mejorará el ranking de rendimiento de la página de Google.

5. Ajusta tu diseño eliminando nodos innecesarios con la herramienta «Simplemente» o «Suavizar». Ajusta según sea necesario para simplificar las rutas sin efectos adversos.

6. En la herramienta «Varita mágica», haz clic en la herramienta «Selección de grupo», separa el diseño completo de cualquier otro que puedas tener presente en la mesa de trabajo.

7. Con el diseño seleccionado, haz clic en Archivo > Exportar > Exportar como SVG (*.SVG).

8. Haz clic en «Mostrar código» en opciones de SVG para ver el XML, cópialo para usarlo como desees.  

Diseñando para la escala

Los gráficos vectoriales escalables son útiles en muchos escenarios diferentes. Son versátiles, interactivos y fáciles de empezar a crear con un editor de gráficos y un poco de conocimientos de diseño. Con los SVG en el cinturón de herramientas de diseño web, no tendrás que volver a preocuparte por los gráficos borrosos, al menos no por tus imágenes básicas. Para fotos, apégate a PNG y JPEG.