SVG
Formato de imagen vectorial basado en XML que se escala a cualquier resolución sin pérdida de calidad. Ideal para iconos, logotipos y gráficos.
SVG (Scalable Vector Graphics) es un estándar del W3C para describir gráficos vectoriales bidimensionales en XML. A diferencia de las imágenes rasterizadas compuestas por cuadrículas de píxeles, SVG define formas mediante coordenadas matemáticas e instrucciones de trazado, manteniendo bordes nítidos en cualquier tamaño o resolución de visualización.
Su estructura XML es legible y editable en cualquier editor de texto. Los elementos SVG participan en el DOM, permitiendo estilos CSS, interacción JavaScript e integración fluida con frameworks de aplicaciones web.
- Elementos de trazado: Las formas se describen con instrucciones de coordenadas como
<path d="M10 10 L90 90">, soportando líneas, curvas y arcos - Filtros y degradados: Desenfoque, sombra, degradados lineales y radiales se declaran dentro del marcado XML
- Animación: Las animaciones SMIL y CSS permiten gráficos en movimiento ligeros sin bibliotecas externas
El tamaño del archivo escala con la complejidad del trazado en lugar de las dimensiones en píxeles, haciendo que SVG no sea adecuado para contenido fotográfico. Destaca en representaciones geométricas: iconos, logotipos, gráficos, mapas y elementos de interfaz. Aplicar compresión gzip (.svgz) reduce el tamaño de transferencia un 60-80% adicional. Para entrega web, herramientas como SVGO eliminan metadatos innecesarios y optimizan datos de trazado, reduciendo frecuentemente el tamaño un 30-50% sin cambio visual.