Loading…

Acerca de Embellecedor y Minificador SVG en Línea

¿Trabajas con archivos SVG desordenados o demasiado grandes? Pega tu código o sube un archivo `.svg`, elige **Formatear** para embellecer o **Minificar** para reducir su tamaño, y obtén al instante un marcado SVG limpio y optimizado. Perfecto para diseñadores, desarrolladores front-end y cualquiera que necesite una optimización vectorial rápida y segura. 🚀

Características Principales de Nuestro Formateador SVG

  • **Modo Embellecer** con indentación inteligente, ajuste de líneas y alineación de atributos
  • **Modo Minificar** que elimina espacios en blanco, comentarios y metadatos redundantes
  • Formateo estilo Prettier y optimización estilo SVGO bajo el capó
  • Estilo de indentación configurable (espacios o tabulaciones) y tamaño de indentación
  • Columna de ajuste opcional para mantener rutas y atributos largos ordenados
  • Estilo consistente de fin de línea (LF / CRLF) para diferencias limpias entre sistemas operativos
  • Arrastra y suelta archivos `.svg` de hasta 5 MB o pega marcado SVG en línea
  • Procesamiento 100% del lado del cliente — tu arte nunca sale del navegador
  • Copia con un clic o descarga del resultado formateado (`.formatted.svg`) o minimizado (`.min.svg`)
  • Interfaz de usuario responsiva que funciona bien en portátiles, escritorios y tabletas

🔧 Cómo Formatear o Minimizar SVG: Guía Rápida for svg-formatter

1

1. Pegar o Cargar SVG

📥 Arrastra y suelta tu archivo `.svg` o pega el marcado SVG crudo en el editor. La herramienta detecta automáticamente el contenido estándar `image/svg+xml`.

2

2. Elegir Formatear o Minimizar

✨ Selecciona **Formatear** para marcado legible por humanos (ideal para revisiones y control de versiones) o **Minimizar** para el tamaño de archivo más pequeño posible.

3

3. Ajustar Opciones de Formateo

⚙️ Ajusta **Estilo de Sangría** (espacios o tabulaciones), **Tamaño de Sangría** y opcionalmente **Ajuste / Longitud de Línea**. Estos se mapean directamente a las configuraciones del formateador subyacente.

4

4. Vista Previa y Exportar

👀 Inspecciona el código SVG optimizado, pruébalo rápidamente en tu proyecto, luego cópialo al portapapeles o descarga el resultado como un nuevo archivo `.svg`.

Detalles Técnicos

Motor de Embellecimiento (Modo Formatear)

El modo Formatear utiliza un motor estilo Prettier ajustado para marcado XML de SVG. Se enfoca en legibilidad y diferencias estables y predecibles.

AspectoComportamientoNotas
Estilo de SangríaEspacios o TabulacionesConfigurable mediante **Estilo de Sangría** (se mapea a `indentStyle`).
Tamaño de Sangría1–8 espaciosControla el ancho de anidación al usar espacios (se mapea a `indentSize`).
Ajuste / Longitud de Línea0–120 columnas`0` desactiva el ajuste; de lo contrario, las líneas largas se ajustan alrededor de la columna elegida (se mapea a `wrapLineLength`).
Fin de LíneaLF (`\n`) o CRLF (`\r\n`)Mantiene los fines de línea consistentes entre sistemas operativos (se mapea a `endOfLine`).
Idioma de SalidaSVG estilo XMLMantiene la estructura XML compatible con SVG para una inserción segura.

Canal de Minificación (Modo Minificar)

El modo minificar utiliza un canal inspirado en SVGO centrado en la reducción de tamaño mientras preserva la salida visual.

PasoDescripciónImpacto
Eliminar comentariosElimina nodos de comentario `<!-- ... -->` que no afectan el renderizado.Archivos más pequeños, diferencias más limpias.
Eliminar espacios en blanco redundantesComprime espacios, tabulaciones y saltos de línea innecesarios.Grandes beneficios para SVGs exportados desde editores verbosos.
Recortar metadatosOpcionalmente elimina nodos de metadatos que no se renderizan cuando es seguro.Bueno para recursos de producción públicos.
Normalizar atributosSimplifica y reordena atributos de manera estable.Salida más compacta, mejor capacidad de almacenamiento en caché.

Codificación y Compatibilidad

La salida es SVG UTF-8 compatible con navegadores y herramientas modernos, alineada con la especificación SVG 2.

Rendimiento y Límites (Navegador de Escritorio Típico)

Tipo de ArchivoTamaño de EntradaTiempo de EmbellecimientoTiempo de MinificaciónReducción de Tamaño Típica
Icono5 KB⚡ < 15 ms⚡ < 20 ms≈ 25–40%
Ilustración100 KB⚡ < 60 ms⚡ < 90 ms≈ 40–55%
Gráfico Hero500 KB⏱️ < 300 ms⏱️ < 450 ms≈ 50–60%
El rendimiento real depende de tu CPU, navegador y la complejidad del SVG.

