SVG viewer and code editor

See what an SVG looks like the moment you paste it. Edit the markup and the preview updates as you type; check the file's dimensions and size; then copy or download it — or open it in the full editor to work on it visually.

Loading the tool…

How to use it

  1. 1

    Paste SVG code, drop a file, or pick one from your device.

  2. 2

    Edit the code — the preview redraws as you type.

  3. 3

    Copy or download the SVG, or open it in the full Splice editor.

Questions

Is it safe to preview an SVG from somewhere else?

Yes. Scripts, event handlers and external references are stripped before anything is rendered, so an SVG can't run code on this page.

Why is my SVG blank?

Common causes are a missing viewBox with no width and height, content drawn outside the viewBox, or fills and strokes set to none. The size readout helps spot the first two.

Can I edit the SVG visually?

Yes — open it in the full editor to move, resize, recolor and restyle shapes with the mouse or touch, with the code kept in sync.

More free SVG tools

Need more than one change?

The Splice editor edits SVGs visually — shapes, text, colors, layers — across many files at once, with the code in sync.

Open the editor