Free SVG Editor Online — Draw Shapes, Text & Download SVG
Draw shapes, arrows, freehand lines and text on a canvas, then download a clean SVG or PNG. Free, in your browser, no signup.
Click a shape to select it, drag to move, drag a handle to resize. Arrow keys nudge (Shift for 10 px).
Keyboard shortcuts
- V Select / move
- R Rectangle
- E Ellipse
- G Triangle
- S Star
- L Line
- A Arrow
- P Freehand pen
- T Text
- Ctrl/⌘ Z undo, Shift to redo
- Ctrl/⌘ D duplicate
- Del delete selected
- Arrows nudge 1 px, Shift 10 px
- Shift while drawing: square, circle, 45° line
- Esc deselect or cancel a drag
Everything happens in your browser: nothing is uploaded, and your drawing is autosaved locally so a refresh does not lose it. Need a logo, an illustrated diagram or a full brand system rather than a quick sketch? That is what our design and marketing team does.
Found a problem, or something that could be better? We read every message and we fix things quickly.
This free SVG editor lets you draw a vector graphic in your browser and download it as a clean SVG or a PNG, with no account and nothing uploaded. Pick a shape tool, drag on the canvas, set the fill and stroke, add an arrow and a label, and the file is ready. It is built for the thirty-second job: a diagram for a slide, a simple icon, a placeholder logo, an annotated box for documentation.
It is deliberately not an Illustrator clone. There are no layers panels, boolean operations or bezier node editing, because those are what make full vector suites take an afternoon to learn. What you get instead is every tool a quick drawing needs, keyboard shortcuts for all of them, undo that works the way you expect, and an export that contains only your shapes: no editor metadata, no embedded fonts, no surprises when you open it elsewhere.
How to use
- Choose a canvas size from the presets (icon, square post, Full HD) or type your own, and pick a transparent or coloured background.
- Select a tool: rectangle (R), ellipse (E), triangle, star, line (L), arrow (A), freehand pen (P) or text (T). Drag on the canvas to draw; hold Shift for a perfect square, circle or 45° line.
- Click a shape with the select tool (V) to move it, drag a handle to resize it, and edit its fill, stroke, opacity or corner radius in the panel. Arrow keys nudge by 1 px, Shift for 10 px.
- Duplicate with Ctrl/⌘ D, delete with Del, reorder with the Front / Back buttons, and undo anything with Ctrl/⌘ Z.
- Download SVG for a scalable file, Download PNG (1× to 3×) for a bitmap, or Copy code to paste the SVG straight into HTML. Your drawing is autosaved in this browser if you want to come back to it.
Frequently asked questions
Is this SVG editor really free, with no signup?
Yes. There is no account, no watermark, no export limit and no upsell. The editor runs entirely in your browser; you can disconnect from the internet after the page loads and it keeps working. We build these tools because they bring people to the site, and some of them later need the design, web or software work we do for clients.
What can I draw with it?
Rectangles (with rounded corners), ellipses and circles, triangles, five-point stars, straight lines, arrows, freehand pen strokes and text in three font families. Every shape has its own fill, stroke, stroke width and opacity, can be moved, resized, duplicated and reordered, and snaps to a 10 px grid if you want it to. That covers diagrams, simple icons, annotations and placeholder logos. It does not cover bezier node editing, gradients, layers or boolean operations; for those you want Inkscape or Figma.
Can I open and edit an existing SVG file?
Partly, and the editor tells you exactly how partly. Open SVG imports rectangles, circles, ellipses, lines, polylines, polygons, paths and text, keeping their colours and positions. Anything it cannot represent faithfully is skipped rather than mangled, and a message reports what was skipped: elements with a transform attribute, groups with transforms, <use> and <image> references, gradient fills and CSS stylesheets. Simple icons and diagrams open cleanly; a complex illustration exported from Illustrator generally will not, and we would rather say so than pretend.
Should I download SVG or PNG?
SVG if the graphic will be scaled, edited later, or used on a website: it stays sharp at any size, is usually far smaller than a PNG, and can be styled with CSS. PNG if you need a fixed bitmap: pasting into a document or slide that handles SVG badly, uploading to a platform that rejects SVG, or sending to someone who just wants a picture. The 2× and 3× options give you a sharp PNG for high-DPI screens. When in doubt, download both; they are free.
Is my drawing uploaded anywhere?
No. Drawing, editing and export all happen in your browser with the standard SVG and Canvas APIs. Nothing is sent to our server. The drawing is autosaved to your browser's local storage so a refresh or an accidental tab close does not lose it; that copy stays on your device and is cleared when you press New.
Can I use the SVG files commercially?
Yes. What you draw is yours, with no licence attached and no attribution required, for personal or commercial use. The exported file contains only your shapes and standard SVG markup, so there is nothing of ours in it to license.
Why does the export look slightly different from the canvas?
The editor draws with the same SVG your browser will render, so the shapes match exactly. Two things can differ: the grid, which is editor-only and never exported, and text, which uses generic font families (Arial, Georgia, Courier New) so that the file renders the same on any machine without embedding fonts. If a viewer lacks one of those fonts it substitutes a close equivalent, which can shift text width by a few pixels.
SVG or PNG: what the difference actually means
An SVG is a text file describing shapes: a rectangle at these coordinates, this wide, this colour. A PNG is a grid of pixels. That one difference explains every practical consequence. SVG scales to any size without blurring, is often a few hundred bytes for a simple diagram, can be edited afterwards, and can be recoloured with CSS on a web page. PNG is fixed at the size you exported, gets larger as the image gets larger, and cannot be edited except as pixels.
SVG is the right default for logos, icons, diagrams and anything on a website. PNG is right when the destination cannot handle SVG (many email clients, some document tools, most social platforms) or when the recipient just wants an image they can drop anywhere. The editor exports both from the same drawing, so the choice costs nothing.
What this editor is good for, and what it is not
• Quick diagrams: boxes, arrows and labels for a slide, a README or a support ticket. The grid and snap keep things aligned without fiddling.
• Simple icons and favicons: draw at 256 × 256 or 512 × 512 with a transparent background, download the SVG, then run it through the favicon generator for every size a site needs.
• Placeholder logos and marks: a shape, a letter, a colour. Enough to get a prototype or a pitch deck past the blank-space stage.
• Annotations: open a simple SVG chart or diagram, add a circle and an arrow around the part you are discussing, export.
It is not the tool for illustration, typography-heavy design, or anything with curves you need to shape point by point. Freehand strokes are smoothed automatically but cannot be edited afterwards. For that class of work, Inkscape is free and excellent, and Figma's free tier is fine for UI graphics. Knowing when to move up is part of using a small tool well.
Tips for clean SVG files
Draw at the size you mean. An icon drawn on a 1920 × 1080 canvas exports with that viewBox, and every consumer will have to scale it. Set the canvas to the intended dimensions first; the presets cover the common ones.
Prefer stroke over fill for line art, and keep stroke widths consistent; mixed widths are the quickest way to make a diagram look amateur. Two or three colours are almost always enough, and the swatches in the panel are chosen to sit well together.
Keep text as text. This editor exports real <text> elements rather than converting them to paths, which keeps the file tiny and searchable and lets you change the wording later. If a downstream tool insists on outlines, do that conversion there, at the last step.
Leave the background transparent unless you specifically need a colour. A transparent SVG drops into any page or slide; a white rectangle behind a logo does not.
Related free tools
- ER Diagram Maker — Write your database schema as text, see the entity-relationship diagram render live — export to PDF or SVG.
- Mind Map Maker — Type an indented outline, get a mind map instantly — export to PDF or SVG. No account, no drag-and-drop.
- Favicon Generator — Turn any logo into a complete favicon package — favicon.ico, all PNG sizes, Apple touch icon, and webmanifest — in one click.
- Image Converter — Convert between AVIF, HEIC, TIFF, PNG, JPG, WebP, GIF, BMP and SVG. Most conversions never leave your browser.