Gráficos Vectoriales Escalables (SVG): definición, características y usos
Formato de imagen basado en vectores y escrito en XML que permite escalado sin pérdida de calidad. Muy usado en la web para iconos, logotipos, gráficos y animación interactiva.
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.
Historia
El W3C publicó SVG en septiembre de 2001. A partir de 2018, SVG es ampliamente compatible con todos los navegadores modernos.
La extensión normal del archivo es .svg y el tipo MIME es image/svg+xml.
Estructura
SVG utiliza el lenguaje de marcado extensible (XML). Así que tiene una definición del tipo de documento.
Diferencia entre imágenes de mapa de bits y vectoriales
Esta imagen muestra la diferencia entre las imágenes de mapa de bits y las vectoriales. La imagen vectorial puede escalarse eternamente, mientras que el mapa de bits no.
Artículos relacionados
Autor
AlegsaOnline.com Gráficos Vectoriales Escalables (SVG): definición, características y usos Leandro Alegsa
URL: https://es.alegsaonline.com/art/87740
Fuentes
- caniuse.com : "Can I use... Support tables for HTML5, CSS3, etc"