SVG & Vector Canvas
A free SVG editor that runs offline
Draw shapes and curves, edit points, work in layers, combine outlines and set type — then export a clean SVG or a high-resolution PNG. Everything happens in your browser; your artwork is never uploaded. Free, no sign-up.
Feedback
Spotted something off with this tool?
A vector editor that opens in a tab and keeps nothing
This is a free vector graphics editor: a place to draw a logo, redraw an icon, lay out a diagram or clean up an SVG somebody sent you — without installing anything, making an account or uploading your work to a stranger's server. Open the page and start drawing. Every shape, every curve, every export happens inside your own browser, and your artwork never leaves your device.
The editor pulls in no libraries at all. Most browser design tools load a rendering engine and a geometry library before they will show you a blank page; this one does not, because SVG is the browser's own drawing format. What you see on screen is the actual document, and saving it is a matter of writing that document out. That is why the whole thing is one small script, why it starts instantly, and why drawing and exporting carry on working after the connection drops. (The page around it carries the same advertising and analytics as the rest of the site — see the privacy policy — but your drawing is not part of that and never travels.)
What you can do with it
- Draw the shapes you need — rectangles and rounded rectangles, ellipses and circles, straight lines, regular polygons and stars, and free text.
- Draw curves properly with a pen tool: click for corners, drag for smooth Bézier curves, click the first point to close the shape.
- Sketch freehand with the pencil. What you draw is smoothed and simplified when you let go, so a shaky line becomes a clean curve instead of two thousand jittery points.
- Reshape anything with the node tool — drag a path's individual points, and pull the curve handles on the one you select. Click the path to add a point, Delete to remove one, Alt+click to switch a point between a corner and a smooth curve.
- Fill with a gradient, linear or radial, with as many colour stops as you need and an angle you can dial in.
- Line things up without squinting — dragging snaps to the edges and centres of everything else on the page, and to the page itself, with a guide showing what it caught.
- Combine shapes with union, subtract, intersect and exclude, so a keyhole, a crescent or a cut-out letter is one operation rather than an afternoon. Cutting a hole in something leaves a real hole, not a white patch over it.
- Move, rotate, scale and mirror with handles on the selection, or by typing exact numbers into the object panel.
- Line things up — six alignments and even spacing across a selection, plus an optional grid you can snap to.
- Stack and group — bring to front, send to back, step forward or backward, and group objects so they move as one.
- Style everything — solid or gradient fills, outline colours, no-fill and no-outline, stroke width, dashed and dotted lines, round or square line ends, and per-object opacity. Text gets a font, a size, bold, italic and alignment.
- Start from something — 93 ready-made shapes across nine categories, and a dozen finished illustrations you can open and pull apart.
- Work in layers — a list of every object in the drawing, in stacking order, with rename, reorder, hide and lock.
- Open what you already have — drop in an existing SVG and every shape in it becomes editable, or place a photo to draw over.
- Turn a picture into shapes — trace a PNG, JPG or logo into real editable paths, in colour, in shades of grey, or as a black-and-white silhouette.
- Export a real file — a clean, standards-compliant SVG; PDF and EPS for print, with the curves intact; DXF for cutting machines and CAD; or PNG, JPG and WebP when a picture is what is wanted.
- Undo without fear. Every change is a step you can walk back, and the canvas is saved to your own browser as you work.
Getting started
- Pick a canvas size. The document panel has A4 and Letter for printing, square sizes for social posts and icons, and 1920×1080 for slides — or type your own width and height. You can change it later without losing anything.
- Draw something. Choose a shape from the rail on the left and drag on the canvas. Hold Shift while dragging a rectangle or an ellipse to keep it square or circular.
- Style it. With the shape selected, set its fill and stroke in the Style panel. The row of swatches is the fast way; hold Alt when you click one to set the stroke instead of the fill.
- Adjust it. Switch to the arrow tool to move and resize, or the node tool to drag the shape's individual points. The grip above the selection rotates it. Arrow keys nudge by one pixel, or ten with Shift held.
- Export. Export SVG gives you the vector file — that is the one to keep, and the one a cutting machine or a print shop wants. Export PNG gives you a picture for places that will not take an SVG.
Close the tab and nothing is lost: the drawing is stored in your own browser and is waiting when you come back.
Vector or pixels — which do you want?
A photograph is pixels: a fixed grid of coloured dots. Enlarge it and you get bigger dots. A vector drawing is instructions: a circle of this radius at this position, filled with this colour. Enlarge it and the browser simply draws the circle bigger, so it is exactly as sharp at any size.
That difference decides which one you want. Logos, icons, diagrams, lettering, cut files and anything destined for both a business card and a banner should be vector. Photographs and painted artwork are pixels and always will be. Plenty of work is both — a poster with a photo in it — which is why you can place an image here and draw vector shapes and text over the top.
SVG is also the format the web itself understands. An icon saved as SVG can be dropped straight into a web page, styled with CSS, animated, and served as a few hundred bytes of text rather than a download. It is an open W3C standard with no licence attached, which is a real advantage over the proprietary formats other editors save into.
Practical things worth knowing
- Keep the SVG, not just the PNG. The SVG is the editable original; a PNG exported from it cannot be turned back into shapes. Export both if you need a picture, but archive the SVG.
- Text stays text. Text you type is stored as text, so it is searchable and re-editable — but an SVG stores the font's name, not the font, so it renders in whatever the viewer's device has. That is why the font list here is deliberately short and ordinary. If a specific typeface is essential, set the type in a tool that can convert it to outlines, or export a PNG.
- Cutting machines want closed outlines. Cricut, Silhouette and laser cutters follow paths, not fills. Close your shapes, and use subtract for holes rather than covering them with a white shape — a white shape still cuts.
- Very small strokes disappear. A hairline that looks fine on screen can vanish on a printer. For print, keep strokes at about a quarter of a millimetre or thicker.
- Placed photos are embedded. An image you drop in is written into the SVG itself, which keeps the file self-contained but makes it much larger than a purely vector drawing.
Keyboard shortcuts
- Tools — V arrow, A nodes, P pen, N pencil, R rectangle, E ellipse, L line, G polygon, S star, T text.
- Edit — Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z redo, Ctrl/Cmd+D duplicate, Ctrl/Cmd+C and Ctrl/Cmd+V copy and paste, Delete removes the selection.
- Select — Ctrl/Cmd+A everything, Shift+click to add to the selection, drag on empty canvas for a marquee, Esc to deselect.
- Arrange — Ctrl/Cmd+G group, Ctrl/Cmd+Shift+G ungroup, arrow keys nudge, Shift+arrow nudges ten, Alt while dragging ignores snapping.
- Points (node tool) — click the path to add one, Delete removes the selected one, Alt+click switches corner and smooth, Alt while dragging a handle breaks the pair.
- View — Ctrl/Cmd and the plus or minus keys to zoom, Ctrl/Cmd+0 to fit the page, Ctrl/Cmd+scroll to zoom at the pointer.
- Save — Ctrl/Cmd+S exports the SVG.
FAQs
Quick answers
Is my drawing uploaded anywhere?
No. The drawing itself never leaves your device. Every shape, every export and every file you open is handled by your own browser — there is no account, no sign-up, and nothing is sent to a server. The editor is one self-contained script with no libraries behind it, so once the page has loaded, drawing and exporting keep working with the network switched off. Like the rest of this site the page does carry advertising and analytics, which are covered in the privacy policy; those are part of the page around the editor, not of your artwork.
What is an SVG file, and why would I want one?
SVG stands for Scalable Vector Graphics. Instead of storing a grid of pixels the way a JPG or PNG does, it stores the shapes themselves — this circle, that line, this piece of text — as instructions. That means it stays perfectly sharp at any size: the same file works as a 16-pixel favicon and as a two-metre banner. It is also plain text, so it compresses well, can be searched, and can be edited by hand or by a program.
Can I open an SVG I already have?
Yes. Use Open, or drag the file onto the canvas. The editor reads the file into the page and every shape inside it becomes selectable and editable — you can move it, restyle it, reshape its points or delete it. Files exported from Illustrator, Figma, Inkscape, Canva and most icon sets open fine.
Can I get a PDF, an EPS or a DXF out of it?
Yes, all three, from the Page panel. PDF and EPS are true vector files — the curves stay curves, so they print at any size and a print shop can take them straight. DXF is the format cutting machines and CAD software read; there the curves are flattened into very fine straight segments, because a polyline is what a cutter follows anyway and it is read the same way by every machine. Two things to know: a photograph you have placed is left out of all three, since they carry vector artwork rather than pixels; and text in a PDF or EPS is re-set in the nearest standard printing font (Helvetica, Times or Courier), so if an exact typeface matters, export SVG or PNG instead.
Can I export a PNG as well?
Yes, at 2× or 4× the document size, so a 500-pixel canvas gives you a 1000- or 2000-pixel image with clean edges. One thing to know: if you have placed a photo that came from another website, the browser refuses to let any page read those pixels back out, and the PNG export will fail with a message saying so. Placing the picture from your own disk instead always works.
Will my work still be there when I come back?
Yes. The canvas is saved to your browser’s own storage as you draw and restored the next time you open the page, so a closed tab or an accidental refresh does not lose it. That copy stays on your device and is never transmitted. Very large drawings are not kept this way — export those to a real file.
Can I turn a PNG or a JPG into a real SVG?
Yes — that is what tracing does. Place the picture, select it, and choose Trace to shapes; or use "Trace a picture…" under Page to pick a file. The picture is reduced to a handful of flat colours and the boundary of each one becomes an editable path, so what you get back is real vector shapes you can recolour, reshape and cut on a machine — not the picture wrapped in an SVG. Three styles are offered: full colour, shades of grey, and black-and-white for a silhouette or line art. Fewer colours and less detail give a cleaner, lighter result; a photograph will always trace better as a poster-style graphic than as a photograph.
Can I use gradients?
Yes — linear or radial, with as many colour stops as you want and an adjustable angle. Pick Linear or Radial under Fill type in the Style panel. Each shape gets its own gradient rather than sharing one, so recolouring one thing never quietly recolours something else, and unused gradients are cleaned out of the file when you export.
How do I edit a curve rather than just move it?
Switch to the node tool (the second one in the rail, or press A) and click the shape. Every point on it appears as a small square. Drag one to move it — the curve keeps its shape. Click a point to select it and its two curve handles appear; drag those to bend the line either side of it. Clicking anywhere on the path adds a new point there, Delete removes the selected one, and Alt+click switches a point between a sharp corner and a smooth curve.
Does anything help me line things up?
Yes. As you drag, the shape snaps to the edges and centres of everything else on the page, and to the page edges and its middle, with a pink guide showing what it lined up with. Hold Alt while dragging to ignore it and place something freely. There is also an optional square grid with its own snapping, under Page.
What can I actually make with it?
Logos and wordmarks, icons, diagrams and flowcharts, stickers and labels, cut files for a Cricut or Silhouette, laser-cutting and vinyl outlines, worksheet illustrations, social graphics, name tags and simple posters. Anything where you want crisp edges at any size rather than a fixed grid of pixels.
How do I cut one shape out of another?
Select both shapes, then use Subtract in the Object panel — the second shape is removed from the first. Union merges them, Intersect keeps only the overlap, and Exclude keeps everything except the overlap. For rectangles, polygons, stars and lines the result is exact: the editor works out precisely where the edges cross. Curves are followed as a long run of very short straight segments instead, so a curved result is a very close approximation rather than a true arc — invisible on screen and in print, worth checking before you send it to a cutter.
Does it work on a phone or tablet?
Yes. The tool rail becomes a strip along the bottom, the panels open over the canvas, and drawing works with a finger or a stylus. A large canvas is far more comfortable on a desktop, but sketching, moving things around and exporting all work on a small screen.