Formateador y Embellecedor de Código SVG
Utilidad práctica para formateador y optimizador de vectores svg directamente en su navegador, con procesamiento local en memoria y sin enviar sus datos a servidores externos.
Acerca de Formateador y Embellecedor de Código SVG
Los gráficos vectoriales escalables (SVG) son gráficos vectoriales basados en XML utilizados en toda la web moderna para iconos, ilustraciones, logotipos y animaciones. Sin embargo, los archivos SVG exportados desde aplicaciones de diseño como Illustrator o Figma suelen contener XML desordenado y sin formato, espacios de nombres redundantes y espacios en blanco excesivos que aumentan el tamaño del archivo.
Esta utilidad embellece el código SVG sin procesar convirtiéndolo en XML limpio y sangrado para facilitar la revisión del código, e incluye un motor de minificación para comprimir el marcado de cara a producción. También incorpora un marco de vista previa vectorial en tiempo real para verificar que el gráfico se renderiza correctamente mientras edita.
Al ejecutar todo el procesamiento en el entorno aislado (sandbox) del navegador, se garantiza que los logotipos corporativos confidenciales, los sistemas de iconos y los recursos gráficos inéditos permanezcan protegidos en su dispositivo.
Para exportar recursos vectoriales, renderice archivos de mapa de bits con el conversor de SVG a PNG y escape el marcado con el codificador de entidades HTML.
Especificaciones de ingeniería y detalles de ejecución
El formateo XML analiza los límites de las etiquetas mediante búsquedas anticipadas (lookaheads) con expresiones regulares, creando un sangrado uniforme sin alterar cadenas de atributos internos ni contenidos textuales.
La minificación elimina los espacios en blanco entre etiquetas mientras conserva el espaciado imprescindible dentro de los atributos de datos de trazado (d="...") y las coordenadas de viewBox.
El marco de vista previa inserta el marcado de forma segura en un contenedor aislado, renderizando los trazados vectoriales nativos sin ejecutar etiquetas de script incrustadas.
Conserva los encabezados de declaración XML y los atributos de espacio de nombres SVG cuando se solicita.
Procesa gráficos vectoriales complejos de varios megabytes que contienen miles de puntos de coordenadas en milisegundos.
Privacidad de datos y aislamiento en memoria
Todo el formateo vectorial y la representación en el DOM tienen lugar en la memoria local del navegador.
Ningún código SVG, trazado vectorial ni gráfico confidencial se envía a puntos de conexión de terceros ni se almacena en bases de datos del navegador.
Casos de uso comunes en producción
- Desarrolladores frontend que depuran y limpian iconos vectoriales antes de incrustarlos de forma directa en plantillas de React, Vue o HTML.
- Diseñadores de interfaces de usuario que inspeccionan trazados vectoriales, degradados y máscaras de recorte (clipPath) exportados desde Figma.
- Ingenieros de rendimiento web que minifican recursos SVG para reducir el peso inicial de carga de las páginas web.
- Redactores técnicos que dan formato a fragmentos de código SVG para blogs de desarrollo y documentación técnica.
- Ingenieros de sistemas de diseño que normalizan colecciones de iconos según estándares uniformes de sangría.
Casos extremos y límites operativos
- Fuentes e imágenes externas: los trazados SVG que contienen referencias externas (como archivos tipográficos remotos o imágenes de mapa de bits enlazadas) requieren permisos CORS para renderizarse en el marco de vista previa.
- XML mal formado: si un archivo SVG presenta etiquetas sin cerrar o una sintaxis XML no válida, el panel de vista previa mostrará un aviso recomendando revisar las etiquetas de cierre.
- Scripts incrustados: cualquier etiqueta <script> insertada en el código SVG pegado se neutraliza antes de mostrar la vista previa para proteger la seguridad del navegador.
- Espacios de nombres específicos: las etiquetas propietarias de programas como Inkscape o Illustrator (como los atributos sodipodi o inkscape) se preservan durante el formateo.
Preguntas Frecuentes
¿Por qué es recomendable formatear el código SVG?
Las herramientas de diseño suelen exportar los archivos SVG en una única línea ilegible o con espaciados irregulares. El formateo facilita inspeccionar los datos del trazado, ajustar colores de relleno y añadir clases CSS.
¿La minificación de un SVG reduce la calidad visual?
No. Minificar únicamente elimina los espacios en blanco prescindibles y los saltos de línea entre etiquetas XML. Las coordenadas vectoriales y las curvas de los trazados permanecen intactas.
¿Es posible utilizar esta herramienta sin conexión a internet?
Sí. Todo el formateo XML y el renderizado SVG se ejecutan al cien por cien de forma local en su navegador.
¿Cuál es la diferencia entre un SVG en línea y una etiqueta de imagen?
El SVG en línea introduce el XML original directamente en el documento HTML, lo que permite estilizar los trazados mediante CSS y animarlos. Una etiqueta de imagen (<img src="icon.svg" alt="Ejemplo">) trata el archivo SVG como un recurso estático externo.
¿Qué función cumple el atributo viewBox en un SVG?
El atributo viewBox define el sistema de coordenadas y la relación de aspecto del lienzo SVG, permitiendo que escale con total nitidez en cualquier resolución de pantalla.
¿Se puede modificar el color de un SVG en línea mediante CSS?
Sí. Al definir los atributos "fill" o "stroke" con el valor "currentColor", el gráfico SVG hereda el color de texto de su elemento contenedor en CSS.
¿Por qué Figma exporta envoltorios clipPath innecesarios?
Las aplicaciones de diseño exportan las máscaras de los marcos como elementos clipPath para garantizar el aislamiento visual, aunque una limpieza manual suele permitir prescindir de esos contenedores redundantes.
¿Cómo puedo convertir un SVG en un data URI de fondo para CSS?
Haga clic en Exportar Data URI para codificar el SVG minificado en una cadena data:image/svg+xml lista para pegar en declaraciones url() de CSS.
¿El formateador elimina scripts maliciosos de archivos SVG que no son de confianza?
Sí. El proceso de saneamiento suprime etiquetas script, pseudoprotocolos javascript: y controladores de eventos en línea como onload u onclick.