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 coordenadaswidth="200" height="200": tamaño renderizado en página- SVG escala automáticamente viewBox para ajustarse a dimensiones renderizadas
- Relación de aspecto:
preserveAspectRatiocontrola 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 formastroke: color de contornostroke-width: grosor de contornoopacity: 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
:hovero 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: gzipyContent-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
- Usar formas semánticas: preferir
<rect>,<circle>sobre<path>cuando sea posible (archivo más pequeño) - Minificar salida: eliminar espacios en blanco, decimales (3.5000000 → 3.5)
- Incrustar vs. Vincular:
<img src="logo.svg">,<svg>...</svg>u<object>dependiendo del caso de uso - Compresión SVGZ: Gzip SVG en servidor para reducción 60-80% de tamaño
- Viewbox responsivo: usar viewBox y max-width CSS para escalado
- Accesibilidad: incluir
<title>y<desc>para lectores de pantalla - 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.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: