draw

SVG Editor

This is an SVG drawing tool. It is still in progress, but this is fully AI-assisted development using different AI technology providers

SVG▸

Tools

Fill

Color#4f8ef7

Opacity100%

Set None

Stroke

Color#1a1a2e

Width2

Opacity100%

Set None

Font

Size

Layers ↑↓ order

Transform

Width

Height

Rotate °

Appearance

Fill

Stroke

Stk Width

Opacity

Order

Align

Canvas Background

Color

Tool: Select X: 0 Y: 0 Zoom: 100% Canvas: 800×600 Elements: 0

SVG Editor v1.3.0

Getting Started

SVG Editor is a browser-based vector drawing tool. Everything is saved in your browser session — use Export SVG to save your work as a file.

Basic workflow

Pick a drawing tool from the left panel (or press its keyboard shortcut)
Draw on the white canvas by clicking and dragging
Switch to Select (V) to move, resize, or style your shapes
Use File → Export SVG to download your drawing

💡 Hover over any shape in Select mode to see it highlight before clicking. This is especially useful for thin lines and complex polygons.

Interface overview

Menu bar — File, Edit, Object, Canvas, View, Help menus
Toolbar — common actions at a glance
Left panel — drawing tools, fill, stroke, layers
Canvas — your drawing area (scroll to zoom, middle-drag to pan)
Right panel — position, size, appearance of selected shape
Status bar — current tool, cursor position, zoom level

Navigating the canvas

Scroll wheel — zoom in / out toward cursor
Middle-click drag — pan the canvas
H key — switch to Pan tool, then drag
0 — fit canvas to window
1 — actual size (100% zoom)

Drawing Tools

Tool	Key	How to use
Select	V	Click shapes to select. Drag to move. Shift+click for multi-select. Drag handles to resize.
Pan	H	Drag the canvas to scroll it. Middle-click also pans from any tool.
Rectangle	R	Click and drag to draw. Releases at any size.
Ellipse	E	Click and drag diagonally. Width and height are independent.
Line	L	Click drag from start to end point. Both endpoints are draggable after.
Polyline	P	Click to add each point. Double-click or press Enter to finish. Open path (not closed).
Polygon	G	Click to add each point. Double-click or Enter to close and fill the shape.
Pencil	F	Click and drag freely to draw a freehand path. Release to stop drawing.
Text	T	Click the canvas to place a text box, type your text, then press Enter or click away.

💡 For Polyline and Polygon, vertex dots (green = start, white = others) show all placed points. A dashed preview line follows your cursor to the next point.

Setting colours before drawing

Use the Fill and Stroke sections in the left panel to set colour, opacity and stroke width before drawing. These become the defaults for new shapes. Click Set None to draw with no fill or no stroke.

Selecting & Moving

Selecting shapes

Press V to activate the Select tool
Click any shape to select it — a dashed red border appears
Shift+click to add more shapes to the selection
Ctrl+A to select all shapes on the canvas
Click an empty area to deselect everything

💡 Polygons and polylines can be tricky to click if they have no fill. The editor uses edge-proximity detection so clicking near any edge or vertex will select them.

Moving shapes

With Select tool active, drag a selected shape to move it
Use the X / Y fields in the right panel to set an exact position
Use the Align buttons in the right panel to align to canvas edges or centre

Grouping

Select 2+ shapes, then press Ctrl+G or Object → Group
Grouped shapes move together as one unit
Ctrl+Shift+G to ungroup back to individual shapes

Duplicating

Ctrl+D — duplicate selection (offset by 12px)
Ctrl+C then Ctrl+V — copy and paste
Right-click → Duplicate also works

Editing Shapes

Resizing with handles

Select a shape to reveal 8 white square handles around its bounding box. Drag any handle to resize:

Corner handles (nw, ne, sw, se) — resize both width and height simultaneously
Edge handles (n, s, e, w) — resize one dimension only
All shape types (line, polyline, polygon, text, path) resize correctly without distorting stroke width

💡 Lines and polylines resize by moving their actual endpoint coordinates — the selection boundary grows with the shape in real time, just like rectangles and ellipses.

Changing appearance

Select a shape, then adjust Fill / Stroke sliders in the left panel — changes apply immediately
Type directly into the Fill / Stroke fields in the right panel for hex values
Change Opacity (0–1) in the right panel for overall transparency

