Splice
Free · browser-based · no account

Edit every vector,
side by side.

Splice is a multi-file SVG editor for your whole project — open, editable and exportable from one canvas, with live code, layers and split view.

Open the editor Import an SVG
editsplit viewbulk exportSVG · PNG · React

Multi-file

One workspace

Split view

Edit side by side

Live code

SVG in sync

SVG · PNG · React

Bulk export

Splice~/acme-brand100%
logo-mark.svg
bar-chart.svg
home.svg
logo-mark.svg · 160 × 160
Ready·Select / move·160×160
Features

A workspace built for many files

Multi-file workspace

Open your whole project — folders, tabs and per-file canvases in one place.

Split view

Put two documents side by side and edit them at the same time.

Live SVG code

The source updates as you draw — and edits flow straight back to the markup.

Bulk export

Select files across the project and ship them as SVG, PNG, React or a sprite.

Bulk export

Ship the whole set in one click.

Select any files across the project and export them together — in the format you need, with consistent naming, from one source of truth.

  • SVG · PNG · React · Sprite sheet
  • Consistent naming, every time
  • One source of truth

Bulk export

6 of 6 files selected

SVGPNGREACTSPRITE
Deselect all
logo-mark.svg
bar-chart.svg
home.svg
play.svg
avatar.svg
label.svg
Exports 6 SVG files. Export 6
CODElogo-mark.svg
1<svg viewBox="0 0 160 160">
2  <rect x="16" y="16" width="128"
3    height="128" rx="30" fill="#222B36"/>
4  <ellipse cx="80" cy="80" rx="42"
5    ry="42" fill="#3B6FE0"/>
6  <path d="M40 116 L92 48 …" fill="#fff"/>
7  <circle cx="107" cy="63" r="11"
8    fill="#F5A524"/>
9</svg>
Live code & layers

Always in sync, never out of date.

Every change on the canvas updates the SVG source instantly — and edits to the markup flow back to the artwork. The layers panel keeps the whole document organised as you go.

Layers Node editing Two-way code

Why Splice

Everything you need to design and ship vectors, in one browser tab.

No installation

Runs in your browser. No download, no extension, no setup.

Always free

Every feature is free. No account, no limits, no paywall.

Copy-ready output

Clean SVG and React components you can paste straight into a project.

Edit side by side

Split view lets you compare and align artwork across files.

Bulk export

Export an entire icon set in one pass with consistent naming.

Works offline

Your files live in the browser — keep editing without a connection.

Frequently asked questions

What is Splice?

Splice is a free, browser-based SVG vector editor built for working with many files at once. You can draw and edit shapes on an interactive canvas, organise files into folders, view live SVG code, and bulk-export to SVG, PNG or React.

Is Splice free to use?

Yes. Splice is completely free with no account required and no usage limits. The site is supported by ads.

Do my files get uploaded anywhere?

No. Splice runs entirely in your browser and your files are stored locally — nothing is uploaded to a server.

What formats can I export?

You can export individual files or whole selections as SVG, PNG, React components or a sprite sheet, with consistent file naming.

Can I edit more than one file at a time?

Yes. Open as many files as you like across tabs, and use split view to edit two documents side by side.

Can I import existing SVGs?

Yes. Import .svg files (or drag them in), and even paste raw SVG markup as a new file. The original markup is preserved while you edit.

Start splicing your vectors

Free, instant, and right in your browser. No account required.

Open the editor