Free online SVG editor
Draw, edit and export SVG in your browser. Vectopea is an SVG editor online for people who ship SVG: open any file, reshape its paths node by node, and export markup you would be happy to read.
Drop an SVG file to edit it
or
No install · No account · Files stay on your device
How to edit an SVG file online
- Step 1
Open or drop your SVG
Drag a .svg file onto this page or into the editor, paste SVG code, or start from a blank artboard.
- Step 2
Edit shapes and paths
Move, scale and rotate objects, recolour fills and strokes, reshape paths node by node and combine shapes with boolean operations.
- Step 3
Export clean SVG or PNG
Download readable or minified SVG, a PNG at 1×–4×, or copy the markup straight to your clipboard.
The tools you reach for in a desktop vector app
Shapes, pen, pencil, type, rotate, gradient and eyedropper tools, with an inspector for every property.
Pen and node editing
Place Bézier anchors with the pen, then reshape any path node by node. Insert, delete and convert points between smooth and corner.
Boolean path operations
Unite, minus front, intersect and exclude overlapping shapes into a single clean path.
Gradients and effects
Linear and radial gradients with editable stops, plus glow, drop shadow and blur, exported as real SVG filters.
Faithful SVG import
Reads CSS classes, nested transforms, viewBox offsets, <use>/<symbol> and gradients, so existing files open the way they look.
Live SVG code panel
Watch the markup update as you draw. Edit the source directly and apply it back to the canvas.
Smart guides and snapping
Snap to the grid, object edges and centres, and the artboard. Rulers, pixel readouts and numeric fields you can scrub.
Layers and groups
Drag to reorder, rename, group, lock and hide. Layer names become element ids in the exported file.
Export SVG, minified SVG or PNG
Pretty or minified markup, or a PNG at 1×–4× with a transparent background. Or copy the markup straight to your clipboard.
Markup you can read, diff and ship
SVG is the document format, not an export afterthought. What you see in the code panel is exactly what gets saved.
- Layer names become element ids, so your CSS and JS can target them
- Gradients and filters land in <defs> with stable, readable ids
- Polygons and stars keep their parameters and stay editable when reopened
- Choose readable or minified output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"> <defs> <linearGradient id="Core_Prism_Glow-fill" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#00e5ff"/> <stop offset="100%" stop-color="#7c4dff"/> </linearGradient> </defs> <g id="Cyber_Shield_Master"> <path id="Core_Prism_Glow" d="M 400 224 C 496 224 …" fill="url(#Core_Prism_Glow-fill)" stroke="#00e5ff"/> </g></svg>Shortcuts your hands already know
Illustrator-style keys for tools, arrange, zoom and view. Nudge with the arrow keys, hold Space to pan, Alt-drag to duplicate. Press ? in the editor for the full list.
On a phone, the same editor switches to a touch layout with pinch zoom and a slide-up inspector.
Free SVG tools
Single-purpose tools built on the same engine. Every one hands your file to the full editor in one click.
SVG Viewer
Preview any SVG file or snippet, check its size and viewBox, and read the markup.
SVG to PNG Converter
Convert SVG to a crisp PNG at up to 8× with a transparent background.
SVG Optimizer
Compress and minify SVG files with SVGO, right in your browser.
SVG Color Changer
Find every colour in an SVG and swap it for a new one.
Resize SVG
Change an SVG's width and height or make it responsive, without distortion.
Crop SVG
Trim empty space around SVG artwork by fitting the viewBox to the content.
SVG Path Editor
Paste a path d attribute, preview it live and reshape it node by node.
SVG Code Editor
Edit SVG markup with a live preview, then keep editing visually.
Questions
Is this SVG editor online free?
Yes. Vectopea is a free SVG editor that runs in your browser. There is no sign-up, no watermark and nothing to install.
How do I edit an SVG file online?
Drop the .svg file onto the box at the top of this page, or open the editor and choose File → Open SVG. Click a shape to move, resize or recolour it, press A to edit its path nodes, then export SVG or PNG from the export menu.
Can I edit SVG code directly?
Yes. The live code panel shows the exact markup of your document as you draw. Edit the source and apply it back to the canvas, or paste SVG code from another app.
Are my files uploaded anywhere?
No. Files are opened and edited in your browser, and your documents autosave to your browser's local storage on this device.
Can I edit an existing SVG file?
Yes. Open or drag in any .svg file. Shapes, paths, text, groups, gradients and common filters come in as editable objects, and you can paste SVG markup from other apps too.
What can I export?
Readable SVG, minified SVG, or PNG at 1× to 4× scale with an optional transparent background. You can also copy the SVG markup of the whole document or just the selection.
Does it work on a phone or tablet?
Yes. Below tablet width Vectopea switches to a touch layout with a bottom tool bar, pinch to zoom and a slide-up inspector.
How is it different from Adobe Illustrator?
Vectopea is focused on SVG. The file you edit is SVG from start to finish, the code panel shows the exact markup you will export, and it runs in any modern browser. It does not cover print workflows such as CMYK or PDF.
Is it a good free alternative to Inkscape?
For SVG work on the web, yes: icons, logos, illustrations and UI graphics. Vectopea runs in the browser with no install and writes clean, readable SVG. Inkscape is a desktop app with more print and extension features.
Open a file or start from a blank artboard
Two sample documents are waiting in the editor if you just want to poke around.
Open the editor