Fundamentos de SVG y uso práctico - De los conceptos vectoriales a la animación

Qué es SVG - Diferencias fundamentales con las imágenes rasterizadas

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML. Mientras que las imágenes rasterizadas como JPEG y PNG representan imágenes como colecciones de píxeles, SVG define imágenes mediante descripciones matemáticas de formas (puntos, líneas, curvas, polígonos). Esta diferencia fundamental otorga a SVG la característica de nunca perder calidad sin importar cuánto se amplíe.

Comparación entre SVG y rasterizado:

• Independiente de resolución: SVG se muestra nítido en pantallas Retina y monitores 4K como datos vectoriales. Las imágenes rasterizadas muestran píxeles al ampliarse; SVG no tiene este problema
• Tamaño de archivo: Para formas simples (iconos, logos, diagramas), SVG es dramáticamente más pequeño. Para imágenes fotográficas complejas, los formatos rasterizados son más eficientes
• Editabilidad: SVG es XML editable en editores de texto. Los estilos se pueden cambiar con CSS y manipular dinámicamente con JavaScript. Los datos de píxeles rasterizados carecen de esta flexibilidad
• Accesibilidad: El texto en SVG es legible por motores de búsqueda y lectores de pantalla. Los elementos <title> y <desc> añaden descripciones para imágenes accesibles

SVG es ideal para: iconos, logos, diagramas, gráficos, mapas, elementos de UI, ilustraciones, animaciones. SVG no es adecuado para: fotografías, texturas complejas, imágenes naturales con muchos degradados. Elegir apropiadamente entre SVG y rasterizado según el caso de uso es esencial.

Estructura básica de SVG - Sistema de coordenadas y elementos clave

Los archivos SVG usan formato XML con elementos de forma colocados dentro de un elemento raíz <svg>. Comprender el sistema de coordenadas es fundamental para trabajar con SVG.

El atributo viewBox define el sistema de coordenadas interno de SVG. viewBox="0 0 100 100" significa un espacio de coordenadas desde (0,0) arriba-izquierda hasta (100,100) abajo-derecha. width y height establecen el tamaño de visualización real. Cuando el viewBox difiere del tamaño de visualización, SVG se escala automáticamente.

Elementos de forma principales:

• <rect>: Rectángulo con esquinas redondeadas opcionales mediante rx
• <circle>: Círculo con punto central y radio
• <ellipse>: Elipse con radios x e y separados
• <line>: Línea recta entre dos puntos
• <polyline>: Segmentos de línea conectados
• <polygon>: Forma poligonal cerrada
• <path>: El elemento más potente, capaz de crear cualquier forma
• <text>: Texto con posicionamiento y alineación

Agrupa con <g> para transformaciones colectivas. Coloca definiciones reutilizables en <defs> y referéncialas con <use> para patrones eficientes.

Escritura de rutas SVG - El sistema de comandos del atributo d

El atributo d del elemento <path> es la característica más potente y compleja de SVG. Una serie de comandos dibuja formas arbitrarias - las fuentes de iconos e ilustraciones se componen principalmente de rutas.

Comandos principales de ruta:

• M (moveto): Mover la posición del lápiz
• L (lineto): Dibujar línea recta hasta un punto
• H (horizontal): Línea horizontal hasta coordenada x
• V (vertical): Línea vertical hasta coordenada y
• C (curveto): Curva Bézier cúbica con dos puntos de control y punto final
• S (smooth curveto): Curva Bézier cúbica suave reflejando el punto de control anterior
• Q (quadratic): Curva Bézier cuadrática con un punto de control
• A (arc): Arco elíptico con radio, rotación y banderas
• Z (closepath): Cerrar la ruta de vuelta al inicio

Los comandos en mayúsculas usan coordenadas absolutas; en minúsculas usan relativas (desplazamiento desde la posición actual). Las rutas complejas rara vez se escriben a mano - típicamente se crean en Figma, Illustrator o Inkscape y se exportan como SVG. La optimización posterior con SVGO elimina metadatos innecesarios y descripciones redundantes, reduciendo el tamaño del archivo.

