// svg editor
Edit SVG in the browser, and see what is wrong.
Open a file, draw and edit it, and get a plain list of what would stop it working on a real site. Every problem has a fix button next to it, and nothing you open leaves your browser.
- 21 checks, from a missing viewBox to a script hiding in an icon
- Free with no account, and nothing is ever uploaded
- Export clean SVG, or a React, Vue or Svelte component
Opens straight into the editor. No sign up, and no watermark on what you save.
One Editor, Every Panel
Drawing, checking, optimizing and exporting all sit in the same window, so a file never has to leave to get finished.
Most editors draw. This one also checks
An icon that came out of a design tool usually looks fine in an SVG viewer and still misbehaves on a real page. It will not scale, or it ignores the text color around it, or it quietly carries a script.
Open a file and the Check panel counts what it found. Each item says what the problem is, why it matters and where it lives, and most have a Fix button that repairs it without touching anything else.
- Missing viewBox, hardcoded colors, no accessible name
- Duplicate ids, broken references, scripts and on-event handlers
- Editor metadata, embedded rasters, shapes off the canvas
The markup and the drawing, side by side
SVG is a picture and a text file at once, so the editor treats it as both. Change an attribute in the markup and the shape moves. Move the shape on the canvas and the attribute changes.
- Syntax errors show up as you type, with the line marked
- The file is never rewritten on open, so real problems stay visible
- Byte size updates in the status bar as you work
Then send it wherever it needs to go
Optimizing runs SVGO in your browser, with the plugin list laid out so you can see what each pass removed. When the file is clean, export it in the shape your project wants.
If cleaning is all you came for, the SVG optimizer does that step on its own page, and SVG to React handles a single icon.
- Free: SVG, minified SVG and PNG
- Pro: React, React with types, Vue, Svelte and Angular
- Pro: data URI, base64, CSS background, sprite symbol, JPEG and WebP
From Messy File To Shipped
Four steps, and the file never leaves your machine.
-
01
Open the file
Drop an SVG onto the canvas, or draw one from scratch. It is parsed in your browser, and nothing is uploaded.
-
02
Read what is wrong
The Check panel counts what it found and explains each item in plain words, naming the element it came from.
-
03
Fix it
Most items have a Fix button beside them. Fix everything runs them all in one pass and leaves the drawing alone.
-
04
Take it away
Export clean SVG or PNG for free, or a React, Vue, Svelte or Angular component with Pro.
Next To The Others
Every tool here is good at the job it was built for. The gap this one fills is the space between drawing an SVG and shipping one.
| Feature | CodeShack | SVGOMG | Boxy SVG | Figma |
|---|---|---|---|---|
| Built for | Editing and checking SVG for the web | Optimizing SVG | Drawing vector art | Interface design |
| Draw and edit shapes | Yes | No | Yes | Yes |
| Edit the markup in the app | Yes | Paste in, copy out | Yes | No |
| Optimizes with SVGO | Yes | Yes | No | No |
| Lists what is wrong with the file | 21 rules | No | No | No |
| Checks accessibility | Yes | No | No | No |
| Exports a framework component | Five formats | No | No | With a plugin |
| Works without an account | Yes | Yes | Free tier | Free tier |
Compared on each tool’s publicly documented features, checked in August 2026. “Lists what is wrong” means a panel that names specific problems in your file and offers a fix. If one of these tools adds that, tell us and we will update it.
Frequently Asked Questions
Everything worth knowing before you open a file
Is this SVG editor free?
Yes. Drawing, editing, all 21 checks and the one-click fixes are free, and you do not need an account. A CodeShack Pro membership adds the framework exports, the data URI and sprite outputs, JPEG and WebP, and icon set mode.
Do my files get uploaded?
No. The editor parses and rewrites every file inside your browser using JavaScript. Your artwork never reaches a CodeShack server, which also means the editor keeps working if you lose your connection.
What does the checker look for?
It runs 21 rules over the file. Among them are a missing viewBox, hardcoded colors that ignore currentColor, no accessible name and duplicate ids. It also flags broken references, scripts and on-event handlers, embedded raster images, leftover editor metadata and shapes sitting outside the canvas.
Is this an SVG validator?
Not in the W3C sense, since it does not check markup against a schema. It runs 21 rules for what breaks an SVG on a real page, such as a missing viewBox, a broken reference or a script, and names each one with a fix. To test well-formedness, use the SVG formatter.
Can I edit the SVG code directly?
Yes. A markup panel sits under the canvas and edits both ways. Change an attribute in the code and the drawing updates, or move a shape on the canvas and the code follows.
Can I open a file from Illustrator or Figma?
Yes, and those exports are the ones the checker is most useful on. Design tools leave metadata, hardcoded colors and long decimal numbers behind, and the checker lists each one with a fix.
What can I export?
Free accounts export SVG, minified SVG and PNG. Pro adds React, React with types, Vue, Svelte, Angular, a data URI, a base64 data URI, a CSS background, a sprite symbol, JPEG and WebP.
Does the editor work on a phone?
It runs, but it is built for a mouse and a keyboard. Panels, drag handles and node editing all need room. A laptop or desktop is the better place to do real work.
Open a file and see what it says
The editor loads with an empty canvas. Drop an SVG on it, or draw one, and the Check panel starts counting straight away.
Free, no account, and nothing you open is uploaded.