What is this online SVG editor?

A free, in-browser SVG editor. Pick an icon or paste/upload SVG markup, then edit it visually: click a shape or text on the canvas to change its fill, stroke, stroke width, opacity, or text content. Everything runs client-side; nothing is uploaded.

How do I edit a specific shape or path?

Click the element on the canvas, or pick it from the Layers panel. The inspector then shows its fill, stroke, stroke width and opacity (plus text content, size and weight for text). Inherited colors are resolved and shown, so editing a path inside a group works as expected.

Can I change colors without touching code?

Yes. Select an element and use the Fill and Stroke color pickers. Edits are written straight back into the SVG, and the code view stays in sync; switch to it any time with Edit code.

Does the SVG ever leave my browser?

No. Parsing, editing, and PNG/JPG/WebP rasterization all run client-side via the DOM and a canvas. Nothing is uploaded to a server.

How do rotate, flip, and background work?

They apply to the whole canvas from the inspector. Rotation is free 0–360°, and the viewBox grows to fit the rotated bounds so nothing clips. The transform and background are baked into every export, so what you preview is what you download.

Can I hide or delete layers?

Yes. Each entry in the Layers panel has a hide toggle (sets display:none) and a remove button. You can also delete the selected element from the inspector.

What export formats are supported?

Download as SVG, or rasterize to PNG/JPG/WebP at 1×–4× scale for crisp output. You can also copy the result as a React/JSX component, a CSS background data-URI, or a bare data URI. PNG and WebP keep transparency; JPG flattens onto white.

What does Optimize do?

It strips comments, XML/DOCTYPE declarations, editor namespaces (Inkscape/Sodipodi), and metadata, then rounds long decimals, a dependency-free cleanup that runs locally. Prettify re-indents the markup and Minify collapses whitespace; neither changes the rendered result.

SVG Editor

A free online SVG editor that works like a tiny design tool. Click any shape or text on the canvas to recolor, resize, restroke, or retype it, no code required, then export to SVG, PNG, JPG, WebP, or copy as a React component or CSS background.

Runs in browser
No signup
No tracking

Fix SVG to preview.

Click an element on the canvas to edit it

Found this useful?Buy me a coffee

How to use SVG Editor

Pick an icon from 200k+, or paste/upload your own SVG.
Click a shape or text on the canvas (or a layer) to select it.
Edit fill, stroke, size, opacity, or text; rotate, flip, or set a background.
Download SVG/PNG/JPG/WebP, or copy as React, CSS, or data URI.

When to use it

Recoloring or restyling an icon to match a brand without opening a design app.
Editing the text inside an SVG logo or badge.
Reorienting an icon that came in rotated or mirrored.
Exporting a crisp 2×/3× PNG of an SVG for a slide or README.
Turning a one-off SVG into a drop-in React component.

What it fixes

Opening a full design app just to recolor or resize one SVG.
Editing raw SVG markup by hand and guessing which element to change.
Hand-converting SVG attributes to JSX and forgetting className.
No quick way to rasterize an SVG to PNG at a chosen scale.

About SVG Editor

Most SVG tweaks don't need a heavy design app: you just want to recolor an icon, fix a stroke, change a word, or rotate the whole thing. This online SVG editor makes those edits direct: select an element on the canvas or in the Layers panel and the inspector exposes its fill, stroke, stroke width, opacity, and (for text) content, size, and weight. Inherited paint is resolved from the live render, so editing a path inside a group recolors what you actually see.

Every edit writes back into the markup, and the code view stays in sync for when you want it. Canvas-level transforms (free 0–360° rotation, horizontal/vertical flip, background, and output dimensions) are composed into a clean export SVG, so the file you download matches the preview exactly. One click also hands you a React/JSX component, a CSS `background` data-URI, or a bare data URI. Everything runs in your browser; the SVG is never uploaded.

References: MDN: SVG element reference · MDN: SVG transform attribute

Frequently asked

What is this online SVG editor?
A free, in-browser SVG editor. Pick an icon or paste/upload SVG markup, then edit it visually: click a shape or text on the canvas to change its fill, stroke, stroke width, opacity, or text content. Everything runs client-side; nothing is uploaded.
How do I edit a specific shape or path?
Click the element on the canvas, or pick it from the Layers panel. The inspector then shows its fill, stroke, stroke width and opacity (plus text content, size and weight for text). Inherited colors are resolved and shown, so editing a path inside a group works as expected.
Can I change colors without touching code?
Yes. Select an element and use the Fill and Stroke color pickers. Edits are written straight back into the SVG, and the code view stays in sync; switch to it any time with Edit code.
Does the SVG ever leave my browser?
No. Parsing, editing, and PNG/JPG/WebP rasterization all run client-side via the DOM and a canvas. Nothing is uploaded to a server.
How do rotate, flip, and background work?
They apply to the whole canvas from the inspector. Rotation is free 0–360°, and the viewBox grows to fit the rotated bounds so nothing clips. The transform and background are baked into every export, so what you preview is what you download.
Can I hide or delete layers?
Yes. Each entry in the Layers panel has a hide toggle (sets display:none) and a remove button. You can also delete the selected element from the inspector.
What export formats are supported?
Download as SVG, or rasterize to PNG/JPG/WebP at 1×–4× scale for crisp output. You can also copy the result as a React/JSX component, a CSS background data-URI, or a bare data URI. PNG and WebP keep transparency; JPG flattens onto white.
What does Optimize do?
It strips comments, XML/DOCTYPE declarations, editor namespaces (Inkscape/Sodipodi), and metadata, then rounds long decimals, a dependency-free cleanup that runs locally. Prettify re-indents the markup and Minify collapses whitespace; neither changes the rendered result.

Discussion

All tools