SVG Editor
Edit and preview SVG code with real-time rendering and syntax highlighting
⏳Loading...
About SVG Editor
SVG stands for Scalable Vector Graphics. Unlike a PNG or a JPEG, which store a fixed grid of pixels, an SVG stores the instructions for drawing the image: this circle here, that path there, filled with this colour. The browser redraws it at whatever size it is shown, so it is equally sharp on a phone, on a 5K display and on a printed page. Write the markup on the left, watch it render on the right.
What it does
- Live preview that updates as you type
- Syntax highlighting for XML and SVG
- Validation that reports parse errors instead of silently rendering nothing
- A preview that scales to fit, so oversized artwork is still visible
- Copy the markup to the clipboard when it is right
- A line between the two halves that can be dragged, and stays where you leave it
- Arrows in the corner that give the editor the whole window, and Escape to give it back
The parts of an SVG worth knowing
viewBox is the coordinate system. Written as viewBox="0 0 24 24", it says the drawing occupies a 24 by 24 area starting at the origin, and the browser maps that onto whatever size it is displayed at. It is the single most important attribute, and a missing one is the usual reason an otherwise valid SVG shows up blank or clipped.
path carries the geometry, in a compact command language: M to move, L to line, C for a cubic curve, Z to close the shape. Uppercase commands take absolute coordinates, lowercase take relative ones.
fill and stroke are the paint. A shape with fill="none" and no stroke is invisible but perfectly valid, which catches people out constantly. Setting either to currentColor makes the shape inherit the surrounding text colour, which is how icon sets follow a dark theme without shipping two copies.
Grouping and reuse come from g, which applies a transform to several shapes at once, and use, which draws the same shape again without repeating its definition.
When to reach for SVG
Use it for anything made of shapes: icons, logos, charts, diagrams, illustrations, and the decorative flourishes in an interface. A logo as SVG is typically a fraction of the size of the PNG set it replaces, and there is only one file rather than one per screen density.
Use a raster format for photographs. There are no shapes in a photograph to describe, so tracing one into vectors produces a file that is both larger and worse. PNG, JPEG and WebP exist for that, and the Image Resizer here handles them.
Cleaning up exported files
SVG from a design tool is rarely lean. Exports from Figma, Illustrator, Sketch and Inkscape carry editor metadata, generated class names, empty groups and inline styles that no browser needs, sometimes several times the size of the drawing itself. Pasting an export here and deleting what is not geometry is often the fastest way to get an icon ready for a codebase, and the preview tells you immediately if you removed something load bearing.
A note on safety
SVG is a document format, not just an image format, and it can carry scripts and references to remote resources. That is why many sites refuse SVG uploads outright. Inspecting one here is a sensible thing to do, but before using markup you did not write, look for script elements, on* event handler attributes and external URLs.
Privacy
Everything is parsed, validated and rendered in your browser. The preview is your own markup handed to the same renderer that draws the rest of the page. Nothing is uploaded and nothing is kept.
Frequently Asked Questions
What is SVG and when should I use it instead of PNG?
SVG is Scalable Vector Graphics, an XML format that stores shapes and paths rather than a grid of pixels. Because it is drawn at whatever size it is displayed, it stays crisp on any screen and at any zoom, and the file is usually far smaller. Use it for icons, logos, diagrams and illustrations. Use PNG or WebP for photographs, where there are no shapes to describe.
Why does my SVG not appear in the preview?
The most common causes are a missing viewBox, so the browser has no idea what area to draw, shapes positioned outside that viewBox, or a fill of none with no stroke set, which paints nothing at all. The editor validates the XML as you type and reports parse errors, so if no error is shown the markup is well formed and the problem is in the geometry rather than the syntax.
Can I paste SVG exported from Figma, Illustrator or Inkscape?
Yes, and it is a good way to see what those exports actually contain. Editor exports tend to carry namespaced metadata, generated class names and inline styles that no browser needs. Deleting them by hand here is often the quickest way to cut an icon down before it goes into a codebase.
Is it safe to paste SVG from an untrusted source?
Treat it with the same care as HTML. SVG is a document format that can carry script and external references, which is why many sites refuse to accept it as an upload. Inspecting an SVG here before you use it is reasonable, but check for script elements, event handler attributes and remote URLs first, especially if it came from somewhere you do not control.
Is my SVG code sent anywhere?
No. Parsing, validation and preview all happen in your browser, and the preview renders the same markup you typed. Nothing is uploaded and nothing is retained once the tab closes.