SVG: Gráficos Vectoriales Escalables & Resolución Infinita

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML desarrollado por W3C, habilitando gráficos de resolución infinita, interactividad nativa, estilos CSS e manipulación directa de DOM. A diferencia de formatos raster (JPEG, PNG), SVG describe imágenes matemáticamente usando caminos, formas y curvas, haciéndolo ideal para logotipos, iconos, gráficos, diagramas y diseño web responsivo.

Conceptos Centrales de SVG

SVG usa primitivos vectoriales en lugar de píxeles:

Formas Básicas

• <rect>: rectángulos con esquinas redondeadas opcionales (rx, ry)
• <circle>: círculos con atributo de radio (r)
• <ellipse>: elipses con radios x/y (rx, ry)
• <line>: líneas rectas entre dos puntos
• <polyline>: serie conectada de líneas
• <polygon>: polilínea cerrada (forma de polígono)
• <path>: curvas complejas usando comandos Bezier (M, L, C, Q, A, Z)

Lenguaje de Datos de Camino

• M (moveto): mover cursor de dibujo
• L (lineto): dibujar línea recta
• C (bezier cúbica): curvas suaves con puntos de control
• Q (bezier cuadrática): curvas parabólicas
• A (arco): arcos circulares
• Z (closepath): cerrar camino con línea recta

Ejemplo: <path d="M100,100 L200,200 C300,300 400,200 500,100" stroke="black" fill="none"/>

Texto & Fuentes

• <text>: renderiza texto con familia de fuentes, tamaño, color
• Fuentes: fuentes del sistema o familias de fuentes incrustadas
• Texto en camino: <textPath> para renderizar texto a lo largo de camino curvo

Escalado & Independencia de Resolución

La ventaja fundamental de SVG es escalabilidad infinita:

Representación Matemática

• Imagen definida por ecuaciones, no píxeles
• Escalado a cualquier tamaño: vector permanece nítido (sin pixelación)
• Tamaño de archivo independiente de resolución
• Logo a 16px o 1600px: mismo tamaño de archivo, misma calidad

Viewbox & Relación de Aspecto

• viewBox="0 0 100 100": define sistema de coordenadas
• width="200" height="200": tamaño renderizado en página
• SVG escala automáticamente viewBox para ajustarse a dimensiones renderizadas
• Relación de aspecto: preserveAspectRatio controla comportamiento de ajuste

Ejemplo de Escalado

• Logo PNG 200×200px: 15 KB
• Mismo logo escalado a 400×400px PNG: pixelado o requiere nueva exportación
• Mismo logo como SVG: escala infinitamente, mismo archivo 5 KB
• Responsivo: archivo SVG único escala a móvil, tablet, desktop perfectamente

Estilos CSS & Interactividad

Los elementos SVG pueden ser estilados con CSS y manipulados con JavaScript:

Propiedades CSS

• fill: color dentro de forma
• stroke: color de contorno
• stroke-width: grosor de contorno
• opacity: transparencia (0-1)
• transform: rotar, escalar, sesgar
• Degradados: <linearGradient>, <radialGradient> para rellenos complejos
• Filtros: desenfoque, sombra paralela, manipulación de color

Interactividad

<svg>
  <circle cx="50" cy="50" r="40" fill="blue"/>
</svg>

<script>
  document.querySelector('circle').addEventListener('click', () => {
    alert('¡Hizo clic!');
  });
</script>

Los elementos SVG son nodos DOM directos—pueden seleccionarse, estilizarse y manejar eventos como elementos HTML. Esto permite:

• Efectos de desplazamiento (CSS :hover o JavaScript)
• Animación (animación CSS, elemento SVG <animate>, JavaScript)
• Actualizaciones dinámicas (redibujar con cambio de datos)
• Interactividad de formulario (botones, controles deslizantes, campos de entrada en SVG)

Animación e Interacción

Animación Nativa SVG

<circle cx="50" cy="50" r="40" fill="red">
  <animate attributeName="r" from="40" to="100" dur="2s" repeatCount="indefinite"/>
</circle>

Animación CSS

@keyframes rotar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
circle { animation: rotar 2s infinite; }

Animación JavaScript

let angulo = 0;
setInterval(() => {
  circle.setAttribute('transform', `rotate(${angulo})`);
  angulo += 5;
}, 16); // 60 FPS

Tamaño de Archivo & Compresión

SVG sin Comprimir

• Logo típico: 2-5 KB (datos de camino + estilos)
• Gráfico complejo: 20-100 KB
• Gráfico animado: 50-200 KB

SVGZ (Compresión Gzip)

• Gzip comprime SVG 60-80% (formato de texto comprime bien)
• Logo 5 KB SVG → 1.5 KB SVGZ
• Servidor debe establecer Content-Encoding: gzip y Content-Type: image/svg+xml
• Navegador descomprime transparentemente

Minificación

• Eliminar espacios en blanco, comentarios, atributos innecesarios
• Ejemplo: <circle cx="50" cy="50" r="40" fill="red"/> → <circle cx="50" cy="50" r="40" fill="red"/>
• Ahorros: 10-30% (espacios en blanco, decimales)

Comparación de Tamaño de Archivo

• Logo PNG (200×200px): 10-15 KB
• Logo WebP: 5-8 KB
• Logo SVG: 2-4 KB (sin comprimir), 1-2 KB (SVGZ)
• SVG gana para la mayoría de gráficos

Casos de Uso

Iconos Web & Logo

• Archivo SVG único escala a favicon, icono de app móvil, logo de banner
• Ejemplo: Material Design Icons (4000+ iconos SVG de código abierto, <1 KB cada uno)

Visualización de Datos & Gráficos

• D3.js, Chart.js aprovechan SVG para gráficos interactivos
• Responsivo: se redibuja al cambiar tamaño de ventana o datos
• JavaScript puede actualizar DOM SVG directamente para datos en tiempo real

Ilustraciones & Diagramas

• Ilustradores exportan SVG desde Adobe Illustrator, Inkscape, Figma
• Escalable infinitamente, perfecto para diseño responsivo
• Puede animarse con CSS/JavaScript para tutoriales interactivos

Diseño Web Responsivo

• SVG único sirve todos los tamaños de pantalla (móvil, tablet, desktop)
• Sin duplicación de activos (vs. formatos raster que requieren múltiples resoluciones)
• Reduce solicitudes HTTP y ancho de banda

Elementos de Interfaz Animados

• Spinners de carga, indicadores de progreso, botones animados
• Animación CSS o SVG <animate> para efectos suave
• Ligero y eficiente (renderización nativa, sin sobrecarga JavaScript)

Compatibilidad de Navegador & Limitaciones

Soporte Moderno

• Chrome/Firefox/Edge/Safari: soporte SVG 100% (2024)
• IE11: soporte limitado de SVG (formas básicas funcionan, algunos filtros fallan)
• Navegadores móviles: soporte 100%

Limitaciones

• Renderización de texto: texto SVG no indexado por motores de búsqueda (usar <title> y <desc> para accesibilidad)
• Filtros complejos: sobrecarga de rendimiento en documentos grandes
• Rasterización: conversión de SVG a PNG/JPEG aún requerida para fallback (clientes de correo, navegadores heredados)
• Intercambio de tamaño de archivo: formas simples mejores como SVG, imágenes fotorrealistas mejores como JPEG/WebP

Mejores Prácticas

1. Usar formas semánticas: preferir <rect>, <circle> sobre <path> cuando sea posible (archivo más pequeño)
2. Minificar salida: eliminar espacios en blanco, decimales (3.5000000 → 3.5)
3. Incrustar vs. Vincular: <img src="logo.svg">, <svg>...</svg> u <object> dependiendo del caso de uso
4. Compresión SVGZ: Gzip SVG en servidor para reducción 60-80% de tamaño
5. Viewbox responsivo: usar viewBox y max-width CSS para escalado
6. Accesibilidad: incluir <title> y <desc> para lectores de pantalla
7. Optimizar caminos: reducir precisión decimal a 1-2 dígitos

SVG es esencial para diseño responsivo moderno, reemplazando gráficos raster para iconos, logotipos, diagramas y elementos de interfaz escalables.