¿Qué es el formato SVG? Guía técnica completa para 2026

El W3C define SVG como «un lenguaje para describir gráficos bidimensionales en XML.» Como es XML, cada SVG es un documento estructurado que puedes abrir en un editor de texto, manipular con JavaScript y validar contra un esquema. Ningún otro formato de imagen común ofrece esto.

«SVG es el formato de imagen nativo de la web. No solo vive en la web — es la web.» — Chris Coyier

Anatomía SVG: estructura XML y viewBox

Cada SVG comienza con un elemento raíz <svg>. Entender sus atributos es clave para dominar el formato.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 200 100"
     width="400" height="200">
  <rect x="10" y="10" width="180" height="80" rx="8"
        fill="#0f172a" stroke="#38bdf8" stroke-width="2"/>
  <text x="100" y="58" text-anchor="middle"
        fill="#f8fafc" font-size="18">Hola, SVG!</text>
</svg>

• xmlns declara el espacio de nombres SVG — requerido en archivos .svg independientes, opcional al usar inline en HTML5
• viewBox="0 0 200 100" define el sistema de coordenadas interno: origen en (0,0), 200 unidades de ancho, 100 de alto
• width/height establecen el tamaño de renderizado; el navegador mapea el viewBox a este viewport

El viewBox desacopla el espacio de coordenadas de las dimensiones en píxeles. Un icono con viewBox="0 0 24 24" se renderiza de forma idéntica a 16px o 512px — el navegador escala el sistema de coordenadas. Por eso SVG escala infinitamente.

SVG usa un sistema de coordenadas con el eje Y apuntando hacia abajo (igual que CSS y Canvas), con el origen en la esquina superior izquierda.

Historia: W3C, guerras de navegadores y adopción moderna

• 1998: El W3C forma el grupo de trabajo SVG, fusionando las propuestas PGML de Adobe y VML de Microsoft
• 2001: SVG 1.0 se convierte en recomendación W3C
• 2003: SVG 1.1 refina y modulariza la especificación
• 2011: SVG 1.1 Segunda Edición — la versión que la mayoría de navegadores implementan completamente
• 2018: SVG 2.0 alcanza Candidate Recommendation, alineándose con CSS y HTML

La saga de IE

IE 8 y anteriores tenían cero soporte SVG. IE 9 (2011) incorporó renderizado básico pero con carencias: sin animación SMIL, filtros limitados, problemas con viewBox. El verdadero punto de inflexión llegó cuando Microsoft retiró IE en favor de Edge (Chromium) en 2022. Hoy SVG tiene un soporte global de navegadores del 98,5%.

Referencia de elementos SVG

SVG inline vs img vs background CSS vs object

Elige inline cuando necesites estados hover, animación o interacción JS. Elige <img> para assets estáticos que quieras cachear. Usa background CSS solo para decoración. El enfoque <object> rara vez es la mejor opción en 2026.

Accesibilidad: role, aria-label, title, desc

SVG tiene accesibilidad de primera clase incorporada en la especificación:

<svg role="img" aria-labelledby="logoTitle logoDesc"
     viewBox="0 0 120 40">
  <title id="logoTitle">Logo de VectoSolve</title>
  <desc id="logoDesc">Monograma geométrico V y S en degradado azul</desc>
  <path d="M10 35L30 5L50 35Z" fill="url(#grad)"/>
</svg>

• role="img" — indica a la tecnología asistiva que es una imagen
• <title> — el nombre accesible (equivalente a alt en <img>)
• <desc> — descripción más larga para gráficos complejos
• aria-labelledby — enlaza a los elementos <title> y <desc>
• aria-hidden="true" — úsalo en SVG puramente decorativos para ocultarlos de los lectores de pantalla

Animación: SMIL, CSS, JavaScript, API Web Animations

SMIL (animación nativa SVG)

<circle cx="50" cy="50" r="20" fill="#ef4444">
  <animate attributeName="r" values="20;35;20" dur="1.5s" repeatCount="indefinite"/>
</circle>

Animaciones CSS

Aplica @keyframes, transition y transform a elementos SVG — el mismo CSS que ya conoces.

Bibliotecas JavaScript

GSAP, Anime.js y Snap.svg proporcionan control por timeline para morphing de trazados complejos y animaciones secuenciadas.

API Web Animations

El enfoque moderno basado en estándares, combinando la potencia de JS con el rendimiento CSS:

element.animate(
  [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
  { duration: 2000, iterations: Infinity }
);

Optimización de rendimiento

Los SVG de herramientas de diseño tienen exceso de peso — metadatos del editor, grupos redundantes, precisión decimal excesiva.

Técnicas clave: eliminar metadatos del editor, reducir la precisión de coordenadas a 1-2 decimales, aplanar elementos <g> anidados, usar viewBox en lugar de dimensiones fijas, habilitar GZIP/Brotli (SVG se comprime excepcionalmente bien), y automatizar con el optimizador de VectoSolve.

Empieza con SVG

VectoSolve ofrece herramientas potenciadas por IA para el flujo de trabajo SVG completo:

• Convertir raster a vector — sube PNG/JPG, obtén SVG limpio y optimizado
• Editar visualmente — usa el editor SVG para ajustar trazados y colores
• Optimizar — pasa tus archivos por el optimizador para eliminar el exceso

SVG es el lenguaje gráfico nativo de la web — abierto, estandarizado, accesible, animable y eficiente. En 2026, dominar SVG no es opcional. Es fundamental.

Fuentes y lecturas adicionales

• MDN Web Docs: SVG — Referencia completa de cada elemento, atributo y API SVG
• Especificación W3C SVG 2 — El estándar oficial W3C que define la sintaxis, renderizado e interactividad SVG
• CSS-Tricks: Using SVG — Guía práctica para integrar, estilizar y optimizar SVG en la web
• web.dev Performance — Recurso de Google sobre optimización de imágenes y Core Web Vitals
• Smashing Magazine — Artículos en profundidad sobre accesibilidad SVG, animación y buenas prácticas