¿Qué es SVG? — El formato vectorial explicado de forma simple

SVG es un estándar abierto del W3C publicado por primera vez en 2001. Describe gráficos vectoriales bidimensionales en sintaxis XML:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
</svg>

Este ejemplo dibuja un círculo morado. El navegador interpreta las instrucciones XML y renderiza el gráfico a cualquier resolución.

SVG ofrece ventajas únicas frente a los formatos rasterizados:

• Escalabilidad infinita — Desde 16×16 px hasta una lona enorme sin pérdida de calidad
• Tamaño de archivo muy reducido — Un logo en SVG suele ocupar muy poco
• Basado en texto — Puede editarse con cualquier editor de texto
• Indexable — El texto dentro del SVG puede ser leído por los buscadores
• Animable — Los elementos SVG pueden animarse con CSS o JavaScript
• Accesible — Admite atributos ARIA y etiquetas <title> y <desc>

Los elementos SVG más importantes son:

• <rect> — Rectángulo
• <circle> — Círculo
• <ellipse> — Elipse
• <line> — Línea
• <polyline> — Polilínea
• <polygon> — Polígono
• <path> — Trazados libres, el elemento más potente
• <text> — Texto
• <g> — Agrupación de elementos

SVG está presente en todo el mundo digital:

• Logos e iconos — Su principal uso
• Infografías — Visualizaciones interactivas y escalables
• Elementos de interfaz — Botones, ilustraciones y fondos
• Mapas — Mapas y planos interactivos
• Animaciones — Desde efectos sutiles hasta motion design complejo
• Impresión — Base para plantillas de alta resolución

SVG está totalmente soportado por todos los navegadores modernos:

• Chrome, Firefox, Safari y Edge: compatibilidad completa desde hace años
• Safari iOS y Chrome Android: visualización móvil perfecta
• IE 11: soporte básico con algunas limitaciones CSS

Hoy puedes usar SVG con seguridad en cualquier proyecto web.