Vectopea
Open editor
Free code editor

SVG code editor with live preview

Edit SVG markup and see the result as you type. When code alone is slow going, open the same file in a visual editor without losing anything.

SVG preview

Runs in your browser · Nothing is uploaded · No account

A minimal valid SVG file

Every standalone SVG needs a root element with a namespace. A viewBox makes it scale cleanly:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" fill="#7c4dff"/>
</svg>

Tips for clean SVG code

  • Keep a viewBox and drop fixed width/height when the SVG should scale with CSS.
  • Give meaningful ids to groups you will target from CSS or JavaScript. In Vectopea, layer names become ids on export.
  • Put reusable gradients and filters in <defs> and reference them with url(#id).
  • Remove editor metadata and round coordinates to two decimals to cut file size. Vectopea writes rounded path data and offers a minified export.

Code or canvas?

Code is fastest for small tweaks: a colour, a stroke width, an attribute. For drawing, reshaping curves or aligning shapes, use the online SVG editor. For a single path's d attribute, the SVG path editor shows every node.

Questions

How do I edit SVG code online?

Paste your markup into the editor above. The preview updates as you type and shows an error if the XML is invalid. Download the result or click Edit in Vectopea to keep editing visually.

Can I switch between code and visual editing?

Yes. The Vectopea editor has a live SVG code panel: draw on the canvas and the markup updates, or edit the markup and apply it back to the canvas.

Why does my SVG show an error?

Common causes are an unclosed tag, an unescaped & character, attribute values without quotes, or a missing <svg> root. The error message shows what the XML parser rejected.

Do I need the xmlns attribute?

Inline SVG inside HTML works without it, but standalone .svg files need xmlns="http://www.w3.org/2000/svg" or browsers will not render them as images.

More free SVG tools

SVG editor online

The full vector editor: pen tool, node editing, boolean operations, layers and export.

SVG Viewer

Preview any SVG file or snippet, check its size and viewBox, and read the markup.

SVG to PNG Converter

Convert SVG to a crisp PNG at up to 8× with a transparent background.

SVG Optimizer

Compress and minify SVG files with SVGO, right in your browser.

SVG Color Changer

Find every colour in an SVG and swap it for a new one.

Resize SVG

Change an SVG's width and height or make it responsive, without distortion.

Crop SVG

Trim empty space around SVG artwork by fitting the viewBox to the content.

SVG Path Editor

Paste a path d attribute, preview it live and reshape it node by node.