JSON.FORMATHub of five tools: format, validate, minify, convert to XML, and compare two JSON documents.//REGEX.TESTERReal-time regular expressions tester, cheatsheet, debugger and replacer.//PDF.SUITEMerge, split, extract text, rotate and convert PDF pages to images.//IMAGE.STUDIOIn-browser photo editor: crop, resize, filters, WebP/PNG and Base64 encoder.//HTML.BEAUTIFYHTML code beautifier, production minifier and entity encoder.//CSS.MINIFYCSS code formatter, production stylesheet minifier and CSS to SCSS converter.//SQL.FORMATTERSQL query beautifier, dialect translator (Postgres/MySQL) and minifier.//SVG.EXCALIDRAWInteractive vector visual editor powered by Excalidraw and SVG formatter.//TEXT.DIFFWord counter, reading time estimator and dual-text diff comparator.//YAML.CONVERTYAML & JSON bi-directional validator and formatter with syntax checking.//XML.PARSERXML document formatter, tree inspector and XML to JSON converter.//GRAPHQL.STUDIOGraphQL query & SDL formatter, minifier, AST field sorter and validator.//BASE64.CODECBase64 and URL-Safe encoder / decoder with full UTF-8 verification.//PASSWORD.GENCryptographically secure random password and entropy strength generator.//URL.STUDIO8-tool URL suite: encode, decode, validator, component parser and builder.//QR.STUDIOCustom QR code generator with embedded logos, colors, gradients and shapes.//ASCII.EXPLORERInteractive ASCII 0-255 table, Alt keyboard codes and CP437 symbols.//KEYCODES.LIVELive KeyboardEvent detector and JavaScript keycodes cheat sheet.//JWT.DEBUGGERJWT token decoder, claims inspector and Web Crypto signature verification.//BINARY.CODECBidirectional text to binary converter with digital rain and ASCII table.//CHARTS.STUDIOInteractive chart generator (bars, lines, pie, scatter) from CSV data.//UUID.V7Bulk generator for UUID v4, time-ordered v7, v1 and live UUID validator.//CSV.JSONBi-directional CSV to JSON converter with custom delimiters & table grid.//COLORS.STUDIOHEX/RGB/HSL/CMYK converter, palette harmonies and WCAG 2.1 contrast tester.//SEO.METASEO Meta Tags, Open Graph cards and real-time Google SERP card preview.//SCHEMA.JSONLDSchema.org JSON-LD structured data generator for Google Rich Snippets.//SITEMAP.XMLStandard XML Sitemap generator (Protocol 0.9) for Google Search Console.//ROBOTS.TXTRobots.txt generator, AI scraper blocking presets and live URL rule tester.//FAKE.DATASynthetic mock data generator: export records to JSON, CSV, SQL and TypeScript.//CLOCK.WORLDReal-time world clock with 3D holographic globe and 174 country timezones.//DATE.CALCDays between dates, exact age, business days, Unix timestamp and cron parser.//CALC.SUITESuite of 56+ online calculators: percentage, mortgage, loan, VAT, BMI & salary.//JSON.FORMATHub of five tools: format, validate, minify, convert to XML, and compare two JSON documents.//REGEX.TESTERReal-time regular expressions tester, cheatsheet, debugger and replacer.//PDF.SUITEMerge, split, extract text, rotate and convert PDF pages to images.//IMAGE.STUDIOIn-browser photo editor: crop, resize, filters, WebP/PNG and Base64 encoder.//HTML.BEAUTIFYHTML code beautifier, production minifier and entity encoder.//CSS.MINIFYCSS code formatter, production stylesheet minifier and CSS to SCSS converter.//SQL.FORMATTERSQL query beautifier, dialect translator (Postgres/MySQL) and minifier.//SVG.EXCALIDRAWInteractive vector visual editor powered by Excalidraw and SVG formatter.//TEXT.DIFFWord counter, reading time estimator and dual-text diff comparator.//YAML.CONVERTYAML & JSON bi-directional validator and formatter with syntax checking.//XML.PARSERXML document formatter, tree inspector and XML to JSON converter.//GRAPHQL.STUDIOGraphQL query & SDL formatter, minifier, AST field sorter and validator.//BASE64.CODECBase64 and URL-Safe encoder / decoder with full UTF-8 verification.//PASSWORD.GENCryptographically secure random password and entropy strength generator.//URL.STUDIO8-tool URL suite: encode, decode, validator, component parser and builder.//QR.STUDIOCustom QR code generator with embedded logos, colors, gradients and shapes.//ASCII.EXPLORERInteractive ASCII 0-255 table, Alt keyboard codes and CP437 symbols.//KEYCODES.LIVELive KeyboardEvent detector and JavaScript keycodes cheat sheet.//JWT.DEBUGGERJWT token decoder, claims inspector and Web Crypto signature verification.//BINARY.CODECBidirectional text to binary converter with digital rain and ASCII table.//CHARTS.STUDIOInteractive chart generator (bars, lines, pie, scatter) from CSV data.//UUID.V7Bulk generator for UUID v4, time-ordered v7, v1 and live UUID validator.//CSV.JSONBi-directional CSV to JSON converter with custom delimiters & table grid.//COLORS.STUDIOHEX/RGB/HSL/CMYK converter, palette harmonies and WCAG 2.1 contrast tester.//SEO.METASEO Meta Tags, Open Graph cards and real-time Google SERP card preview.//SCHEMA.JSONLDSchema.org JSON-LD structured data generator for Google Rich Snippets.//SITEMAP.XMLStandard XML Sitemap generator (Protocol 0.9) for Google Search Console.//ROBOTS.TXTRobots.txt generator, AI scraper blocking presets and live URL rule tester.//FAKE.DATASynthetic mock data generator: export records to JSON, CSV, SQL and TypeScript.//CLOCK.WORLDReal-time world clock with 3D holographic globe and 174 country timezones.//DATE.CALCDays between dates, exact age, business days, Unix timestamp and cron parser.//CALC.SUITESuite of 56+ online calculators: percentage, mortgage, loan, VAT, BMI & salary.//