Alternativas CLI para Usuarios Avanzados

¿Prefieres flujos de trabajo en terminal o integración con CI? Combina Prettier y SVGO para un comportamiento similar a esta herramienta:

Linux / 🍎 macOS

Embellecer SVG con Prettier

npx prettier --parser xml --print-width 80 --tab-width 2 --write input.svg

Aplica indentación consistente y ajuste de líneas a tu marcado SVG.

Minificar SVG con SVGO

npx svgo input.svg -o input.min.svg

Elimina comentarios, metadatos y espacios en blanco redundantes para archivos más pequeños.

Windows (PowerShell o CMD)

Formatear SVG usando xmlstarlet (a través de WSL o nativo)

xmlstarlet fo --indent-spaces 2 input.svg > pretty.svg

Formatea SVG/XML con una indentación de 2 espacios.

Minificar SVG con SVGO (sin instalación global)

npx svgo input.svg -o min.svg

Ejecuta SVGO directamente a través de `npx` para optimizaciones puntuales.

Agrega Prettier + SVGO a tu proceso de compilación o hooks pre-commit para que los diseñadores puedan exportar SVGs crudos y tu pipeline los mantenga optimizados.

Aplicaciones Prácticas

Rendimiento Web y Paquetes Frontend

  • Reduce las cargas útiles de SVG en sistemas de diseño, conjuntos de iconos y hojas de sprites.
  • Incluye SVG minificado en HTML/CSS para ahorrar solicitudes HTTP adicionales.
  • Mejora las Core Web Vitals reduciendo las ilustraciones hero en páginas de destino.
<img src="/assets/hero.min.svg" alt="Gráfico hero optimizado" />
.icon-check { background-image: url('data:image/svg+xml;utf8,<svg ...>'); }

Entrega de Diseño y Control de Versiones

  • Embellece SVG exportado antes de la revisión de código para que las diferencias sean legibles.
  • Mantén un `.formatted.svg` para colaboración y un `.min.svg` para producción.
  • Aplica indentación consistente y orden de atributos en todo el sistema de diseño.

Móviles, Correos y Aplicaciones Híbridas

  • Minifica SVGs en línea en correos HTML para campañas más ligeras.
  • Reduce el tamaño del paquete de la aplicación en React Native / Capacitor / Ionic al incluir muchos iconos.
  • Ahorra ancho de banda para usuarios con conexiones lentas o con límite de datos.

❓ Frequently Asked Questions

❓¿Qué es el formateo de SVG?

El formateo (o embellecimiento) reestructura tu marcado SVG con sangrado consistente, saltos de línea y orden de atributos. No cambia cómo se renderiza la imagen, solo cómo se ve el código y su comportamiento en diferencias.

📏¿La minificación alterará la apariencia de mi SVG?

En casos normales, no. La minificación elimina comentarios, espacios en blanco redundantes y metadatos no renderizables. Está diseñada para preservar el resultado visual mientras reduce el tamaño. Si dependes de metadatos especiales para herramientas de edición, guarda una copia de seguridad del archivo original.

🔒¿Se sube mi SVG a un servidor?

Nunca. Todo el formateo y minificación se ejecutan completamente en tu navegador usando JavaScript/WebAssembly. Tus archivos SVG no se envían a ningún servidor ni se almacenan remotamente.

🚀¿Cuánto tamaño puede ahorrar la minificación?

Los ahorros en casos reales suelen estar entre **30% y 70%**, dependiendo de cómo se exportó el SVG y cuántos metadatos o espacios en blanco contiene.

⚠️¿Puede la eliminación de `<metadatos>` o comentarios romper mi flujo de trabajo?

Para gráficos web públicos, eliminar metadatos y comentarios suele ser seguro. Sin embargo, si tus herramientas de diseño almacenan datos de edición o información de licencia en esas secciones, mantén una copia original sin minificar en control de versiones para futuras ediciones.

Pro Tips

Best Practice

Mantén un `icon.formatted.svg` sin minificar en tu repositorio para diferencias limpias, luego genera `icon.min.svg` como parte de tu paso de compilación.

Best Practice

Siempre incluye elementos significativos `<title>` y `<desc>` antes de minificar para mantener tus SVGs accesibles para lectores de pantalla.

Best Practice

Combina la minificación SVG con compresión HTTP (Gzip/Brotli) para exprimir aún más bytes de ilustraciones y gráficos pesados.

Best Practice

Para conjuntos de iconos, considera una estrategia de sprite: minifica una vez, luego referencia iconos mediante `<use>` en lugar de duplicar código SVG en todas partes.

Additional Resources

Especificación W3C SVG 2
Documentation
MDN Web Docs: SVG
Documentation
SVGO (GitHub)
Documentation
Formateo Prettier XML / SVG
Documentation

Other Tools