Los gráficos vectoriales escalables, conocidos por sus siglas en inglés SVG, son un formato de imagen que describe formas geométricas y texto mediante instrucciones matemáticas en lugar de una cuadrícula de puntos. A diferencia de las imágenes basadas en píxeles, los SVG conservan nitidez al ampliarse o reducirse. Esta representación se escribe en XML y fue desarrollada y estandarizada por el W3C, lo que facilita su integración con tecnologías web.

Características y componentes

Un archivo SVG contiene elementos como paths (trayectorias), rect, circle, text, gradientes y filtros. Al estar basado en texto, el contenido es editable con un editor de código o con programas gráficos. Los atributos permiten definir trazos, rellenos, opacidad y transformaciones (rotar, escalar, trasladar). Además, cada elemento forma parte del DOM del documento cuando se inserta en una página, lo que posibilita manipulación dinámica con CSS y JavaScript.

Historia y estandarización

SVG surgió como respuesta a la necesidad de un formato vectorial abierto para la web. Su especificación ha evolucionado mediante varias versiones y perfiles (por ejemplo, versiones reducidas para dispositivos móviles), manteniendo compatibilidad con navegadores modernos. El modelo estandarizado facilita interoperabilidad entre herramientas y plataformas.

Usos y ventajas

  • Iconos y logotipos escalables que conservan nitidez en distintas resoluciones.
  • Gráficas, mapas y diagramas interactivos que requieren accesibilidad y actualización dinámica.
  • Animaciones y efectos visuales controlados por CSS o SMIL/JavaScript.
  • Textos seleccionables y buscables, útiles para accesibilidad y SEO.

Diferencias con imágenes ráster y otros enfoques

Frente a las imágenes basadas en píxeles, los SVG son independientes de resolución y suelen ocupar menos espacio en gráficos simples. Comparados con canvas o WebGL, SVG es orientado a objetos y más adecuado para elementos con interacción accesible, aunque puede no ser óptimo para millones de polígonos o escenas 3D complejas.

Herramientas, optimización y buenas prácticas

Existen editores gráficos y de código que trabajan con SVG: desde programas vectoriales hasta editores de texto. Para uso web conviene optimizar los archivos (eliminar metadatos innecesarios, agrupar elementos) y emplear atributos ARIA para mejorar accesibilidad. También es frecuente incrustar SVG inline en HTML o enlazarlos como archivos externos según necesidades de rendimiento y caché.

Conceptos clave: los SVG usan vectores para describir la imagen, se integran con estándares web y ofrecen flexibilidad tanto para diseño como para interactividad y accesibilidad.