Open or paste any SVG and edit it right in your browser. Click a shape to select it, drag to move it, and change its fill, stroke, opacity, text and position. Add rectangles, ellipses, lines, stars, freehand paths and text, and watch the code update as you go.
Last updated:
Drop the SVG file to open it
Advertisement
Advertisement
How to use the SVG Editor
Open your SVG with Open SVG, drop the file on the canvas, or paste SVG code. A sample drawing is loaded to try things out.
Select a shape by clicking it on the canvas or in the Elements list, then drag it or nudge it with the arrow keys (Shift moves 10 steps).
Edit its properties in the panel: fill and stroke colors, stroke width, opacity, text and exact coordinates.
Add new shapes with the Rect, Ellipse, Line, Star, Draw and Text tools. Set the fill, stroke and width for new shapes on the right of the toolbar.
Fine-tune the code in the SVG code box if you like; valid changes apply automatically.
Save with Download SVG, Copy code or Download PNG.
Keyboard shortcuts
Key
Action
V, R, E, L, S, P, T
Select, Rectangle, Ellipse, Line, Star, Draw, Text tool (when the canvas has focus)
Arrow keys
Nudge the selected element by one screen pixel; with Shift, by ten
Delete / Backspace
Delete the selected element
Ctrl/Cmd + D
Duplicate the selected element
] and [
Bring forward / send backward within its group
Ctrl/Cmd + Z, Ctrl/Cmd + Y
Undo, redo (Ctrl/Cmd + Shift + Z also redoes)
Shift while drawing
Square, circle or 45° line
Esc
Deselect and return to the Select tool
SVG shapes and their key attributes
Element
Position and size
Notes
<rect>
x, y, width, height
rx and ry round the corners
<circle>
cx, cy, r
Center point and radius
<ellipse>
cx, cy, rx, ry
Separate horizontal and vertical radius
<line>
x1, y1, x2, y2
Needs a stroke to be visible; fill has no effect
<polygon>
points
A closed shape through a list of x,y pairs; polyline is the open version
<path>
d
Commands such as M (move), L (line), C (curve), A (arc) and Z (close)
<text>
x, y
y is the baseline; text-anchor sets start, middle or end alignment
<g>
transform
Groups elements; fill and stroke set on a group are inherited by its children
How the viewBox works
The viewBox attribute (min-x min-y width height) defines the coordinate system that every shape uses, while width and height set how large the image is displayed. A drawing with viewBox="0 0 400 300" can be shown at 400 × 300 or 1600 × 1200 pixels and stays perfectly sharp. If an opened file has no viewBox, the editor adds one based on its width and height so it can be scaled on screen. To crop or add margin, change the viewBox values in the Document panel (shown when nothing is selected).
Frequently asked questions
How do I change the color of an SVG?
Open the SVG, click the shape you want to recolor and pick a new Fill color (the inside) or Stroke color (the outline) in the panel. If the whole icon is one group, select the group in the Elements list and set its fill, or click each shape. You can also type values such as #ff0000, red, none or currentColor.
Is my SVG uploaded anywhere?
No. The file is read and edited entirely in your browser. Nothing is sent to a server, and the current drawing is only kept in your browser's local storage so it survives a page reload.
Why does dragging add a transform attribute?
Rectangles, circles, ellipses, lines, text and images are moved by changing their x/y or center coordinates. Paths, polygons, groups and anything that already has a transform are moved by adding or updating translate(x y) in the transform attribute, which keeps the original path data unchanged.
Can I edit the SVG code directly?
Yes. The code box shows the full SVG markup and updates whenever you edit visually. Type in it and the drawing updates after a short pause if the code is valid XML. If there is an error, a message explains it and the drawing stays as it was until you fix it.
Why can't I click a shape?
Shapes can be covered by others or have no fill, or the fill may be set to none so only the outline is clickable. Use the Elements list to select any element directly, or Send backward on the shape that is in the way.
Does it keep gradients, filters and CSS styles?
Yes. Definitions such as gradients, clip paths, masks, filters and embedded style sheets are kept and rendered. Inline style values override attributes, so when you change a color the editor removes that property from the inline style and writes it as an attribute.
Is this a replacement for Inkscape or Illustrator?
It is meant for quick edits: recoloring icons and logos, fixing text, moving and adding simple shapes and cleaning code. For complex illustration work such as boolean path operations or node-by-node editing, use a desktop vector editor, or our SVG Path Editor for path data.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.