SVGView

Formateador SVG

Haz el marcado SVG legible para revisiones y control de versiones. Ideal para diffs limpios y código mantenible. Abre archivos SVG online y empieza a procesarlos al instante.

Arrastra y suelta tu archivo SVG

o haz clic para buscar, o pega el código SVG

Solo acepta archivos .svg
Pega el código SVG con Ctrl+V / Cmd+V

¿Por qué usar nuestro formateador SVG?

Indentación limpia

Aplica indentación y saltos de línea consistentes para que grupos anidados sean fáciles de seguir. Esto acelera code reviews y evita re-formateo manual. También estabiliza el orden de atributos y reduce conflictos de merge.

Salida más legible

Reduce ruido para que los diffs muestren cambios reales, no solo whitespace. Una estructura clara ayuda a detectar atributos faltantes o grupos extraños y facilita onboarding de nuevos contribuidores.

Seguro visualmente

Solo cambia whitespace, así que geometría y estilos se mantienen. Obtienes marcado limpio con los mismos píxeles, gradientes y transforms. Es seguro antes de optimización o conversión.

Listo para copiar

Genera marcado ideal para pegar en docs, specs y stories. Compartes código limpio sin pases extra.

Prettify con SVGO

Usa salida pretty de SVGO para una estructura predecible. Esto hace que el formato sea consistente entre archivos de diferentes herramientas de diseño y facilita comparaciones automatizadas.

Procesamiento local

Se ejecuta en el navegador, sin subidas. Útil para assets privados, trabajo de clientes u offline.

Cómo embellecer un SVG

1

Sube tu SVG

Arrastra y suelta un archivo o pega el marcado. La herramienta carga en local y prepara una vista previa para verificar. Puedes pegar exports crudos o un sprite copiado. Abre archivos SVG online y empieza a procesarlos al instante.

2

Ejecuta el formateador

Aplica indentación y saltos de línea consistentes. La salida queda visualmente idéntica pero la estructura se vuelve más clara. Puedes volver a ejecutar tras ediciones manuales para mantener consistencia.

3

Copia o descarga

Copia el marcado formateado o descarga el archivo. Se mantienen nombres de archivo para reemplazarlo fácilmente en tu repo.

Preguntas frecuentes: Formateador SVG

¿Formatear cambia el resultado del SVG?
No. Solo cambia whitespace, así que el render se mantiene idéntico. Paths, fills y transforms no se alteran.
¿Formatear es lo mismo que optimizar?
No. Formatear mejora legibilidad; optimizar reduce tamaño eliminando datos redundantes. Formatea para diffs limpios y optimiza cuando necesitas compresión.
¿Se cambian viewBox o dimensiones?
No. Se preservan viewBox, width, height, IDs y clases para que selectores y scripts sigan funcionando.
¿Puedo copiar el SVG formateado?
Sí. Hay opciones de copiado y descarga, ideal para compartir en PRs, tickets o documentación.
¿Se sube el SVG a un servidor?
No. Se ejecuta en local en tu navegador, así que el archivo no sale del dispositivo.
¿Debo minificar después de formatear?
Si necesitas el tamaño mínimo, sí. Formatea para legibilidad y minifica para producción.
¿Cómo estandariza equipos el formato?
Ejecutar el formateador antes de commits hace que todos los assets sigan la misma estructura. Esto reduce conflictos y acelera revisión.
¿Ayuda a depurar?
Sí. Una jerarquía clara facilita localizar grupos, IDs y data de path. Combínalo con el viewer para cross-check de viewBox y dimensiones.
¿Sirve antes de convertir a componentes?
Sí. Un SVG legible es mejor input para generadores de componentes (por ejemplo, JSX). Facilita añadir props, titles o aria labels.
¿Maneja SVGs grandes?
Sí, aunque la salida será más larga. Es útil cuando necesitas revisar ilustraciones complejas o compartir marcado legible.
¿Es gratis y no requiere descarga?
Sí. Es gratis y funciona en el navegador, sin instalación.
¿Necesito una cuenta?
No. Funciona al instante sin registro y con archivos en local.

Herramientas SVG relacionadas

Combina formateo con estas herramientas para finalizar, optimizar o convertir tus assets.

SVG Minifier

Formatea para diffs limpios y luego minifica para producción.

Abrir herramienta

SVG Optimizer

Optimiza para eliminar redundancias manteniendo una estructura limpia.

Abrir herramienta

Limpieza SVG

Limpia metadatos primero y luego formatea para consistencia.

Abrir herramienta

SVG a React

Formatea antes de convertir a componentes React para una salida más limpia.

Abrir herramienta

Blog SVG relacionado

Continúa con guías prácticas sobre flujos SVG, resolución de problemas y producción.