SVG Path Editor

Paste or upload SVG code. Click any shape in the preview to change its color or delete it.

SVG Code
12 lines · 619 chars
Preview - click any shape to edit its color or delete it

Edit SVG Colors Without Opening a Design Tool

Most SVG edits are small - change one shape's color, remove one path that shouldn't be there, or split a combined icon into pieces you can color separately. Opening Illustrator or Figma for that is overkill. This editor lets you paste your SVG code, click the exact shape you want to change in a live preview, and fix it in seconds — including combined multi-part paths that would normally force you to edit raw path data by hand.

How It Works

  • 1. Paste or Upload

    Paste your SVG code into the editor, or upload a .svg file directly.

  • 2. Click a Shape

    Click any path, rectangle, circle, or other shape in the live preview to select it. If it's actually several parts combined into one path, split it into separate pieces first.

  • 3. Change Color

    A popup opens right where you clicked. Pick a preset color, use the color wheel, or type a hex code — the shape updates instantly.

  • 4. Delete or Export

    Delete the shape entirely if you don't need it, or copy/download the updated SVG code once you're done.

Frequently Asked Questions

Paste or upload your SVG code, then click directly on the shape you want to change in the live preview. A color picker popup opens right there — pick a color from the palette, use the color wheel, or type an exact hex code. The change applies instantly to just that shape, and you can drag the popup anywhere to see what's underneath.

Some SVGs (especially icons from repositories like Bootstrap Icons or Font Awesome) combine several visually separate shapes into a single <path> element for smaller file size. Select that shape and click "Split into Paths" in the popup — it breaks the combined path back into separate pieces, each independently clickable, colorable, and deletable.

No. Many icons create cutout effects — like the white eyes on an Android-style face icon — using overlapping subpaths within one path, relying on the fill rule rather than separate shapes. This tool detects that relationship and keeps those subpaths merged with their parent shape when splitting, so only genuinely separate, independent pieces get split out. The cutouts stay intact.

Click the shape you want to remove in the preview, then click the Delete button in the popup that appears. The shape is removed from both the preview and the code instantly.

Yes, both ways, instantly. Typing in the code editor updates the preview the moment your SVG becomes valid XML again — no delay, no button to press. And clicking shapes, changing colors, splitting paths, or deleting shapes in the preview updates the code editor automatically.

It works best with SVGs made of simple shapes — paths, rectangles, circles, ellipses, polygons, and lines. Complex SVGs with nested groups and transforms are displayed and preserved correctly, but individual shapes inside deeply transformed groups may be easier to select directly in the code.

No. Parsing, editing, splitting, and rendering all happen entirely in your browser using standard web APIs. Your SVG never leaves your device.

Many SVGs (especially icons from repositories) use a shared CSS class like class="st0" for color. This tool applies your chosen color as an inline style directly on that specific shape, which takes priority over the shared class — so only the shape you clicked changes, not every shape sharing that class.