Qué es SVG y para qué sirve

Si te has preguntado alguna vez qué es SVG, te lo voy a explicar. Aunque fue concebido a finales de los 90, SVG es en muchos sentidos el formato de archivo ” el patito feo” que creció hasta convertirse en un cisne. Poco respaldado y en gran parte ignorado durante la mayor parte de la década del 2000, a partir de 2017 todos los navegadores web modernos han estado renderizando SVG sin ningún problema, y la mayoría de los programas de dibujo vectorial han estado ofreciendo la opción de exportar SVG, que sin duda se ha convertido en un formato gráfico muy utilizado en la Web.

Esto no ha sucedido por casualidad. Aunque los formatos tradicionales de archivos gráficos rasterizados como JPG y PNG son perfectos para fotografías o imágenes muy complejas, resulta que SVG es el formato gráfico que más se ajusta a las demandas actuales de desarrollo web en cuanto a escalabilidad, capacidad de respuesta, interactividad, programabilidad, rendimiento y accesibilidad.

Entonces, ¿qué es SVG y por qué debería usarlo?

SVG es un formato gráfico vectorial basado en el lenguaje de marcas extensible (XML) para la Web y otros entornos. XML utiliza etiquetas como HTML, aunque es más estricto. No se puede, por ejemplo, omitir una etiqueta de cierre ya que esto hará que el archivo no sea válido y que el SVG no se muestre.

Te recomiendo leer  5 errores a evitar en el diseño web UX

Para que te hagas una idea de cómo es el código SVG, aquí tienes cómo dibujar un círculo blanco con un borde negro:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Como puedes ver, en el interior del armario, los documentos SVG no son más que simples archivos de texto plano que describen líneas, curvas, formas, colores y texto. Como es legible para el ser humano, fácilmente comprensible y modificable, cuando se incrusta en un documento HTML como un SVG online, el código del SVG puede ser manipulado a través de CSS o JavaScript. Esto le da al SVG una flexibilidad y versatilidad que nunca podrá ser igualada por los formatos gráficos tradicionales PNG, GIF o JPG.

SVG es un estándar de la W3C, lo que significa que puede interactuar fácilmente con otros lenguajes y tecnologías de estándar abierto, incluyendo JavaScript, DOM, CSS y HTML. Mientras el W3C establezca los estándares globales de la industria, es probable que SVG continúe siendo el estándar de hecho para los gráficos vectoriales en el navegador.

Problemas que resuelve el formato SVG

La maravilla de SVG es que puede resolver muchos de los problemas más molestos para un diseñador web freelance. Veamos algunos de ellos:

Escalabilidad y capacidad de respuesta

El SVG utiliza formas, números y coordenadas en lugar de una cuadrícula de píxeles para mostrar los gráficos en el navegador, lo que lo hace independiente de la resolución e infinitamente escalable. Si lo piensas bien, las instrucciones para crear un círculo son las mismas tanto si usas un bolígrafo como un avión para escribir en el cielo. Sólo cambia la escala.

Te recomiendo leer  Responsive design vs diseño adaptativo

Con SVG, puedes combinar diferentes formas, trayectorias y elementos de texto para crear todo tipo de visuales, y estarás seguro de que se verán claros y nítidos en cualquier tamaño.

Por el contrario, los formatos basados en rásters como GIF, JPG y PNG tienen dimensiones fijas, lo que hace que se pixelen cuando se escalan. Aunque varias técnicas de imagen responsive han demostrado ser valiosas para los gráficos de píxeles, nunca podrán competir realmente con la capacidad de SVG de escalar indefinidamente.

Programabilidad e interactividad

El SVG es totalmente editable y programable. Todo tipo de animaciones e interacciones pueden ser añadidas a un gráfico SVG online a través de CSS y/o JavaScript.

Accesibilidad

Los archivos SVG están basados en texto, por lo que cuando se incorporan a una página web, pueden ser buscados e indexados. Esto los hace accesibles para un lector tipo reader, un motor de búsqueda y otros dispositivos.

Rendimiento

Uno de los aspectos más importantes que afectan al rendimiento de la web es el tamaño de los archivos utilizados en una página web. Los gráficos SVG suelen ser de menor tamaño en comparación con los formatos de archivos de mapa de bits.

Casos de uso común y soporte del navegador

SVG tiene una avalancha de casos de uso práctico. Exploremos los más significativos de ellos.

Ilustraciones y diagramas sencillos

Cualquier dibujo tradicional que se preste a ser producido con lápiz y bolígrafo debe traducirse perfectamente al formato SVG.

Logotipos e iconos

Los logos e iconos deben ser claros y nítidos en cualquier tamaño, ya sea el tamaño de un botón o el de una valla publicitaria, lo que los convierte en candidatos ideales para el SVG. Además, los iconos de SVG son más accesibles y son mucho más fáciles de colocar.

Te recomiendo leer  5 increíbles herramientas gratuitas para diseñadores

Animaciones

Puedes crear atractivas animaciones, incluyendo atractivos efectos de dibujo usando gráficos SVG. De hecho, el código SVG puede interactuar con la animación CSS, así como con JavaScript y su propia funcionalidad de animación SMIL incorporada.

Interactividad (tablas, gráficos, infografías, mapas)

El SVG puede utilizarse para trazar datos y actualizarlos dinámicamente en función de las acciones del usuario u otros eventos. Consulta la Infografía interactiva de SVG y el Mapa interactivo de rutas de SVG.

Efectos especiales

Se pueden lograr muchos efectos en vivo usando SVG, incluyendo el modelado de formas o diferentes efectos pegajosos.

Construyendo interfaces y aplicaciones

SVG te permite hacer interfaces sofisticadas que puedes integrar con HTML5, aplicaciones basadas en la web y aplicaciones ricas de Internet (RIA).

Como puedes ver, el SVG se utiliza casi en todas partes y en innumerables situaciones. La buena noticia de todo esto es que la compatibilidad del SVG con los navegadores es excelente, como puedes comprobar tú mismo en caniuse.com.

Así que ahora ya sabes lo que son las SVG y por qué son geniales para la Web.

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)