Online SVG Editor

A professional SVG editor that runs entirely in your browser

Tools 4 All’s SVG Editor is a full vector graphics application that opens instantly with no download, account or upload. Use it to draw logos, icons, illustrations, diagrams and UI assets, or to clean up and fine-tune SVG files you already have. It is built around the SVG format itself, so the file you export is the same document you edited: no proprietary format, no hidden conversion.

What you can do

• Draw precisely: pen tool with Bézier curves, freehand pencil with smoothing, rectangles with rounded corners, ellipses, lines, and editable polygons, stars, gears and arrows, and text.
• Edit paths node by node: move nodes and handles, convert between corner, smooth and symmetric nodes, add and delete nodes, join and break paths, bend segments directly, and snap handles to tangents.
• Combine shapes: union, subtract, intersect, exclude and divide, plus outline stroke, offset path, simplify and reverse, all computed by our own curve-preserving geometry engine in a background worker.
• Style everything: solid colours, linear and radial gradients with on-canvas handles, patterns, per-fill and per-stroke opacity, dashes, caps, joins, arrowhead markers, blend modes, blur and drop-shadow effects, clipping paths and masks.
• Stay organised: a layers panel with drag-to-reorder, renaming and nesting, lock and hide, group and ungroup, align and distribute to the selection, the artboard or a key object, document swatches and reusable symbols.
• Work like a pro: smart guides with distance labels and equal-spacing hints, snapping to the grid, pixels, ruler guides, nodes and paths, numeric X/Y/W/H/rotation fields, unlimited undo and Figma- and Illustrator-style shortcuts.
• Code and export: a two-way SVG code view, an optimised SVG export with a size readout, PNG/JPEG/WebP at any scale, and copy as SVG, data URI, React (JSX or TSX), Tailwind SVG or a CSS background.
• Made for web production: document colours with one-click replace and Convert to currentColor, text to outlines, outline stroke, flatten transforms and ungroup, fit the canvas to the content, and simplify noisy paths.
• A real workspace: several drawings in tabs, each with its own undo history, short menus with submenus, a side panel that folds away (Ctrl/⌘+B), and full-screen editing on phones and desktops.

Why an SVG-native editor matters

Many design tools treat SVG as an export format: you draw in their own model, and SVG is generated at the end. That works for simple icons. It breaks down when you need to edit an existing file, keep the ids your CSS or JavaScript depends on, or understand why a file is ten times larger than it should be. This editor works on the SVG document directly. Groups stay groups, gradients stay gradients, and a <symbol> used five times stays one symbol. When you rename a layer, you are setting the element’s id.

Fast with large files

Speed was a design goal from the first line of code. The drawing is rendered natively by your browser inside an isolated layer. Selection handles, hover outlines and guides are drawn on a separate overlay, so moving the mouse never touches your document. A spatial index (an R-tree) finds what is under the pointer in microseconds, even with tens of thousands of shapes. On heavy documents, panning and zooming are handed to the GPU compositor and the vectors are re-rendered sharp when you stop. Expensive work such as boolean operations, path offsetting and SVG optimisation runs in a Web Worker, so the interface stays responsive.

Precision tools for vector work

Use the pen tool to click corners and drag smooth curves. Hold Shift to keep 45° angles and Alt to break a handle. With the node tool you can drag a segment to bend it, double-click to add a node, or select several nodes and align them. Smart guides show when an object lines up with the edges or centres of its neighbours, and when the spacing between objects is equal. You can also drag guides out of the rulers. For exact values, type X, Y, width, height and rotation into the Design panel. Fields accept arithmetic such as 120+16 or 200/3.

Clean, small exports

Editors often leave metadata, unused definitions, redundant groups and over-precise numbers in the files they save. The export dialog runs an SVGO-style optimiser in the background. It rounds numbers to the precision you choose, converts path data to its shortest form, removes editor metadata and unused definitions, shortens ids and colours, and collapses useless groups. Each optimisation can be switched off, and the dialog shows the file size before and after. For raster output, choose PNG, JPEG or WebP at 1×, 2×, 4× or an exact pixel size, with or without a transparent background.

Built for web production

SVGs that ship in websites and apps need different things than print artwork. The Document colours list shows every colour the file uses: change one and everything that shares it follows, or convert it to currentColor so a React or Tailwind icon takes its colour from CSS. Imported files often carry nested groups and transforms that make paths hard to edit: Flatten transforms & ungroup bakes them into the coordinates in one step, and Fit to content trims the viewBox to the artwork, strokes included. Text to outlines and Outline stroke turn type and line weights into plain paths that look the same everywhere, and Simplify takes the hundreds of points out of a traced or freehand shape.

Your files stay on your device

There is no server behind the editor. Opening a file reads it from your disk into the page, and exporting generates the file on your device. Autosave writes to your browser’s private IndexedDB storage, which also keeps your recent files list. If you close the tab by accident, your last document is restored the next time you visit.

Explore more imaging tools