Step 1: Open the SVG in SVGSketch
Go to app.svgsketch.com and either drag your .svg file onto the canvas or use File > Open... (Ctrl+O). The editor parses the markup and rebuilds it as a tree of editable shapes - paths, rectangles, circles, text, groups, gradients, masks, and symbols all stay inspectable instead of being flattened to an image.
If the SVG came from a converter or icon library, expect ungrouped layers, inline styles, and editor-specific metadata. Those are the things you are about to clean up.
If this is your first time in the editor, run Help > Editor Tour first. It walks the toolbar, the canvas and each panel in place, so the rest of this article lands on an interface you have already seen. It is always available from the same menu, so you can start one mid-task and pick up where you left off.
Step 2: Select the shape you want to change
Press T or click the Transform tool at the top of the left toolbar, then click the shape on canvas. Use the Elements panel on the right to expand groups and click individual sub-elements when shapes overlap.
Hold Shift while clicking to add to the selection, or drag on empty canvas to marquee-select a region. Ctrl+A selects everything in the document, Ctrl+Shift+ArrowLeft and Ctrl+Shift+ArrowRight walk through siblings, and Esc deselects.
Step 3: Edit fill, stroke, and geometry
Open the Appearance panel and select its Fill row to change color, opacity, or apply a gradient; select the Stroke row for stroke color, width, dash pattern, and line caps. Use the Geometry panel for x, y, width, height, rx, ry, and rotation - typing exact values is faster than dragging when the SVG already has the right structure.
For a quick recolor of an entire icon, marquee-select every shape and change Fill once: every selected shape updates simultaneously.
Step 4: Edit individual nodes with the Path Editor
Select a path and press E (or click the Edit tool in the left toolbar) to expose every anchor and Bezier handle. Drag nodes to reposition, drag handles to reshape curves, double-click a segment to insert a new node, and press Delete to remove selected nodes. The Path Editor panel shows the raw d attribute and a command-by-command table for precise edits.
This is also how you fix imported SVGs that have stray sub-paths, near-duplicate points, or a stroke that traces a phantom segment.
Step 5: Combine shapes with boolean operations
Select two or more overlapping shapes and use Shape > Boolean Operations, or the boolean toolbar buttons, to apply Union, Subtract, Intersect, Exclude, or Divide. The result is a single editable path, so complex icons can be assembled from primitives instead of node-by-node drawing.
Step 6: Export clean SVG
Open the Export panel (right side) or use File > Export... (Ctrl+Shift+E). Choose SVG, then enable "Optimize with SVGO" to strip cruft, collapse groups, and clean up numeric values, and set the Precision field to round coordinates. The output is the same readable markup you would write by hand and is safe to commit to a repo.
Need a raster too? Switch the format to PNG, JPEG, WebP, or ICO - all free - or to PDF, GIF, or video with Pro. The same document exports to every format.