Manipulación de SVG con CSS y JavaScript - Estilos dinámicos e interacción

Incrustar SVG inline en HTML permite la manipulación libre de cada elemento SVG mediante CSS y JavaScript. Esto habilita efectos hover, cambio de temas, dibujo dinámico basado en datos y gráficos interactivos.

Propiedades CSS específicas de SVG: fill (color de relleno, usa currentColor para heredar el color del padre), stroke (color de línea), stroke-width (grosor de línea), stroke-dasharray (patrón de guiones para efectos de dibujo), stroke-dashoffset (posición de inicio del guión para animación de trazado), opacity y transform.

La manipulación con JavaScript usa las mismas APIs del DOM que HTML (querySelector, setAttribute, addEventListener), lo que hace que el costo de aprendizaje sea bajo para desarrolladores web. Bibliotecas de visualización de datos como D3.js y Chart.js generan SVG dinámicamente para gráficos y diagramas.

Las transiciones CSS en propiedades SVG permiten efectos hover suaves: cambiar el color de relleno, el grosor del trazo o la transformación al pasar el cursor con temporización de transición crea iconos y elementos de UI interactivos pulidos sin JavaScript.

Animación SVG - Selección entre SMIL y animación CSS

La animación SVG tiene tres métodos: SMIL (animación nativa de SVG), animación CSS y JavaScript (Web Animations API / GSAP). Cada uno tiene fortalezas para diferentes casos de uso.

Animación CSS (recomendada): La más común y familiar para desarrolladores web. Usa propiedades @keyframes y animation. Las propiedades transform y opacity aceleradas por GPU logran animaciones suaves a 60fps.

Animación SMIL: Escrita directamente en SVG usando elementos <animate>, <animateTransform>, <animateMotion>. Permite movimiento siguiendo rutas, difícil de lograr solo con CSS. Sin embargo, Chrome consideró previamente deprecar SMIL, por lo que se prefiere CSS/JavaScript para nuevas implementaciones.

Animación JavaScript (GSAP / Web Animations API): Óptima para control complejo de líneas de tiempo, efectos vinculados al scroll y animación responsiva a la interacción del usuario. GSAP es el estándar de facto para animación SVG, permitiendo morphing, dibujo de rutas y animaciones escalonadas.

Nota de rendimiento: Para muchos elementos animados (más de 100), Canvas supera a SVG. La naturaleza basada en DOM de SVG significa que el costo de renderizado aumenta proporcionalmente con el número de elementos.

SVG の技術書は Amazon でも豊富に揃っています

Optimización y rendimiento de SVG - Consideraciones prácticas

Los archivos SVG, al ser basados en texto, a menudo contienen metadatos innecesarios y descripciones redundantes. La optimización puede reducir el tamaño de los archivos entre un 30-70%. Para sitios que usan muchos SVGs (conjuntos de iconos), los efectos de optimización se acumulan para una mejora significativa del rendimiento.

Optimización con SVGO:

• Eliminar metadatos innecesarios: Comentarios insertados por editores, declaraciones de namespace, capas ocultas
• Redondear coordenadas: Reducir la precisión de M 10.123456 a M 10.12 controlado por floatPrecision
• Optimizar rutas: Fusionar comandos redundantes, convertir a coordenadas relativas, eliminar espacios en blanco
• Acortar atributos: fill="#ffffff" a fill="#fff"

Decisión entre SVG inline vs archivo externo:

• Inline: Cuando se necesita manipulación CSS/JS, reducir peticiones HTTP, iconos pequeños (menos de 1KB)
• Archivo externo: Cuando se aprovecha la caché del navegador, se reutiliza en varias páginas, no se necesita manipulación CSS/JS
• Sprites SVG: Múltiples iconos en un archivo referenciados mediante <use href="#icon-name">. Reduce peticiones mientras permite el almacenamiento en caché

Nota de rendimiento: Los filtros complejos (<feGaussianBlur>, <feDropShadow>) tienen un alto costo de renderizado. En dispositivos móviles, los SVGs con filtros pueden causar interrupciones en el scroll. Úsalos con moderación.