MODULE 14 · GRAPHICS

SVG Tools & Visual Editor (Excalidraw)

Visual vector editor powered by Excalidraw, formatter, and validator for SVG documents.

Indentation

Input (Original)SVG MARKUP

292 chars

Output / Result (Editor / Formatted)OUTPUT

Visual SVG Editor (Excalidraw)

Interactive vector canvas · export & sync

EXCALIDRAW STUDIO// VECTOR CANVAS

Auto-sync

LOADING EXCALIDRAW CANVAS...

100% private local SVG editing — zero server uploads⚡ Powered by Excalidraw · MIT License↗

// Technical guide & specifications

How to use the SVG formatter and the editor

The markup is at the top. The canvas below draws it and exports it back.

1. Format and validate the markup

Paste the SVG, format it so the groups and paths are readable, then validate. A valid document reports its root tag. An SVG missing xmlns, or a tag left open, fails validation before the browser draws it halfway.

2. A minimal example

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/></svg> is a circle. The viewBox is the coordinate system. When you export from the canvas, that XML comes back to the output panel to copy.

3. The editor

Draw on the canvas and export the SVG back into the text field. This is not a stand-in for Illustrator. It fits an icon, a short diagram, or cleaning a path before you paste it into a component.

// Architecture & best practices

❓ Questions about SVG

Why does the icon look huge or cropped?

The viewBox is missing, or width and height do not match the drawing. Add viewBox="0 0 width height" using the real bounds of the content.

Can I paste an SVG exported from Figma with metadata?

Yes. Format it and delete comments and attributes you do not use. Validation only checks that the XML is well formed, not that the icon is small.

Is the file uploaded to a server to draw it?

The canvas draws in the browser. Text formatting on this site follows the same API path as the other formatters.

Related tools

Images

Convert PNG, JPG, and WebP.

Open tool →COLOR

Colors

Turn a HEX into RGB before you paint the SVG.