SVG Editor
Create and edit SVG vector graphics online
All operations run locally in your browser - your SVG content is never uploaded to any server.
Tip:
Click the
Help
button for detailed instructions on how to use the editor.
Shapes
Style
Fill
Stroke
Width
2px
Tools
Canvas
Width
Height
Apply Size
Keyboard Shortcuts
V
- Select tool
M
- Move tool
R
- Rectangle
C
- Circle
E
- Ellipse
L
- Line
P
- Polyline
Shift+P
- Polygon
Ctrl+P
- Path
T
- Text
Delete
- Delete selected
Ctrl+D
- Duplicate selected
Ctrl+C
- Copy selected
Ctrl+V
- Paste from copy
Esc
- Cancel drawing
Double-click
- End path/poly
View SVG Code
Download SVG
Clear Canvas
Import SVG
Duplicate Selected
Help
SVG Code
Copy
Element Properties
History
(click to undo to this point)
Import SVG
Paste SVG code
Or upload an SVG file
Note: Complex SVG imports might not be fully editable in this tool.
SVG Editor Help Guide
This guide explains how to use the main features of the SVG Editor.
Basic Operations
Selecting Elements
Select an element:
Click on the Select tool (cursor icon) in the toolbar, then click on any shape.
Unselect:
Click on an empty area of the canvas or press Escape.
Keyboard shortcut:
Press 'V' to activate select tool.
Moving Elements
Move an element:
Click on the Move tool (arrows icon), then click and drag any shape.
Precision movement:
Select an element and use arrow keys for fine adjustments.
Keyboard shortcut:
Press 'M' to activate move tool.
Deleting Elements
Delete a shape:
Click on the Delete tool (trash icon), then click on any shape to delete it.
Quick delete:
Select an element and press the Delete or Backspace key.
Duplicating Elements
Duplicate a shape:
Select an element, then click the "Duplicate Selected" button.
Keyboard shortcut:
Select an element and press Ctrl+D.
The duplicated element will appear slightly offset from the original.
Resizing Elements
Resize a shape:
Select an element to reveal blue resize handles around it.
Corner handles:
Drag corner handles to resize both width and height.
Edge handles:
Drag middle handles to resize just width or just height.
Hold Shift while resizing to maintain aspect ratio (proportions).
Drawing Tools
Basic Shapes
Rectangle (R):
Click and drag to draw a rectangle.
Circle (C):
Click and drag to define the radius of a circle.
Ellipse (E):
Click and drag to define the width and height of an ellipse.
Line (L):
Click for the starting point, drag and release for the endpoint.
Multi-point Shapes
Polyline (P):
Click to place points. Each click adds a connected point.
Polygon (Shift+P):
Similar to polyline, but will automatically close the shape.
Path (Ctrl+P):
Free-form drawing. Click and drag to draw a continuous path.
Finishing multi-point shapes:
Double-click to finish drawing, or press Escape.
Text Tool
Add text (T):
Click anywhere on the canvas to place text.
A dialog will appear to enter your text content.
Text can be moved and styled like other elements.
Advanced Features
SVG Code
View SVG code:
Click the "View SVG Code" button to see the raw SVG markup.
Copy code:
In the code view, click the Copy button to copy the SVG to clipboard.
Exporting Your Work
Download SVG:
Click the "Download SVG" button to save your work as an SVG file.
SVG files can be used in web pages or opened in vector editing software.
Importing SVG
Import SVG:
Click the "Import SVG" button to load an existing SVG.
You can paste SVG code or upload an SVG file.
Note that very complex SVGs might not be fully editable.
History
The editor keeps track of your actions in the history panel.
Click on any history item to revert to that state.
Tips and Tricks
Use keyboard shortcuts (listed in the sidebar) for faster workflow.
For precision drawing, use the properties panel to set exact dimensions.
To cancel any drawing operation, press Escape.
Adjust canvas size for larger projects using the Canvas section in the toolbar.
Copy (Ctrl+C) and Paste (Ctrl+V) work for elements across different parts of your drawing.