SVG

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML. En lugar de almacenar píxeles, SVG almacena instrucciones: “dibujar un círculo de radio 50 en (100, 100), relleno azul.” El navegador lo rasteriza en el momento de la visualización, por lo que el mismo archivo se ve nítido a cualquier tamaño, desde 16×16 hasta una valla 4K.

Propiedades:

• Independiente de la resolución — el mismo archivo para pantallas retina y estándar.
• Tamaños de archivo pequeños para formas simples — un icono típico es de 500 bytes a 5 KB. Supera a todos los formatos de trama en tamaño para el mismo contenido.
• Editable como texto — ábralo en cualquier editor, modifique los datos del trazado, guarde. No se requieren herramientas propietarias.
• Estilizable con CSS — relleno, trazo y transformación pueden provenir de CSS externo.
• Animable mediante transiciones CSS y SMIL (aunque SMIL está siendo descontinuado en favor de CSS + WAAPI).

Dónde gana SVG: logos, iconos, ilustraciones, diagramas, visualizaciones de datos. Dónde pierde: fotografías (no hay una forma eficiente de representar millones de píxeles sutilmente diferentes como vectores), gradientes complejos (el tamaño del archivo se dispara), renderizado 3D (use canvas/WebGL).

El SVG en línea (incrustado en HTML) es la mejor práctica moderna para iconos — sin solicitud separada, estilizable con CSS, accesible mediante aria-label. El SVG externo (en un archivo separado) está bien para activos menos críticos.

La superficie de ataque XSS sobre la que nadie advierte: SVG es XML y puede contener etiquetas <script>. Un SVG subido a un foro, foto de perfil o CMS se convierte en un vector de ejecución de código arbitrario si se sirve con Content-Type: image/svg+xml desde el mismo origen que la aplicación. La mitigación es sanear los SVG subidos por los usuarios (DOMPurify funciona) o servirlos desde un origen de sandbox (img.example.com en lugar de example.com). Algunos hosts simplemente rasterizan los SVG de usuarios a PNG al subir para eliminar el riesgo por completo.

Optimización del tamaño de archivo SVG: SVGO es la herramienta estándar de línea de comandos — ejecuta ~40 plugins que eliminan metadatos, simplifican trazados, fusionan transformaciones y redondean la precisión numérica. Los ahorros típicos en exportaciones de Sketch/Figma son del 50-80%, ocasionalmente del 95%+ para diseños con muchas capas ocultas y metadatos del editor. El SVG comprimido en disco también se comprime bien con gzip (contenido de texto), por lo que un SVG de 5 KB a menudo acaba en menos de 1 KB en la red. Referencia: W3C — Gráficos Vectoriales Escalables (SVG) 2.

Ejemplo práctico

Un icono de botón de cierre “X” circular en SVG: <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> — son ~150 bytes sin comprimir, ~80 bytes comprimidos con gzip, y se renderiza de forma idéntica a 16 px, 24 px, 48 px o como un vinilo de 2 metros. El PNG equivalente a 1x tiene ~400 bytes; a 2x retina es ~1 KB; a 3x es ~1,8 KB; cada uno en archivo separado. El atributo currentColor del SVG permite que un solo icono herede el color del texto para los estados de hover sin producir dos archivos de imagen. Ahora considere un SVG con una malla de gradiente compleja y 5.000 nodos de trazado (una ilustración detallada exportada desde Illustrator): el archivo se infla a ~400 KB, y rasterizarlo en el momento del dibujo cuesta CPU medible por fotograma. En ese punto un WebP de 25 KB es la mejor opción — el vector gana para geometría simple, la trama gana para la complejidad.

Cuándo y por qué importa

La elección correcta del formato cambia el peso de la página y el rendimiento de renderizado por órdenes de magnitud. Use SVG para: logos (independientes de la resolución en todos los puntos de ruptura), iconos monocromáticos (sprite o en línea), gráficos e infografías simples (D3 produce SVG), y cualquier imagen que necesite ser estilizada por CSS (iconos que siguen el tema). Use trama (PNG/WebP/AVIF) para: fotografías, capturas de pantalla, gradientes con muchas paradas de color y cualquier imagen con más complejidad visual de la que un diseñador está dispuesto a expresar como comandos de trazado. El beneficio oculto de SVG es la accesibilidad: un SVG bien marcado con elementos <title> y <desc> es compatible con lectores de pantalla de una manera que ninguna imagen de trama puede lograr sin texto alt separado. Referencia: MDN — SVG.