Rotating

Enter a rotation angle in the Rotate ° field in the right panel. Rotation is applied around the shape's centre point. To remove rotation, set the field back to 0.

Z-order (layering)

Use the Order buttons in the right panel: Front, Back, ↑ (forward one), ↓ (back one)
Or use the Object menu for the same commands with keyboard shortcuts
The Layers list in the left panel shows all elements top-to-bottom; click any to select it

Undo & Redo

Ctrl+Z — undo last action (up to 100 steps)
Ctrl+Y or Ctrl+Shift+Z — redo

Working with Text

Placing text

Press T to activate the Text tool
Click anywhere on the canvas — a text input box appears at that position
Type your text. Press Enter to confirm, Esc to cancel

Editing existing text

With the Select tool, double-click any text element to edit it inline
Or right-click → Edit Text from the context menu
Press Enter to confirm or Esc to cancel changes

Text size & colour

Set font size in the Font section of the left panel before placing text
Set fill colour for the text colour
Stroke applies an outline around the text characters

💡 After placing text, switch to Select (V) and drag it to reposition. Use the resize handles to scale the text block.

Layers & Order

The Layers panel at the bottom of the left panel lists every element on the canvas. The topmost item in the list is drawn on top (highest z-order).

Using the layers panel

Click any layer item to select that element on the canvas
Click the × button on a layer item to delete that element
The coloured thumbnail shows the fill colour of the element

Reordering layers

Select a shape, then use Object → Bring to Front / Send to Back
Or use the ↑ / ↓ buttons in the right panel Order section for one step at a time
Keyboard: Ctrl+] front, Ctrl+[ back, ] forward one, [ back one

Context menu

Right-click any shape to access a quick menu with Duplicate, Group, Bring to Front, Send to Back, and Delete options.

File Operations

Saving your work

This editor runs entirely in your browser — there is no server and no auto-save. Always export before closing the tab.

File → Export SVG — downloads a clean .svg file you can open in Inkscape, Illustrator, or any browser
File → Export PNG — rasterises the canvas and downloads a .png image

Importing

File → Import SVG — loads an existing .svg file onto the canvas (replaces current content)
File → Place Image — embeds a raster image (PNG, JPG) as an SVG image element you can move and resize

Editing raw SVG code

File → View / Edit Code (or the Code toolbar button) opens the SVG source editor
Edit the XML directly, then click Apply to render the changes on the canvas
Click Download .svg from the code panel to save the current code as a file

Canvas size

Canvas → Canvas Size — choose a preset or enter custom pixel dimensions

💡 Exported SVGs are clean and self-contained — no editor metadata is included. They can be embedded directly in web pages with an <img> or <svg> tag.

Keyboard Shortcuts

Tools

VSelect / Move

HPan

RRectangle

EEllipse

LLine

PPolyline

GPolygon

FPencil / Freehand

TText

Selection

Ctrl+ASelect All

EscDeselect / Cancel

DelDelete selected

Shift+ClickAdd to selection

Edit

Ctrl+ZUndo

Ctrl+YRedo

Ctrl+CCopy

Ctrl+VPaste

Ctrl+XCut

Ctrl+DDuplicate

Ctrl+GGroup

Ctrl+Shift+GUngroup

EnterFinish poly / path

Dbl-clickFinish poly / Edit text

Layers

Ctrl+]Bring to Front

Ctrl+[Send to Back

]Bring Forward one

[Send Backward one

View

+Zoom In

-Zoom Out

0Fit to window

1Actual size (100%)

Ctrl+1Toggle Tools panel

Ctrl+2Toggle Props panel

F1Open Help

File

Ctrl+NNew canvas

About SVG Editor

SVG Editor v1.3.0

A fully self-contained browser-based SVG drawing tool. No installation, no server, no dependencies. Single HTML file.

Capabilities

Draw rectangles, ellipses, lines, polylines, polygons, freehand paths and text
Select, move, resize and rotate all shape types
Fill and stroke colour with opacity control
Layer management with z-order control
Group / ungroup elements
Align shapes to canvas edges and centres
Hover highlighting and vertex dot previews
Import SVG files and raster images
Export clean SVG and PNG
Live SVG code editor with apply-on-demand
100-step undo / redo history
Pan and zoom with correct coordinate mapping

Embedding in your website

Drop the HTML file on your server and embed with an iframe: