Optimizar SVG en línea — Ajustes preestablecidos SVGO

Optimización SVGO (safe, default, aggressive) más allá del minify rápido — procesamiento 100 % local.

Cargando…
Optimizador SVG — guía SVGO
Optimiza SVG en profundidad con presets SVGO más allá del minify regex rápido. Elige Safe, equilibrado o Aggressive — todo permanece en tu navegador.

Notas para desarrolladores

SVGO se carga bajo demanda (~780 KB) solo cuando optimizas — no en las páginas minify-svg. Safe mantiene paths e IDs intactos; Aggressive puede fusionar paths para una salida más pequeña. La entrada está limitada a 512 KB para mantener la pestaña fluida. Para quitar espacios en blanco rápido sin SVGO, usa minify-svg.

Opciones

Preset SVGO
Elige Safe (riesgo mínimo), Default (SVGO equilibrado) o Aggressive (máxima reducción de tamaño — puede alterar el visual). El valor inicial es Default.

Cuándo elegir esta herramienta

Reducir exports de Figma o Illustrator antes de publicar iconos. Comparar Safe vs Aggressive en ilustraciones de marketing. Preparar candidatos a sprite conservando title/desc para accesibilidad. Revisar un asset a la vez sin montar un CLI.

Ejemplos prácticos

Badge de marketing con metadatos

Entrada de ejemplo

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"> <title id="badge-title">Fast delivery badge</title> <desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc> <defs> <linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#f97316"/> <stop offset="100%" stop-color="#fb923c"/> </linearGradient> <clipPath id="badgeClip"> <rect x="0" y="0" width="240" height="72" rx="18" ry="18"/> </clipPath> </defs> <g clip-path="url(#badgeClip)"> <rect width="240" height="72" fill="url(#badgeGradient)"/> <g transform="translate(20 16)"> <circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/> <path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/> </g> <g font-family="Inter, Arial, sans-serif" fill="#fff"> <text x="76" y="31" font-size="18" font-weight="700">FastMinify</text> <text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text> </g> </g> </svg>

Salida

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" class="promo-badge" role="img" aria-labelledby="badge-title badge-desc"><title id="badge-title">Fast delivery badge</title><desc id="badge-desc">Rounded badge with lightning icon and gradient background.</desc><defs><linearGradient id="badgeGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#f97316"/><stop offset="100%" stop-color="#fb923c"/></linearGradient><clipPath id="badgeClip"><rect x="0" y="0" width="240" height="72" rx="18" ry="18"/></clipPath></defs><g clip-path="url(#badgeClip)"><rect width="240" height="72" fill="url(#badgeGradient)"/><g transform="translate(20 16)"><circle cx="20" cy="20" r="20" fill="#0f172a" fill-opacity="0.14"/><path fill="#fff" d="M24 4 11 22h9l-4 14 13-18h-9z"/></g><g font-family="Inter, Arial, sans-serif" fill="#fff"><text x="76" y="31" font-size="18" font-weight="700">FastMinify</text><text x="76" y="49" font-size="12" fill-opacity="0.92">Optimized SVG asset</text></g></g></svg>

Ahorro con preset Default

Entrada de ejemplo

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"> <title>Star</title> <path fill="currentColor" d="M12 2l3 7h7l-5.5 4 2 7L12 17l-6.5 3 2-7L2 9h7z"/> </svg>

Salida

SVG más pequeño con comentarios y espacios en blanco eliminados por SVGO.

Explorar herramientas SVG relacionadas

¿Necesitas una compresión rápida solo de espacios? Usa minify SVG. Convierte a React con SVG a JSX o recorre el hub de herramientas SVG.

FAQ del optimizador SVG

Presets SVGO en el navegador

¿Cuándo usar minify-svg frente a optimize-svg?

Usa minify-svg para quitar espacios con regex al instante. Usa optimize-svg cuando necesites limpieza de paths SVGO y profundidad controlada por preset.

¿Qué preset debo elegir?

Safe para iconos con IDs, Default para la mayoría de assets de producción, Aggressive cuando el tamaño importa más que la fidelidad de los paths.

¿Se sube mi SVG?

Nunca — SVGO se ejecuta en local después de cargar la librería.

¿Archivos grandes?

Las entradas de más de 512 KB se rechazan con un mensaje claro para proteger la memoria del navegador.

Previsualiza, optimiza con SVGO, exporta Data URI, redimensiona, embellece, convierte a JSX y valida SVG — todo en tu navegador.