An online SVG editor for quick, precise changes
SVG files are text, but editing them by hand means hunting through long path data and nested groups. This SVG editor shows the drawing and its code side by side: click any shape on the canvas or in the element list, then change its fill, stroke, width, opacity, transform or any other attribute and watch both views update. Rectangles, circles, ellipses, lines and images get handles for moving and resizing; anything else can be moved with a translate.
It is ideal for recolouring icons and logos, fixing an exported illustration, renaming ids before you use them in CSS, adding a label, tidying the code that design tools produce, and converting the result to PNG. Files open locally and nothing is uploaded; scripts and event handlers inside an SVG are removed on import so a file cannot run code in the page.
How to use the SVG Editor
- Press Open SVG file (or drop or paste a file), paste code into the SVG code box, or start from the Sample.
- Click a shape on the canvas or a line in Elements. Drag it to move, or drag a corner handle to resize; arrow keys nudge (Shift = 10 units) and Delete removes it.
- Edit fill, stroke, stroke-width, opacity and transform, change text, or edit, add and remove any attribute in All attributes. Use Fwd/Back/Front/Bottom to change stacking order.
- Add a rectangle, ellipse, line, text or a path from a list of points with Add. Undo and Redo are always available.
- Press Optimise to clean the code, then Download SVG or Download PNG at 1×, 2× or 4×.
SVG Editor features
Canvas and tree selection
Click shapes directly or pick them from an indented element tree that also reaches hidden and nested items.
Handles in real SVG units
Moves and resizes are converted through each element’s transform matrix, so the numbers written to the code are correct even inside scaled or rotated groups.
Two-way code view
Every edit rewrites the code; typing in the code box re-parses it and updates the canvas, with clear messages for XML errors.
Built-in optimiser
Removes comments, metadata, empty groups and defs, editor attributes (Inkscape, Sodipodi, Sketch and others) and stray whitespace, and rounds coordinates to the decimals you choose.
Safe by default
Imported SVGs are stripped of <script>, <foreignObject>, on… event attributes and javascript: links, and the drawing is rendered in an isolated shadow DOM so its styles cannot leak into the page.
What the optimiser changes
<title> and <desc> are kept by default because screen readers use them. For maximum compression of many files, use the SVG Compressor.
| Removed or changed | Why it is safe |
|---|---|
Comments and <metadata> | Never rendered; often contain generator names and licences you may want to keep separately. |
| Editor attributes and namespaces (inkscape:, sodipodi:, sketch:…) | Only used by the editing app. |
Empty <g> and <defs> | Contain nothing to draw. |
| Whitespace between tags | Ignored outside <text>; text whitespace is kept. |
| Numbers rounded to 0–3 decimals | Two decimals are invisible at normal sizes; use 3 for tiny viewBoxes. |
Tips for editing SVG
- If a colour does not change, the shape may get its colour from a
styleattribute, a class in a<style>block or a parent<g>. Check All attributes, or select the group. - Use
fill="currentColor"on icons so they take the text colour of the surrounding HTML; the SVG Sprite Generator can do that for a whole icon set. - Rotating? Type
rotate(15 100 50)in transform — the last two numbers are the centre of rotation in SVG units. - Need a raster file at a specific size? Export the PNG here, or use SVG to PNG for batch conversion.
SVG Editor FAQ
Is this SVG editor free and private?
Yes. It is free with no sign-up, and files are opened and edited entirely in your browser. Nothing is uploaded.
Can I change the colour of an SVG icon?
Select the shape, then pick a new fill or stroke with the colour picker or type any CSS colour. Press Download SVG to save it.
Why were parts of my SVG removed when I opened it?
Scripts, event handlers such as onclick, embedded HTML (foreignObject) and javascript: links are removed for safety. Static drawings are not affected.
Can I edit path points?
Paths can be moved as a whole and their d attribute edited as text. For dragging individual Bézier points, a full vector illustration app is better suited.
Does the SVG editor work with files from Illustrator, Inkscape or Figma?
Yes. Exports from those apps open normally, and Optimise removes the editor-specific attributes and metadata they add.
How large can the PNG be?
Up to 64 megapixels; the size is the SVG’s width and height (or viewBox) multiplied by the chosen scale.