Skip to main content
DailyBox

SVG Editor: edit the code and the canvas together

Open an SVG, click a shape to change its fill, stroke and opacity, or edit the source directly. The canvas and the code stay in sync.

Drop an SVG file here

Up to 5 MB. Opened only in your browser.

Your SVG is processed in this browser tab. It is never uploaded.

How it works

  1. Open or paste an SVG. The canvas and source appear together.
  2. Click a shape, then change its fill, stroke, stroke width or opacity, or edit the code.
  3. Undo or redo as needed, then export the SVG.

Common uses

  • Recoloring an icon to match a brand.
  • Making a quick fix to a graphic's code and seeing the result.
  • Finding which element in the code a shape on screen belongs to.

What it does

  • Canvas selection that jumps to the matching line in the source.
  • Fill, stroke, stroke width and opacity edits written back to the code.
  • Undo and redo, zoom, pan, grid and background options.
  • Unsafe content is removed from the canvas and from the export.

Good to know

This is the first version of the editor. It has no drawing tools, move, resize or rotate handles, layers panel, or gradient and path editing yet, and it doesn't save your work automatically. Export to keep your changes.

Frequently asked questions

Does it keep my original artwork?
Yes. Edits change only the attributes you touch. If nothing unsafe is found, the export is your source exactly as you edited it.
Why didn't my color change?
A style sheet in the file can override attributes. When the file has one, changes are written to the style attribute instead, which takes priority.
Can I draw new shapes?
Not yet. You can add shapes by typing their code in the source panel, and they appear on the canvas immediately.
Are my changes saved?
Not automatically. Nothing is stored or uploaded, so export before you leave the page.

Related tools

Related tools