UTILSBOX⚡TODAS LAS TOOLS54+
JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//JSON.FORMATHub de cinco herramientas: formatear, validar, minificar, pasar a XML y comparar dos JSON.//REGEX.TESTERProbador de expresiones regulares en tiempo real con explicación y reemplazo.//PDF.SUITEUnir, dividir, extraer texto, rotar y convertir páginas PDF a imágenes.//IMAGE.STUDIOEditor de fotos en el navegador: recortar, filtros, WebP, PNG y Base64.//HTML.BEAUTIFYFormateador de código HTML, minificador y codificador de entidades.//CSS.MINIFYFormateador de CSS, minificador para producción y conversor CSS a SCSS.//SQL.FORMATTEREmbellecedor de queries SQL, traductor entre dialectos y minificador.//SVG.EXCALIDRAWEditor visual vectorial integrado con Excalidraw y formateador SVG.//TEXT.DIFFContador de palabras, caracteres, tiempo de lectura y comparador Diff.//YAML.CONVERTValidador y formateador de archivos YAML/JSON con detección de sintaxis.//XML.PARSERFormateador de documentos XML, inspector de árbol y conversor a JSON.//GRAPHQL.STUDIOFormateador de queries y schemas SDL, minificador y clasificador AST.//BASE64.CODECCodificador y decodificador Base64 y URL-Safe con soporte UTF-8.//PASSWORD.GENGenerador de contraseñas criptográficamente seguras con medidor de entropía.//URL.STUDIOSuite de 8 herramientas: encode, decode, parse, build y query string.//QR.STUDIOCreador de códigos QR personalizados con logos, colores y degradados.//ASCII.EXPLORERTabla interactiva ASCII 0-255, atajos de teclado Alt y códigos CP437.//KEYCODES.LIVEDetector en vivo de eventos KeyboardEvent y tabla de códigos JavaScript.//JWT.DEBUGGERDecodificador de tokens JWT, claims y verificación de firma con Web Crypto.//BINARY.CODECConversor bidireccional texto a binario con lluvia Matrix y desglose ASCII.//CHARTS.STUDIOGenerador de gráficos interactivos (barras, líneas, torta) a partir de CSV.//UUID.V7Generador masivo de UUID v4, v7 ordenado por tiempo, v1 y validador.//CSV.JSONConversor bidireccional CSV a JSON con delimitadores y visor de tablas.//COLORS.STUDIOConvertidor HEX/RGB/HSL/CMYK, armonías cromáticas y contraste WCAG 2.1.//SEO.METAGenerador de Meta Tags, Open Graph y preview en vivo de Google SERP.//SCHEMA.JSONLDGenerador de datos estructurados Schema.org para Google Rich Snippets.//SITEMAP.XMLGenerador de sitemaps XML estándar (Protocolo 0.9) para Google y Bing.//ROBOTS.TXTGenerador de robots.txt, bloqueo de scrapers de IA y probador de rutas.//FAKE.DATAGenerador de mocks y datos sintéticos: exporta a JSON, CSV, SQL y TypeScript.//CLOCK.WORLDReloj mundial en tiempo real con globo 3D holográfico y husos horarios.//DATE.CALCDías entre fechas, edad exacta, días hábiles, Unix timestamp y cron parser.//CALC.SUITESuite de 56+ calculadoras: porcentajes, hipotecas, préstamos, IVA, IMC y sueldos.//
MODULE 14 · GRAPHICS

SVG Tools & Editor Visual (Excalidraw)

Editor visual vectorizado con Excalidraw, formateador y validador de documentos SVG.

Indentación
Entrada (Original)CÓDIGO SVG
292 chars
Salida / Resultado (Editor / Formateado)OUTPUT

Editor Visual SVG (Excalidraw)

Lienzo interactivo vectorial · exportación y sincronización
EXCALIDRAW STUDIO// VECTOR CANVAS
LOADING EXCALIDRAW CANVAS...
Edición y exportación de SVG 100% local en tu navegador⚡ Powered by Excalidraw · MIT License↗
// Guía técnica y especificaciones

Cómo usar el formateador y el editor SVG

Arriba está el código. Abajo, el lienzo para dibujar y volver a exportar.

1. Formatear y validar el código

Pegá el marcado SVG, formateá para leer los grupos y los path, y validá. Si el documento es válido, la pantalla dice la etiqueta raíz. Un SVG sin xmlns o con una etiqueta sin cerrar falla la validación antes de que el navegador lo dibuje a medias.

2. Un ejemplo mínimo

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> es un círculo. El viewBox define el sistema de coordenadas. Si exportás desde el lienzo, ese XML vuelve al panel de salida para copiarlo.

3. El editor

Dibujá en el lienzo y exportá el SVG de nuevo al campo de texto. No es un reemplazo de Illustrator: sirve para un ícono, un diagrama corto o para limpiar un path antes de pegarlo en un componente.

// Arquitectura y buenas prácticas

❓ Preguntas sobre SVG

¿Por qué el ícono se ve enorme o cortado?

Falta el viewBox o el width y el height no coinciden con el dibujo. Agregá viewBox="0 0 ancho alto" con los límites reales del contenido.

¿Puedo pegar un SVG exportado de Figma con metadatos?

Sí. Formatealo y borrá los comentarios y atributos que no uses. La validación solo comprueba que el XML esté bien formado, no que sea un ícono liviano.

¿El archivo se sube a un servidor para dibujarlo?

No. El formateo que llama a la API es el del texto, igual que otros formateadores. El lienzo dibuja en el navegador.

Herramientas relacionadas

MEDIA

Imágenes

Convertí PNG, JPG y WebP.

Abrir herramienta →COLOR

Colores

Pasá un HEX a RGB antes de pintar el SVG.

Abrir herramienta →