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.

Herramientas SVG

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

Explorar otras categorías de herramientas

Minificar

Reduce código y assets para producción — minifica JavaScript, CSS, HTML, JSON y XML antes de gzip o un despliegue CDN.

Embellecer

Haz el código legible con una indentación coherente — embellece JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML y más en tu navegador.

Desminificar

Expande código minificado o comprimido — desminifica JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML y otros formatos al depurar o revisar.

Conversión

Transforma datos entre JSON, YAML, XML y CSV en local — sin subidas a un servidor.

Preprocesadores CSS

Compila SCSS o LESS a CSS estándar en el navegador — combínalo con embellecer o minificar para un flujo de hoja de estilos completo.

Herramientas JSON

Valida, formatea, compara y explora payloads JSON — complementarias a minificadores y convertidores.

DevOps e Infra

Formato, validación y minificación de Terraform HCL, formato y lint de Dockerfile, validación de Docker Compose y .env.

CI/CD

GitHub Actions y GitLab CI — formatear YAML y comprobar la estructura de workflows/jobs en el navegador.

Logs y observabilidad

JSON/NDJSON línea a línea y access logs de Nginx/Apache — formato, filtro, validación y CSV/TSV.

Kubernetes

Manifiestos multi-doc, validación estructural, starters Ingress/Deployment y formato de values de Helm.

Red / IP

CIDR, subredes y ayudas IPv4/IPv6 — en tu navegador.

Seguridad y tokens

JWKS, certificados X.509 y escaneo de secretos — en local en el navegador.

API y esquemas

Herramientas OpenAPI para formatear, validar y analizar tus specs.

Codificación

Codifica o decodifica Base64, componentes URL y entidades HTML — solo en el cliente.

Utilidades para desarrolladores

Timestamps, UUID, ULID, Nanoid, cron, contraseñas, regex, slugify, bases numéricas, mayúsculas, diff de texto y chmod — todo en el cliente.

Texto y Markdown

Cuenta palabras, genera TOC Markdown y limpia listas de líneas — todo en tu navegador.

IA y LLM

Conteo de tokens, estimación de costes y ajuste a la ventana de contexto — 100 % en el navegador.

Datos de prueba

Valores de campo sintéticos para fixtures y seed de BD — primero números de teléfono en rangos reservados.

Serialización

Serializa y deserializa estructuras PHP junto a los flujos JSON.