Definición: SVG es un formato abierto para describir gráficos vectoriales bidimensionales mediante texto basado en XML. Su nombre procede de Scalable Vector Graphics, utiliza habitualmente la extensión .svg y su tipo MIME es image/svg+xml.
En lugar de guardar una cuadrícula fija de píxeles, un archivo SVG define formas, coordenadas, trazos, rellenos, texto y transformaciones. Por eso los gráficos vectoriales pueden adaptarse a diferentes tamaños sin la pixelación propia de ampliar una imagen rasterizada, aunque su complejidad y peso dependen del contenido.
Índice de contenidos
Cómo funciona SVG
El navegador interpreta los elementos y atributos del documento para construir una escena gráfica. Formas como rectángulos, círculos, líneas y trazados se sitúan dentro de un sistema de coordenadas y se representan a la resolución disponible en cada pantalla o impresión.
El atributo viewBox establece el espacio de coordenadas interno, mientras que el ancho, la altura y preserveAspectRatio influyen en la adaptación al contenedor. Una configuración correcta permite conservar proporciones y facilita que el gráfico responda a distintos tamaños.
La especificación SVG 2 define elementos para geometría, texto, color, degradados, recortes, máscaras y filtros. El formato también puede incorporar imágenes rasterizadas, animación o scripts, por lo que un archivo con extensión SVG no contiene necesariamente solo formas simples.
Estructura del archivo
SVG utiliza la sintaxis de XML. El elemento raíz <svg> contiene los objetos gráficos y puede agruparlos para compartir estilos o transformaciones. Los elementos habituales incluyen:
- Formas básicas: Rectángulos, círculos, elipses, líneas, polilíneas y polígonos.
- Trazados: El elemento
<path>describe líneas y curvas mediante una secuencia de comandos. - Texto: Conserva caracteres seleccionables cuando no se convierte en contornos.
- Grupos: Permiten organizar objetos y aplicarles atributos compartidos.
- Definiciones: Gradientes, símbolos, patrones, máscaras y otros recursos reutilizables.
La presentación puede declararse con atributos o mediante CSS. Cuando SVG se inserta en HTML de forma directa, sus nodos forman parte del documento y pueden recibir estilos o interacciones. Si se carga con <img>, funciona como una imagen externa y el navegador aplica restricciones distintas.
Usos de SVG
El formato resulta especialmente útil para gráficos definidos por geometría, con colores planos o elementos que deben mostrarse en varios tamaños. Entre sus usos habituales se encuentran:
- Logotipos: Identidades visuales que deben conservar bordes nítidos en distintos soportes.
- Iconos: Símbolos de interfaz que pueden cambiar de tamaño o color.
- Ilustraciones: Composiciones basadas en formas, trazos, texto y degradados.
- Gráficos de datos: Diagramas, mapas y visualizaciones con elementos identificables.
- Animaciones: Cambios de atributos mediante CSS, JavaScript o funciones propias del formato.
SVG no es la mejor opción para todas las imágenes. Una fotografía detallada suele requerir una cantidad enorme de formas o una imagen rasterizada incrustada, lo que elimina la ventaja vectorial y puede aumentar el tamaño y el coste de representación.
Comparación con otros formatos
La elección depende del tipo de contenido, la compatibilidad, la transparencia, la animación y el peso final. Las diferencias principales son:
- PNG: Representa una cuadrícula fija de píxeles, conserva transparencia alfa y resulta adecuado para capturas o gráficos rasterizados.
- JPG: Comprime fotografías con pérdida de información y no admite transparencia alfa.
- GIF: Utiliza una paleta limitada y puede almacenar animaciones sencillas basadas en fotogramas.
- WebP y AVIF: Son formatos rasterizados modernos con opciones de compresión, transparencia y animación.
SVG mantiene la nitidez al escalar geometría, pero esa propiedad no garantiza un archivo pequeño. Un trazado complejo, muchos filtros, metadatos de edición o imágenes incrustadas pueden producir un documento más pesado que una alternativa rasterizada bien preparada.
Accesibilidad de SVG
Cuando se utiliza mediante <img>, el atributo alt aporta el texto alternativo. En un SVG insertado directamente pueden utilizarse <title>, <desc>, role="img" y relaciones ARIA. La descripción accesible debe responder a la función real del gráfico y no repetir información cercana sin necesidad.
El texto conservado como texto puede seleccionarse, traducirse y adaptarse mejor que las letras convertidas en trazados. No obstante, la presencia de elementos textuales no garantiza por sí sola la accesibilidad: también importan el orden, el contraste, el foco y una alternativa comprensible para visualizaciones complejas.
Optimización de SVG
Optimizar SVG consiste en reducir información innecesaria sin alterar el resultado ni eliminar semántica útil. Las acciones recomendables incluyen:
- Limpiar metadatos: Retirar datos del editor, comentarios y definiciones que no se utilizan.
- Simplificar trazados: Reducir nodos y precisión decimal cuando no cambia perceptiblemente la forma.
- Reutilizar elementos: Definir símbolos, estilos o recursos comunes en lugar de duplicarlos.
- Conservar viewBox: Mantener un sistema de coordenadas que permita adaptar el gráfico.
- Comprimir transferencia: Minificar el texto y aplicar compresión HTTP cuando proceda.
El tamaño debe evaluarse junto con el tiempo de representación y el contexto de uso. En WPO, un SVG ligero puede evitar variantes rasterizadas, pero una escena compleja puede exigir más procesamiento. Además, cualquier archivo procedente de terceros debe sanearse antes de insertarlo, porque el formato puede incluir scripts, enlaces o referencias externas según el modo de carga.