SVG (Gráficos Vectoriales Escalables) habilita gráficos infinitamente escalables en la web como formato vectorial basado en XML estandarizado por W3C. A diferencia de imágenes ráster, SVG almacena formas geométricas, paths y texto como ecuaciones matemáticas, permaneciendo nítidos a cualquier nivel de zoom.
Estructura de Documento
Archivos SVG son documentos XML con elementos gráficos como etiquetas. SVG mínimo tiene espacio de nombres xmlns, sistema de coordenadas viewBox, dimensiones width/height, y elementos de forma. ViewBox establece coordenadas independientes de resolución.
Formas Primitivas y Paths
Formas básicas incluyen circle (cx, cy, r), rect (x, y, ancho, alto), line (x1, y1, x2, y2), polygon, y ellipse. Formas complejas usan elemento path con atributo d="..." contening comandos de dibujo: M (mover), L (línea), C (Bézier cúbica), Q (Bézier cuadrática), A (arco), Z (cerrar).
Estilos y Presentación
Elementos heredan propiedades mediante CSS o atributos: fill (color), stroke (contorno), stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, opacity. Propiedades de fuente estilizan elementos de texto.
Gradientes y Patrones
LinearGradient define transiciones de color entre dos puntos con múltiples elementos stop. RadialGradient crea transiciones concéntricas. Elemento pattern tesela gráficos.
Transformaciones y Animaciones
Transformaciones geométricas: translate(x, y), rotate(ángulo, cx, cy), scale(x, y), skewX/Y. Animaciones SMIL habilitan cambios de valor de atributos, cambios de transformación y movimiento de elemento a lo largo de paths.
Ventajas sobre Ráster
Escalabilidad infinita mantiene nitidez a cualquier zoom. Archivos vectoriales son 10–100× más pequeños. SVG soporta interactividad nativa, animación, accesibilidad, estilos CSS y manipulación DOM.
Limitaciones
Fotografías permanecen impracticables para representación vectorial. Texto pequeño renderiza menos nítido. Miles de elementos path pueden estresar navegadores. Crear gráficos complejos requiere herramientas vectoriales dedicadas.
Tamaño de Archivo y Casos de Uso
Icono 48×48px: SVG 0.5–2 KB vs PNG 8–15 KB vs WebP 4–8 KB. SVG excela para iconos/logos, diagramas/gráficos, mapas, infografías, componentes UI, y animaciones de logo.
SVG fundamentalmente cambió gráficos web, habilitando visuales interactivos, escalables e integrados con estándares web.
Casos de uso avanzados
Optimización web a escala: sitios e-commerce con miles de productos pueden reducir bandwidth costs 60-80% migrando de JPG a AVIF o WebP. Cloudflare Images, Imgix y Cloudinary ofrecen transformación on-the-fly basada en Accept header del cliente — sirviendo AVIF a Chrome/Edge modernos, WebP a Safari/Firefox, JPG fallback a navegadores legacy. Print-ready output: convertir RGB a CMYK con perfil ICC (US Web Coated SWOP v2 para offset comercial, FOGRA39 para europeo) garantiza que los colores impresos coincidan con preview en pantalla calibrada. PDFs/X-1a y X-4 son los formatos exigidos por imprentas profesionales. Foto profesional: workflow Adobe consiste en RAW (input cámara) → DNG (archivado) → PSD (edición no-destructiva) → TIFF (deliverable) → JPG/WebP (web/social). Cada etapa preserva diferentes capacidades. Vector graphics: SVG es preferido para logos, iconos, ilustraciones planas — escala infinitamente sin pérdida y se anima con CSS/JavaScript. Para UIs modernas, los icon fonts (Font Awesome) están siendo reemplazados por SVG sprites por mejor accesibilidad y customización.
Mejores prácticas y consejos profesionales
Selección de formato según contenido: fotografías → JPG (calidad 85-95) o WebP (calidad 80-90); gráficos con texto/líneas finas → PNG o WebP lossless; ilustraciones planas → SVG; iconos UI → SVG; screenshots → PNG; HDR → AVIF o JPEG XL. Color profile management: siempre embebe el perfil ICC en archivos profesionales (Adobe RGB para fotografía pre-impresión, sRGB para web, Display P3 para Apple ecosystem). Sin perfil embedded, los visualizadores asumen sRGB que puede causar shifts de color visibles. Resolución vs tamaño: para web display, 72 DPI es suficiente; para impresión profesional, 300 DPI mínimo. Lazy loading + responsive images: combina <img loading="lazy" srcset> con AVIF/WebP fallback chain para bandwidth saving sin sacrificar UX. Metadata privacy: archivos JPG de smartphone contienen GPS, modelo de cámara, fecha exacta — usa exiftool -all= para limpiar antes de subir a redes sociales si privacidad importa.
Compatibilidad y consideraciones técnicas
KaijuConverter soporta más de 30 formatos de imagen (JPG, PNG, WebP, AVIF, HEIC/HEIF, GIF, BMP, TIFF, SVG, ICO, PSD, RAW múltiples vendors, JPEG XL) usando ImageMagick 7.x, libvips, y format-specific libraries (libpng, libjpeg-turbo, libwebp, libavif, librsvg). Procesamos imágenes hasta 100 MB con resoluciones hasta 16384×16384 píxeles y profundidades de 8/10/12/16-bit por canal. EXIF y metadata: leemos toda la información embedded (cámara, lente, GPS, datos de captura, ICC profile) y la migramos al output cuando el formato destino lo soporta — crítico para workflows profesionales que dependen de provenance tracking. HDR: soportamos PQ y HLG transfer functions para AVIF/JPEG XL/HEIC HDR (rec.2020 color space). Performance: una conversión típica JPG→WebP de 5 MB tarda 1-3 segundos; HEIC→JPG de iPhone 12 Mpix tarda 2-5 segundos; PSD multi-layer→PNG flat puede requerir 5-15 segundos según complejidad. Privacidad: cifrado TLS 1.3, contenedores Docker aislados, eliminación automática tras 2 horas con multi-pass overwrite.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: