SVG Path Editor Refreshed: Zoom, Undo, Groups, and Mobile Fixes
SVG Path Editor Refreshed: Zoom, Undo, Groups, and Mobile Fixes
If you have ever opened a complex SVG — a detailed icon set, a map export, or a logo with dozens of layers — you know the pain: paths are hard to find, the canvas feels stuck, and one wrong click ruins ten minutes of work.
We rebuilt the SVG Path Editor to solve exactly those problems. The June 2026 refresh adds viewport navigation for large files, full undo/redo history, <g> group support, element search, and a layout that works on phones and tablets.
Everything still runs in your browser. Upload an SVG, edit paths visually, download the result — no account required.
What the SVG Path Editor Does
The tool lets you:
- Select individual paths or shapes inside an SVG
- Make paths transparent without deleting geometry
- Remove paths completely when you want a cleaner file
- Restore elements you changed by mistake
- Download the edited SVG instantly
It is ideal for cleaning exported icons, removing unwanted logo layers, preparing SVGs for animation, or trimming clutter before optimization.
For file-size reduction after editing, pair it with our SVG path optimization guide.
What Changed in the June 2026 Update
1. Large SVG navigation (zoom, pan, fit)
Previously, oversized SVGs could appear blank or feel impossible to scroll through. The editor now includes a proper viewport:
| Control | Action |
|---|---|
| Fit | Scale the drawing to fit the canvas |
| 100% | Reset to actual pixel size |
| + / − | Zoom in and out |
| Pan mode | Drag to move around the canvas |
| Select mode | Click paths to select them |
| Mouse wheel | Zoom toward cursor |
| Space + drag | Temporary pan while selecting |
On touch devices, pinch-to-zoom and drag gestures work in the viewport. Large exports from Figma, Illustrator, or Inkscape are finally usable without fighting the canvas.
We also fixed a rendering issue where some SVGs failed to display after upload. Files missing a viewBox, or with unusual width/height attributes, are normalized on load so the canvas can calculate bounds correctly.
2. Undo and redo (50-step history)
Accidental deletes and transparency changes are part of every editing session. The editor now tracks up to 50 undo steps:
- Toolbar Undo / Redo buttons
- Ctrl+Z to undo
- Ctrl+Y or Ctrl+Shift+Z to redo
Each action — select, transparent, remove, restore — is saved as a snapshot. You can experiment aggressively and roll back when needed.
3. Group tree view (<g> elements)
Real-world SVGs rarely use flat path lists. Designers group layers for organization. The editor now parses <g> groups and shows them in the path list:
- Expand and collapse groups
- Click a group header to select all child elements at once
- Apply transparent/remove/restore to the whole group in one action
This is a huge time-saver for icon fonts, UI kits, and multi-layer logos.
4. Element search
Complex files can contain hundreds of entries. A new search box filters the path list by element name or group label. Click a result to focus and select it on the canvas — no more manual scrolling through endless rows.
5. Mobile and touch improvements
The UI was redesigned for smaller screens:
- Sticky bottom action bar with primary editing buttons always reachable
- 44px touch targets on toolbar and list controls
- Responsive layout for the path list, stats, and canvas
- Improved spacing so Select/Pan modes are easy to switch on a phone
Editing SVGs on a tablet during a client review is now practical, not painful.
Typical Workflows
Clean up an exported icon
- Upload the SVG to the SVG Path Editor
- Click Fit to see the full drawing
- Search for background or hidden layer names
- Select unwanted paths (or their parent group)
- Click Remove Path or Make Transparent
- Use Ctrl+Z if you remove the wrong layer
- Download SVG
Trim a logo for web use
- Open the logo file
- Expand groups in the list to find decorative paths
- Bulk-select a group and make non-essential paths transparent
- Verify at 100% zoom
- Download and optionally run through SVGO-style optimization
Fix a large map or diagram export
- Switch to Pan mode or hold Space to navigate
- Zoom into the region you need
- Select and remove stray paths or labels
- Fit again to confirm the overall result
Keyboard and Mode Shortcuts
| Shortcut | Result |
|---|---|
| Ctrl+Z | Undo |
| Ctrl+Y / Ctrl+Shift+Z | Redo |
| Space + drag | Pan (in Select mode) |
| Mouse wheel | Zoom |
| Pinch (touch) | Zoom |
How It Compares to Desktop Tools
Desktop vector apps (Illustrator, Inkscape, Figma) offer full design capabilities. The SVG Path Editor is narrower by design: quick path cleanup in the browser without installing software.
Use it when you:
- Need to remove a few paths from an exported SVG
- Want transparency instead of deletion for reversible edits
- Do not have a vector editor installed on the current device
- Want a fast preview-and-download workflow
For format conversion after editing, try SVG to PNG or SVG to JPEG.
Related Resources
- SVG Path Editor — try the updated tool
- SVG Path Optimization and Minification — shrink files after editing
- SVG Tools: Essential Resources — broader SVG workflow guide
- SVG Format Guide — when and why to use SVG
Conclusion
The SVG Path Editor is no longer limited to small, flat files. With zoom and pan, undo/redo, group selection, search, and a mobile-friendly layout, it handles the messy SVGs real projects produce — and lets you fix mistakes without starting over.
Open the SVG Path Editor, upload a complex file, and try Fit → Search → Group select → Download. The June 2026 refresh was built for exactly that workflow.
Explore more vector and image tools in our tools hub.