Archivos SVG: Guía Completa para Desarrolladores y Diseñadores

SVG es una de esas tecnologías que parece simple desde fuera — es solo un formato de dibujo, ¿verdad? — pero que recompensa el estudio profundo más que casi cualquier otro formato en el arsenal de un desarrollador o diseñador. Los archivos SVG escalan infinitamente sin pérdida de calidad, pesan casi nada para gráficos simples, se pueden estilizar con CSS, animar con JavaScript o transiciones CSS, e incrustar directamente en HTML. Entender SVG correctamente cambia cómo piensas sobre los gráficos en la web.

Puedes ver, inspeccionar y optimizar cualquier archivo SVG con la Herramienta SVG de BrowseryTools — gratuita, sin registro, todo se ejecuta en tu navegador.

¿Qué es SVG?

SVG son las siglas de Scalable Vector Graphics (Gráficos Vectoriales Escalables). A diferencia de JPEG, PNG o WebP — que almacenan imágenes como cuadrículas de píxeles de color (imágenes rasterizadas) — SVG almacena imágenes como descripciones matemáticas de formas. Un círculo se describe como un punto central y un radio. Un trazado se describe como una secuencia de comandos de dibujo: mover a este punto, trazar una línea hasta ese punto, trazar una curva a través de estos puntos de control, cerrar el trazado.

SVG es un formato basado en XML, lo que significa que cada archivo SVG es texto plano, legible por humanos y estructurado como un árbol de elementos anidados. Abre cualquier SVG en un editor de texto y verás marcado legible, no datos binarios. Esto tiene consecuencias prácticas significativas: los archivos SVG pueden generarse mediante programación, modificarse con herramientas de procesamiento de texto, compararse en control de versiones e incrustarse directamente en HTML sin ningún procesamiento adicional.

El formato es un estándar del W3C, mantenido junto con HTML y CSS. Todos los navegadores modernos tienen un motor de renderizado SVG completo integrado.

Por qué SVG supera al rasterizado para iconos e ilustraciones

La ventaja decisiva de SVG frente a los formatos rasterizados para iconos, logotipos e ilustraciones es la independencia de resolución. Un icono rasterizado creado a 32×32 píxeles se verá borroso en una pantalla Retina, que renderiza a 2× o 3× píxeles físicos por píxel CSS. Para solucionarlo, necesitas exportar múltiples variantes de resolución (@1x, @2x, @3x), aumentar la resolución de origen (archivos más grandes, más memoria) o usar image-set en CSS para servir la resolución correcta. Con SVG, creas el gráfico una vez y se ve perfecto a cualquier tamaño, en cualquier pantalla, para siempre.

El tamaño del archivo es la otra gran ventaja para gráficos simples. Un icono sencillo — una marca de verificación, una flecha, un menú hamburguesa — puede describirse en un archivo SVG usando 200–500 bytes. El PNG equivalente a 2× Retina podría ser 2–5 KB. A 3×, aún mayor. Cuando una interfaz tiene 50 iconos, la diferencia entre 50 SVG optimizados (totalizando ~20 KB) y 50 conjuntos PNG (totalizando ~300+ KB) es significativa.

Las imágenes rasterizadas ganan para contenido fotográfico e ilustraciones complejas y muy detalladas con gradientes y texturas suaves. Un SVG vectorial de una fotografía sería enorme y parecería estilizado en lugar de fotográfico. El formato correcto depende enteramente de la naturaleza del contenido.

Anatomía de SVG: los elementos principales

Un archivo SVG mínimo tiene esta estructura:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#3b82f6" />
  <path d="M8 12 L12 16 L16 8" stroke="white" stroke-width="2" fill="none" />
</svg>

Los elementos y atributos clave que hay que entender:

• viewBox — define el sistema de coordenadas interno. viewBox="0 0 24 24" significa que el espacio de dibujo va de (0,0) a (24,24). El SVG puede renderizarse a cualquier tamaño real — 16×16, 32×32, 200×200 — y el navegador escala el sistema de coordenadas para ajustarse. Este es el mecanismo detrás de la independencia de resolución.
• path — el elemento SVG más potente. Un atributo d contiene comandos de dibujo: M (mover a), L (línea a), C (curva de Bézier cúbica), A (arco), Z (cerrar trazado). Casi cualquier forma puede expresarse como un trazado.
• circle, rect, ellipse, line, polygon — elementos de conveniencia para formas comunes. Un <circle> toma cx, cy y r. Un <rect> toma x, y, width y height, más un rx opcional para esquinas redondeadas.
• text — SVG puede renderizar texto tipográfico que escala con la imagen y sigue siendo seleccionable y accesible, a diferencia del texto renderizado en una imagen rasterizada.
• g (grupo) — agrupa elementos hijos para que se puedan aplicar transformaciones, estilos y opacidad a todo el grupo a la vez.
• defs y use — define elementos reutilizables una vez y referenciarlos múltiples veces con <use>. Esencial para sistemas de iconos que usan un único sprite SVG.

Estilizar SVG con CSS y animarlo

Los elementos SVG forman parte del DOM cuando el SVG está incrustado en HTML. Esto significa que CSS puede apuntarlos directamente usando los mismos selectores que se usan para los elementos HTML. Puedes cambiar colores de relleno, anchos de trazo y opacidad al pasar el ratón, en modo oscuro o en respuesta a cualquier cambio de estado:

