Softonic

Comprimir SVG

Paso 1 / 2
Siguiente

Un SVG exportado de Figma, Illustrator o Sketch generalmente lleva de 2 a 5 veces más marcado del necesario: espacios de nombres del editor, comentarios, grupos vacíos, transformaciones redundantes y coordenadas con 6 decimales. Esta herramienta procesa tu SVG a través de un pase estilo SVGO, eliminando el ruido mientras mantiene la salida renderizada idéntica en píxeles.

Cómo comprimir un SVG

  1. 1

    Pega o sube tu SVG

    Acepta texto XML en bruto o un archivo .svg.

  2. 2

    Elige un nivel de optimización

    Seguro (eliminar comentarios y metadatos del editor), agresivo (colapsar grupos, redondear coordenadas, fusionar rutas) o personalizado.

  3. 3

    Revisa la diferencia

    Compara el conteo de bytes antes y después, y previsualiza el resultado renderizado para confirmar que nada cambió visualmente.

  4. 4

    Copia o descarga

    Pega el SVG optimizado directamente en tu código, o guarda como un archivo.

Qué inflará un SVG

Abre un SVG exportado de Figma en un editor de texto y típicamente verás:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generador: Figma ... -->
  <title>icono</title>
  <desc>Creado con Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Casi cada línea es removible. La salida renderizada solo necesita el svg, viewBox y path.

Qué elimina el optimizador

Eliminado Por qué es seguro
Comentarios XML Nunca se renderiza
Espacios de nombres del editor (sketch, figma) No utilizados por los navegadores
<title> / <desc> (opcional) Texto accesible, mantener si es significativo
Grupos <g> vacíos Sin efecto visual
Valores de atributo por defecto Los navegadores usan valores por defecto de todos modos
Transformaciones de identidad translate(0,0) no hace nada
Decimales de coordenadas 3 decimales se ven idénticos en pantalla
IDs no utilizados Solo mantener IDs referenciados en otros lugares

Precauciones

  • No eliminar IDs referenciados por CSS o por url(#...) en rellenos, máscaras, filtros. El modo agresivo puede romper gradientes.
  • Mantener viewBox. Sin él, el SVG no escalará de manera responsiva.
  • Mantener <title> si dependes de él para accesibilidad (los lectores de pantalla lo anuncian).
  • Evitar colapsar instancias <use>. El optimizador puede inlinearlas y perder el patrón de fuente de verdad.

Cuándo la compresión ahorra bytes reales

SVG es texto, lo que significa que gzip en el servidor ya elimina gran parte de la redundancia. Un SVG que pasa de 4KB a 1KB sin comprimir podría bajar solo de 1.2KB a 0.7KB en la transmisión. Aún así vale la pena, y la fuente más pequeña es más fácil de leer.

Preguntas frecuentes

El modo seguro no lo hará. El modo agresivo puede eliminar IDs referenciados por CSS o animaciones SMIL, si tu SVG tiene animaciones, usa el modo seguro o añade manualmente los IDs a la lista de excepciones.

Las exportaciones de Figma/Illustrator típicamente se reducen un 50-80%. SVG escrito a mano ya es compacto y generalmente solo baja un 10-20%.

Por defecto sí, los atributos <title>, <desc> y aria-* se preservan. Puedes optar por eliminarlos si el SVG es puramente decorativo y el HTML circundante proporciona la etiqueta.

Sí. El atributo xmlns se mantiene porque es necesario al pegar SVG directamente en HTML. El SVG en línea es generalmente el método de entrega más rápido para íconos pequeños.

Herramientas relacionadas

Creador de listas por niveles

Crea una lista privada con texto e imágenes locales, personaliza niveles, clasifica con arrastre o teclado y exporta JSON, PNG o SVG.

Comprimir GIF

Reduce el tamaño de un GIF animado en el navegador: baja dimensiones, conserva menos fotogramas y ajusta la calidad de codificación. Previsualiza el bucle antes de descargar.

WebP a JPG

Convierte imágenes WebP a JPG/JPEG directamente en el navegador. Elige la calidad, aplana la transparencia sobre un color de fondo y descarga sin subir archivos.

Creador de GIF

Convierte una secuencia de imágenes en un GIF animado. Ajusta fotogramas por segundo, calidad y tamaño antes de exportar.

Generador de códigos de barras

Crea en el navegador códigos de barras 1D en Code 128, EAN, UPC, ITF-14 y otros formatos compatibles. Descarga el resultado como SVG o PNG.

Generador de códigos QR

Genera un código QR localmente en el navegador a partir de una URL, texto plano o una carga QR correctamente formateada, y descárgalo como PNG.