On This Page
Documentation
SVG Werkz: DOCUMENTATION
Everything you need to know to draw, edit and export with SVG Werkz — from signing in to the last keyboard shortcut. SVG Werkz is free to use, so every feature here is yours.
Getting Started
SVG Werkz runs in your web browser — there's nothing to install. Open svg.codifywerkz.com on a computer to get started.
Sign in (or sign up — it's the same)
Type your email address. Tick Send me updates if you'd like to hear about new features.
Click Email me a code. We email you a 6-digit code. It works for 10 minutes.
Type the code. The editor opens as soon as you type the 6th number.
That's it. You stay signed in on this browser for 60 days. Your first sign-in makes your account.
No password: there's nothing to remember or reset. If the code doesn't show up, check your spam folder, or click Send a new code.
The Workspace
Everything has its place, so the canvas gets as much room as it can.
| Area | What's there |
|---|---|
| Top bar | The File, Edit, Object, View and Help menus, undo and redo, your file's name (double-click to rename), your account button, Settings and Help |
| Toolbar (left) | Select, Direct Select, Pen, Text, Line, Rectangle and Ellipse, plus the Snap and Grid buttons |
| Canvas | Your artboard. Pan with Space-drag or two-finger scroll, zoom with a pinch or ⌘/Alt + scroll |
| Sidebar (right) | Panels for Layers, Appearance, Size & Position, Align, Combine and Text — drag a title to move a panel, or minimize or close it |
| Status bar | The current tool, notes about what you have selected, and the zoom level |
Right-click anywhere: you get a menu with what you can do right there. It changes with the tool and what's under the cursor.
Tools
| Tool | Key | What it does |
|---|---|---|
| Select | V | Pick, move, resize, rotate, skew and flip whole objects |
| Direct Select | A | Pick and move single nodes and handles |
| Pen | P | Draw paths with corners and curves, and add or delete nodes |
| Text | T | Click to add text, click text to edit it |
| Line | L | Straight lines — Shift locks to 45° |
| Rectangle | R | Rectangles and squares, with rounded corners in the sidebar |
| Ellipse | E | Ellipses and circles |
| Eraser | ⇧ E | Cut away parts of shapes with a square or round brush · [ ] size · ⇧ [ ] corners |
Shift and Alt: Shift keeps things square, round or at 45°. Alt draws from the center. These work while you draw with Line, Rectangle and Ellipse.
Pen & Nodes
Square nodes are corners. Round nodes are smooth. Nodes and handles always draw on top, so nothing stacked above can block them.
| Do this | With the Pen |
|---|---|
| Click | Add a corner node |
| Drag | Add a smooth node (the handles mirror) |
| Alt while dragging | Break the handle for a sharp turn into a curve |
| Click the first node | Close the path |
| Click an open end | Pick that path up and keep drawing (it keeps its direction, so holes stay holes) |
| Click on the selected path | Add a node (the shape doesn't change) |
| Click a node of the selected path | Delete it (the shape stays as close as it can) |
| Enter or Esc | Finish the path |
| ⌘-click inside a shape | Select the nodes of just that part (like the inside of an O) · ⌘ + Ctrl-click (Windows: Ctrl + ⇧-click) selects all of it |
| Do this | With Direct Select |
|---|---|
| Drag nodes or handles | Move them — smooth nodes stay smooth, Alt breaks the pair |
| Drag empty space | Box-select nodes · ⌘-drag inside a shape to box-select there too |
| ⌘ + Alt on a corner | Drag the round handle to round the corner |
| Delete | Remove nodes — the path stays joined |
| Alt + T | With 2+ nodes selected: a box to resize, rotate, skew or distort just those nodes |
Isolated editing: when you start editing an object, only its nodes can be picked and everything else sits under a light gray veil. Press Esc or Enter when you're done. Switch it on or off from the Object menu or Settings → Drawing.
Tracing an Image
Select an image, then pick Object → Trace image… (or right-click the image). A panel opens, and the trace shows on top of your image as you change the settings. Nothing is added to your document until you click Trace.
Modes
- Black & white: makes one shape. Threshold sets how dark something has to be to count as ink (Auto picks it for you). Trace the light parts flips it.
- Color: makes one layer per color, stacked so there are no gaps. Colors sets how many. Leave out the background color skips the background.
- Centerline: makes one line down the middle of each stroke instead of an outline, which is handy for pens, plotters and engravers. The line is as thick as the strokes in the image.
Settings
- Jitter: small wobbles from the pixels get smoothed out. Straight edges become true lines with 2 nodes. Raise it for blurry or blocky images.
- Corners: roundings smaller than this become sharp corners. Lower it to keep small roundings round.
- Specks: bits and holes smaller than this are left out.
- Detail: how many pixels the trace works with. Higher means finer detail but takes longer.
- Preview: show the nodes, or just the outlines.
Tips
- Point at the trace to see the lines of that piece (its outline and any holes in it).
- The trace waits until you stop changing things (and until you let go of a slider) before it updates.
After Tracing
The trace goes in a folder above your image, named after it. You can keep the image (hidden and locked, so you can compare) or remove it. SVG Werkz asks the first time, and you can change it later in Settings → Drawing.
Layers & Folders
Every object is a layer, and groups are folders. The Layers panel lists them top to bottom, in the same order they stack on the canvas.
| Control | What it does |
|---|---|
| Eye | Show or hide · drag up or down over other rows to do the same to them |
| Lock | Lock so it can't be picked · drags the same way as the eye |
| Drag a row | Reorder · drop on the middle of a folder to put it inside |
| Double-click a name | Rename · Enter keeps it, Esc cancels |
| Bottom buttons | Show / hide all, lock / unlock all, open / close all folders, new folder, duplicate, delete |
| Right-click a row | Group, ungroup, duplicate, delete, hide, lock, rename, split apart |
Inside folders: hide or lock a folder and everything in it follows. You can still show or unlock one layer inside it — its folders come along, and everything else stays hidden or locked.
Combine Shapes
Select two or more shapes, then use the Combine panel in the sidebar, the Object menu, or right-click.
| Action | What you get |
|---|---|
| Merge | The shapes joined into one · with one shape, it removes the places where it overlaps itself |
| Cut | The shapes in front cut away from the bottom one · hold or right-click the button to swap to front minus back |
| Intersect | Only where all the shapes overlap |
| Exclude | Where they don't overlap · the overlap becomes a hole |
| Parts of one shape | With the Pen or Direct Select, ⌘-click inside a part, then: Cut or Exclude makes it a hole, Merge fills it again · the nodes stay the same, so you can switch back any time (also in the right-click menu) · Intersect keeps where the part overlaps the rest |
| Split apart | Each separate filled piece on its own layer, in a folder · a piece keeps its holes, so an O stays one piece |
Clean results: curves stay curves, and new nodes only go where outlines cross. Text and images are left out — convert text to paths first.
Eraser
Pick the Eraser (⇧ E) and drag across shapes to cut away what the brush passes over. One click erases one spot. The new edges are clean lines and curves, and one undo puts it all back.
- Size — how big the brush is · [ makes it smaller, ] makes it bigger
- Corners — 0% is a square, 100% is a circle · ⇧ [ and ⇧ ] change it
- Both are also in the Eraser panel in the sidebar while the Eraser is on
- Erasing all of a shape removes it
Which shapes: with layers selected, only those are erased. With nothing selected, every shape under the brush is. Hidden and locked layers are left alone. Text, images and open lines aren't erased yet — convert text to paths first.
Text & Fonts
Click with the Text tool to add text, or click existing text to edit it. Pick from 870+ Google fonts, or use fonts on your own computer.
| Feature | How it works |
|---|---|
| Font browser | Search by name, category or tag · hover or arrow through fonts to preview them on your text |
| Favorites & tags | Star the fonts you love and add your own tags to find them fast |
| Style part of the text | Select some letters while typing, then change the font, size, spacing or color |
| Convert to paths | Turns text into shapes for cutting — as one shape, or split by word or by letter |
Cutting text? Convert it to paths before you export. Cutters and lasers need shapes, not fonts.
Simplify Nodes
Takes out nodes a shape doesn't need and keeps how it looks. Find it in the Object menu, or right-click a shape.
- Straight lines stay straight — only the extra nodes along them go
- Sharp corners stay sharp
- Curves that make one smooth curve become one (a circle drawn with 32 curves ends up with 4)
Messy files: when you open or import an SVG with lots of extra nodes, SVG Werkz offers to simplify it. You can choose always, never, or ask in Settings → Document.
Images
Bring in a PNG, JPG, GIF, WebP or BMP to trace over. Use File → Import, or drop the file on the window.
- Images come in as their own layer: move, resize, rotate, flip, hide or lock them
- File → Open with an image starts a new document the size of the image
- Images you leave in are saved inside the SVG when you export
Big imports: if something you import is bigger than the artboard, SVG Werkz asks: leave it, shrink it to fit, or grow the artboard around it.
Snapping & Grid
| Control | What it does |
|---|---|
| Snap button | Click: snapping on / off · hold or right-click: what to snap to |
| Grid button | Click: show / hide the grid · hold or right-click: size and color |
| Hold S while dragging | Flip snapping for the moment |
| Hold G while dragging | Snap to the grid only |
Snaps to the grid, nodes, outlines, other objects' edges and centers, the artboard, the middle between two nodes, and even spacing. Pink guides show what lined up.
Saving & Exporting
| Action | What it does |
|---|---|
| Save to account | Saves your file to your account (⌘ S) · the first time, it asks for a name |
| Save a copy to account | Saves it as a new file and keeps the original |
| Open from account | Your saved files with previews · open, rename or delete them |
| Export | Downloads the SVG file to your computer (⌘ ⇧ S) |
| Open | Opens an SVG or image file from your computer |
| Import | Adds an SVG or image to the file you have open (⌘ ⇧ I) |
Auto-save: turn it on in Settings → Basics and pick how many minutes between saves. It only saves when something changed.
Saved files: the free plan saves up to 10 files to your account. That's only for saving online — you can edit and export as many files as you want. Export the SVG any time to keep a copy on your own computer.
Settings
Click the gear in the top bar. Settings are saved in your browser.
| Tab | What's in it |
|---|---|
| Basics | Theme, units, auto-save, and keyboard shortcuts (you can change any key) |
| Document | Document size, grid size and color, your starting color palette, what to do with big imports, and simplifying |
| Drawing | Keep proportions when resizing, fill rule for new shapes, and isolated editing |
Keyboard Shortcuts
On Windows, use Ctrl for ⌘. You can change any of these in Settings → Basics → Keyboard shortcuts, and press ? any time to open Help.
| Action | Mac | Windows |
|---|---|---|
| Undo / Redo | ⌘ Z / ⌘ ⇧ Z | Ctrl Z / Ctrl ⇧ Z |
| Cut / Copy / Paste | ⌘ X / ⌘ C / ⌘ V | Ctrl X / Ctrl C / Ctrl V |
| Duplicate | ⌘ D | Ctrl D |
| Select all | ⌘ A | Ctrl A |
| Group / Ungroup | ⌘ G / ⌘ ⇧ G | Ctrl G / Ctrl ⇧ G |
| Bring forward / Send backward | ⌘ ] / ⌘ [ | Ctrl ] / Ctrl [ |
| Flip horizontal / vertical | ⌘ ⇧ H / ⌘ ⇧ V | Ctrl ⇧ H / Ctrl ⇧ V |
| New | Ctrl N | Ctrl N |
| Open / Save | ⌘ O / ⌘ S | Ctrl O / Ctrl S |
| Import / Export | ⌘ ⇧ I / ⌘ ⇧ S | Ctrl ⇧ I / Ctrl ⇧ S |
| Zoom to fit / 100% | ⌘ 0 / ⌘ 1 | Ctrl 0 / Ctrl 1 |
| Grid on / off | ⌘ ⌥ G | Ctrl Alt G |
| Snapping on / off | tap ⌘ ⌥ | tap Ctrl Alt |
| Eraser: size smaller / bigger | [ / ] | [ / ] |
| Eraser: corners less / more round | ⇧ [ / ⇧ ] | ⇧ [ / ⇧ ] |
Requirements
| Requirement | Minimum | Notes |
|---|---|---|
| Browser | Current Chrome, Edge, Firefox or Safari | Keep your browser up to date |
| Device | A computer | Built for a mouse or trackpad and a keyboard · phones aren't supported yet |
| Account | An email address | Free |
| Saved files | Up to 10 on the free plan | Up to 15 MB each |
Troubleshooting
The code email didn't arrive
Give it a minute, then check your spam or junk folder. Still nothing? Click Send a new code on the sign-in screen. Make sure the email address is spelled right — click Use a different email to fix it.
If you ask for lots of codes in a short time, you'll need to wait a bit before asking again.
It says the code has run out
Codes work for 10 minutes, and only the newest one works. Click Send a new code and use the code from the newest email.
"No room for a new file"
You've saved the most files the free plan keeps online (10). Open File → Open from account…, delete one you don't need, then save again. Export it first if you want to keep a copy.
A file is too big to save
Saved files can be up to 15 MB. Big images inside the file take the most room — use smaller images, or delete ones you've finished tracing.
Something looks wrong or doesn't work
Reload the page (⌘ ⇧ R on a Mac, Ctrl F5 on Windows) to make sure you have the newest version. If it still happens, contact us and tell us what you were doing.
Changelog
v0.9.5
Eraser
- Eraser tool: a square or round brush that cuts away parts of shapes · [ ] size · ⇧ [ ] corners · erases only the selected layers, or everything when nothing is selected
v0.9.4
Images
- "Picture" is now "image" everywhere in the app
- New sign-in buttons, and a View details button that opens our site
v0.9.3
Smoother tracing
- The trace waits until you stop changing the settings (and let go of a slider) before it updates
- Point at the trace to see the lines of that piece
v0.9.2
Combine parts of one shape
- Cut, Exclude and Merge work on parts of one shape (like the inside of an O) — switch them back any time
- ⌘-click inside a shape selects just that part · ⌘ + Ctrl-click selects all of it
- Fix: drawing on from the first node of a path no longer flips its direction
v0.9.1
Image tracing
- Trace an image into clean paths: Black & white, Color or Centerline, with a live preview
v0.9.0 — Beta
First beta
- Pen tool with full node control, rounding corners and isolated editing
- Select, Direct Select, Text, Line, Rectangle and Ellipse tools
- Text with 870+ Google fonts, favorites and tags, convert to paths
- Merge, cut, intersect, exclude, split apart and simplify nodes
- Layers and folders with show / hide and lock that work through folders
- Snapping, grid, align and distribute
- Images to trace over
- Sign in with an emailed code, save to your account, auto-save
- Clean SVG export with your color palette