/* Apuntar a elementos SVG con CSS */
.icon-check circle {
  fill: #22c55e;
  transition: fill 0.2s ease;
}

.icon-check:hover circle {
  fill: #16a34a;
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  .icon-check circle { fill: #4ade80; }
}

Las animaciones y transiciones CSS funcionan sobre las propiedades SVG. El truco de stroke-dasharray y stroke-dashoffset — animar un trazado de invisible a visible manipulando cuánto del trazo discontinuo se muestra — crea el efecto de "dibujado" que se ve en muchos indicadores de carga e ilustraciones de incorporación. SVG también tiene sus propios elementos <animate> y <animateTransform>(animación SMIL), aunque las animaciones CSS y JavaScript son generalmente preferidas por su mantenibilidad.

Usar currentColor como valor de relleno hace que un icono SVG herede automáticamente el color del texto de su elemento padre, permitiendo que un único icono se adapte a cualquier contexto de color sin modificación.

Optimización de SVG con SVGO

Los archivos SVG exportados desde herramientas de diseño como Figma o Illustrator contienen mucha información innecesaria: metadatos del editor, atributos redundantes, envolturas de grupos sin efecto, coordenadas de punto flotante con ocho decimales, atributos id generados por el sistema de nodos interno de la herramienta de diseño. Para un icono simple, este peso adicional puede triplicar o cuadruplicar el tamaño del archivo en comparación con una versión optimizada a mano.

SVGO (SVG Optimizer) es la herramienta estándar para eliminar este sobrepeso. Aplica un conjunto configurable de transformaciones: colapsar grupos anidados, eliminar elementos invisibles, redondear coordenadas a una precisión razonable, fusionar trazados redundantes, eliminar metadatos y comentarios, y más. Una pasada típica de SVGO reduce el tamaño de archivos SVG de iconos entre un 30 y un 60 % sin cambio visual alguno.

La Herramienta SVG de BrowseryTools aplica optimización SVG en tu navegador, dándote el resultado optimizado sin instalar ninguna herramienta de línea de comandos.

SVG en línea vs. archivo externo vs. fondo CSS

Hay tres formas principales de incluir un SVG en una página web, cada una con diferentes compromisos:

• SVG en línea — el marcado SVG se incrusta directamente en el HTML. Da acceso completo de CSS y JavaScript a cada elemento dentro del SVG. Mejor para iconos que necesitan efectos hover, cambios de color o animación. No puede almacenarse en caché por separado por el navegador.
• Archivo SVG externo mediante <img> — el SVG es un archivo separado referenciado con <img src="icon.svg">. El navegador puede almacenar el archivo en caché. Fácil de usar. Pero el CSS de la página padre no puede llegar dentro del SVG, y JavaScript no puede manipular su contenido.
• background-image en CSS — el SVG se referencia como fondo CSS. Funciona para gráficos puramente decorativos. El SVG también puede incrustarse como URI de datos en CSS, útil para iconos pequeños en hojas de estilos de componentes. CSS no puede reestilizar elementos dentro del SVG.

Los sprites SVG — un único archivo SVG que contiene todos los iconos definidos en bloques <defs>, referenciados con <use href="sprite.svg#nombre-icono"> — ofrecen un buen equilibrio: una solicitud de red almacenable en caché para todos los iconos, con manipulación DOM por icono posible en la mayoría de los navegadores modernos.

Trampas habituales de SVG: XSS mediante SVG

SVG admite scripts incrustados, manejadores de eventos y referencias a recursos externos, lo que lo convierte en un vector de ataque viable para inyección de código (XSS) si los archivos SVG subidos por usuarios se muestran en un contexto de navegador. Un archivo SVG que contiene <script>alert(document.cookie)</script> ejecutará ese script si el navegador renderiza el SVG como parte de una página.

Las reglas para gestionar de forma segura los SVG subidos por usuarios:

• Nunca incrustes en línea SVG subido por usuarios en tu HTML. Solo incrusta SVG que tú controles.
• Si debes mostrar SVG subido por usuarios, sírvelo desde un origen separado y en caja de arena, y muéstralo en una etiqueta <img> o en un <iframe> con sandbox. La etiqueta <img> no ejecuta los scripts del SVG.
• Sanea los SVG subidos por usuarios ejecutándolos a través de un sanitizador (DOMPurify con la configuración SVG) antes de almacenarlos o mostrarlos.
• Establece la cabecera Content Security Policy para restringir las fuentes de scripts en las páginas que muestren SVG.

Convertir SVG a PNG

Algunos contextos no admiten SVG: clientes de correo electrónico más antiguos, ciertas plataformas CMS, algunos pipelines de procesamiento de imágenes, requisitos de iconos de aplicación para iOS y Android e imágenes de vista previa de Open Graph. En estos casos, necesitas exportar el SVG como PNG rasterizado.

Como SVG escala sin pérdida, puedes exportar a PNG en cualquier tamaño. Para iconos de aplicación, esto significa exportar una única fuente SVG a 1024×1024 y derivar todos los tamaños menores a partir de ella. Para uso web Retina, exporta a 2× o 3× el tamaño de visualización CSS.

La Herramienta SVG de BrowseryTools puede renderizar SVG a PNG en la resolución que elijas, gestionando la conversión en el navegador sin subir nada al servidor. Útil cuando tienes un SVG de una herramienta de diseño y necesitas un PNG para un contexto que no acepta SVG.