SVG

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML, desarrollado por el W3C y adoptado como estándar web en 2001. A diferencia de los formatos de mapa de bits como PNG, JPG o WebP, SVG no almacena píxeles sino instrucciones matemáticas: «dibuja un círculo rojo de radio 50 px en las coordenadas (100, 100)». El resultado es una imagen que se escala a cualquier tamaño —desde un favicon de 16×16 hasta una pantalla de 8K— con la misma nitidez perfecta.

Estructura de un archivo SVG

Un SVG es texto XML legible y editable con cualquier editor de texto:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <!-- Círculo azul con borde negro -->
  <circle cx="50" cy="50" r="40" fill="#3B82F6" stroke="#1E40AF" stroke-width="3"/>
  <!-- Texto centrado -->
  <text x="50" y="55" text-anchor="middle" font-size="20" fill="white">OK</text>
</svg>

Los elementos más habituales son <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon> y <path> (que permite cualquier forma mediante comandos de tipo bezier).

Ventajas de SVG en la web

• Independencia de resolución: se ve nítido en pantallas Retina (2x, 3x) sin necesidad de imágenes adicionales.
• Tamaño pequeño para gráficos simples: un icono como SVG puede pesar 300 bytes frente a 3-5 KB del mismo icono en PNG@2x.
• Editable con CSS: puedes cambiar colores, tamaños y animaciones desde la hoja de estilos sin tocar el archivo.
• Manipulable con JavaScript: el SVG forma parte del DOM cuando se incrusta en HTML, así que puedes animar, colorear o hacer interactivos sus elementos con document.querySelector().
• Accesibilidad: se le puede añadir <title> y <desc> para lectores de pantalla, y el texto dentro de un SVG es texto real (seleccionable e indexable).

Cómo incrustar un SVG en HTML

Como elemento <img> (el más sencillo, sin acceso al DOM):

<img src="logo.svg" alt="Logotipo de Gliora" width="120" height="40">

Incrustado en el HTML (permite CSS y JS sobre sus partes):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

Como fondo CSS (para patrones y decoraciones):

.hero {
  background-image: url('patron.svg');
}

Cuándo usar SVG y cuándo otro formato

Optimizar el tamaño de un SVG

Los editores vectoriales como Figma o Illustrator añaden metadatos innecesarios al exportar. SVGO es la herramienta estándar para optimizarlos:

# Instalar SVGO
npm install -g svgo

# Optimizar un SVG (sobreescribe el original)
svgo logo.svg

# Optimizar manteniendo el original
svgo logo.svg -o logo.min.svg

SVGO puede reducir el tamaño entre un 30 y un 70 % eliminando comentarios, atributos vacíos, grupos innecesarios y valores redundantes. Para convertir SVG a PNG u otros formatos rasterizados, usa el conversor de imágenes.