SVG Editor, Edit SVG Code Online with Live Preview
A desktop-grade SVG code editor: type or paste markup and see it render instantly on a transparency-aware canvas, then pretty-print, optimize with SVGO or minify in a single click. A live inspector shows every element, color and feature as you edit: 100% client-side, never uploaded.
What is the svg editor?
The SVG Editor renders pasted markup instantly on a transparency-aware canvas as you type, then pretty-prints, optimizes with SVGO or minifies in one click. A live inspector counts every element, color and feature, with undo/redo, copy and download. It runs free entirely in the browser and never uploads.
The GigAI SVG Editor is a hands-on workbench for people who edit SVG by hand: swapping a fill, nudging a path, adding a viewBox, or hand-tuning an icon that a design tool got almost right. Unlike a viewer that only shows you a file, this is a two-way editor: the left pane is a real, line-numbered code editor and the right pane is a live checkerboard preview that redraws the moment you stop typing, so you always see exactly what your markup produces. When your source needs cleanup, a single click runs the same three transforms you'd otherwise wire into a build: Format pretty-prints the markup with consistent indentation so nested groups and defs are readable. Optimize runs SVGO's full browser pipeline to collapse groups, round coordinates and strip editor cruft, and Minify strips it to the smallest one-line form for shipping. A live element inspector sits beneath the canvas, updating as you type: it counts every tag (paths, rects, circles, groups, gradients, filters), lists the distinct colors used across fills, strokes and gradient stops, surfaces the viewBox and byte size, and flags whether the file carries gradients, filters or animation, so you can spot a missing viewBox or a stray hard-coded color without leaving the editor. Real undo/redo, copy, download, PNG-free source export, curated starter SVGs and keyboard shortcuts round out a genuine editing loop, not a one-shot converter. Because everything (parsing, rendering, optimizing and analysis) happens locally in your browser using the native DOMParser and SVGO's browser build, brand marks, unreleased logos and client work never leave your machine. It is the fastest path from 'this SVG is close but not quite right' to clean, shippable markup.
- Difficulty:
- Easy
- Typical time:
- ~10s
- Processing:
- 100% browser processing
Last updated
How to use the svg editor
- 1
Load your SVG
Paste markup into the source pane, drop a .svg file onto the workspace, or load a curated starter to begin from something real.
- 2
Edit with live preview
Change fills, paths, the viewBox or any attribute in the code pane and watch the checkerboard preview redraw. The inspector updates counts, colors and flags as you type.
- 3
Format, Optimize or Minify
Click Format to pretty-print, Optimize to run SVGO's cleanup, or Minify to shrink to one line. Each is a single undoable step you can revert instantly.
- 4
Copy or download
Copy the finished markup to your clipboard, download it as a .svg, or share a link that reopens the editor with your source pre-loaded.
What SVG Editor includes
Live code ↔ preview editing
A real line-numbered source editor beside a checkerboard canvas that redraws the instant you stop typing, so every attribute change, path tweak or color swap shows up immediately.
Format, Optimize & Minify in one click
Pretty-print for readable nested markup, run SVGO's full browser pipeline to shrink and clean, or minify to a single shipping line, each transform lands as one undoable step.
Live element inspector
As you edit, see a running count of every tag, the distinct colors in fills/strokes/gradients, the viewBox, byte size, and flags for gradients, filters and animation.
Color & feature at a glance
Distinct-color swatches make it obvious when an icon still hard-codes a hex it should inherit via currentColor, and feature flags reveal hidden gradients or animation.
Undo / redo, copy, download
A full editing loop: undo and redo every edit and transform, copy the source, download the.svg, load a starter, and reset, with keyboard shortcuts for all of it.
100% client-side
Editing, rendering, optimizing and analysis all run on your device. No SVG is uploaded, stored or logged, and the preview strips scripts and on* handlers so unknown markup can't execute.
Why use our svg editor
See the change as you make it
Hand-editing SVG blind is error-prone. With the preview redrawing live, you catch a broken path, a wrong fill or a clipped viewBox the moment it happens instead of after you ship.
Clean up without leaving the editor
Format to read the structure, Optimize to shrink it, Minify to ship it. You don't bounce between a viewer, a prettifier and an optimizer, and every step is undoable.
Understand a file while you fix it
The inspector answers 'what's in here?' inline (element counts, colors, viewBox and features) so quick fixes like adding a viewBox or swapping a color are informed, not guesses.
Private by design
Because it runs locally, you can edit logos, unreleased icon sets and client exports with zero risk of anything leaving your machine.
Built for the way you work
From quick one-off fixes to daily workflows, see how people put this tool to use.
- Frontend developer
Hand-tune an icon
Paste an icon, swap a hard-coded fill for currentColor, add a missing viewBox, then Optimize, all while the preview confirms it still renders exactly as intended.
- UI / Icon designer
Fix a design-tool export
Format a messy Figma export to read its structure, delete a stray hidden layer or wrong transform, and watch the canvas update before you hand it off.
- Design-systems engineer
Normalize markup by hand
Edit an icon's viewBox, stroke-width and color conventions to match the system, using the inspector to verify element counts and colors line up with the rest of the set.
- Educator / Learner
Learn SVG interactively
Type paths, shapes and gradients and see each change render immediately: the fastest way to build an intuition for how SVG markup maps to what appears on screen.
Supported formats
Accepts SVG and TXT, and produces SVG, all processed locally in your browser.
- SVG
- TXT
- SVG
Frequently asked questions
Recommended tools
SVG Viewer
Open, paste or drop an SVG to view it on a checkerboard, light or dark canvas with zoom, live dimensions, a source-code pane and a full element/color report: 100% in your browser, nothing uploaded.
SVG Optimizer
Minify and clean SVG files in your browser with SVGO, strip editor metadata, round coordinates, drop hidden layers and see the exact bytes and percentage saved. Nothing is uploaded.
SVG Minifier
Aggressively minify SVG online: collapse whitespace, strip comments, metadata and editor namespaces, and squeeze markup to a single line with a live before/after size and % saved. 100% in your browser.
SVG to React
Convert SVG to a clean React component in your browser, camelCased attributes, TypeScript or JS, memo, forwardRef and React Native output, with a live preview. Nothing is uploaded.
JSON Formatter
Format, validate and minify JSON in your browser with pinpoint error line + column, jump-to-error, key sorting and live editing: nothing is uploaded.
SVG Color Editor
Detect every color in an SVG and recolor it live: fills, strokes and gradient stops become clickable swatches you can remap with a picker or hex, with an instant preview. Bulk-replace, swap to currentColor and export, all in your browser, nothing uploaded.
Common problems, solved
Hit a snag? Here are quick fixes for the issues people run into most.
My edit made the preview go blank.
You likely left the markup temporarily invalid, an unclosed tag or a broken attribute. The editor flags a parse issue. Fix the tag and the preview redraws. Undo (Ctrl/Cmd+Z) reverts to the last working state.
The graphic renders but is clipped or the wrong size.
Check the inspector's viewBox field. If it says Missing, add a viewBox matching your artwork bounds. That defines the coordinate space that lets the SVG scale to its container.
Optimize changed my curves slightly.
SVGO rounds coordinates to a default precision. For smooth gradients or tiny icons that need more decimals, use the dedicated SVG Optimizer where you can raise precision, then paste the result back here.
My animation isn't playing in the preview.
SMIL and CSS animation render live, but JavaScript-driven animation is stripped for safety before rendering. The inspector still flags that animation is present so you know it exists in the source.
Get the most out of it
Format first to read a messy export's structure, then edit: nested groups and defs are far easier to navigate indented.
Watch the inspector's colors strip: a lone hex where you expect currentColor is a hint your icon won't inherit text color.
Missing viewBox in the inspector is the #1 reason an SVG won't scale: add one before you copy it out.
Optimize is undoable. Run it, glance at the preview, and Ctrl/Cmd+Z if a curve looks off.
Minify only as the last step before shipping. Keep the formatted version while you're still editing.
What's new
Recent updates and improvements to the svg editor.
Initial release, live code↔preview editing on a checkerboard/light/dark canvas, one-click Format / Optimize (SVGO) / Minify, a live element/color/feature/viewBox/byte-size inspector, undo/redo, copy, download and curated starter SVGs.
Added drag-drop and paste import, keyboard shortcuts with an in-tool reference, shareable deep links, and a parse-error indicator that holds the preview on invalid intermediate markup.
Improved the color extractor for gradient stops, tightened dark-mode contrast to AA, and made each Format/Optimize/Minify transform a single undoable step.
Keep exploring
Problems we solve
Definitions
From the blog
Explore categories
Compare formats
By file type
Common tasks
Your privacy is built in
Your SVG is edited, rendered, optimized and analyzed entirely in your browser using the native DOMParser and SVGO's browser build. It is never uploaded to any server. The live preview additionally strips <script>, <foreignObject>, inline on* handlers and javascript: URLs before rendering, so editing an unknown SVG can't execute code. Nothing is stored, logged or transmitted. Close the tab and every trace is gone.
- Runs in your browser
- No uploads
- Nothing stored
Ready to try the svg editor?
Free, private and instant. SVG Editor runs right in your browser.