PSD to SVG Converter

Turn a PSD file into an SVG made of real vector paths: shapes you can scale to any size, recolour and edit in a vector editor. The tool opens the PSD in your browser, takes the picture you would see (the image saved inside the file, or the visible layers combined when there is none) and traces it: it groups the pixels into a set number of colours, follows the edge of every area and writes each one as an SVG path. Choose One group per layer and every visible layer is traced on its own and kept as a named group in the SVG, bottom layer first, so you can hide, move or recolour parts later. PSD files in RGB or Grayscale open here, at 8 or 16 bits per channel. CMYK, Lab and other colour modes cannot be read by the PSD reader used here, so the page tells you how to convert the file instead of making a wrong-coloured SVG. Logos, icons and flat artwork trace cleanly; photos turn into thousands of small shapes. Text layers are traced as outlines, not kept as editable text. Download the SVG, copy its code, or get a ZIP for several PSDs. Nothing is uploaded and there is no sign-up.

100% private — everything runs in your browser. Everything runs in your browser; your files are never uploaded.

How to convert a PSD to SVG

1. Drop a PSD on the box, or several; or click Try a sample.
2. Choose One traced picture, or One group per layer to keep the layers apart.
3. Pick a starting point (logo, black and white, few colours or detailed), then fine-tune Colours and Detail.
4. Download the SVG, copy its code, or download all of them as a ZIP.

What you can use it for

• Turn a logo designed as a PSD into a scalable SVG
• Get each layer of a PSD icon as its own group in an SVG
• Make a 2-colour SVG of PSD artwork for a cutting machine
• Hand a PSD design to a developer as vector shapes
• Convert a folder of PSD icons to SVG in one go
• Wrap a PSD’s picture in an SVG file when a program only accepts .svg

What happens to each kind of PSD

Your PSD	What the tool does	Tip
RGB or Grayscale, 8-bit	Traced as one picture, or one group per layer	Try both layouts
16-bit RGB or Grayscale	The saved image is read by our own decoder and traced	For layer groups, save an 8-bit copy
No saved image inside	Visible layers combined, then traced; the page lists what could not be matched	Save with Maximize compatibility on
CMYK, Lab, Indexed, Duotone	Refused with a clear message, no SVG made	Change the mode to RGB and save a copy
Transparent background	Transparent areas left empty in the SVG	Keep Leave transparent areas empty ticked

A PSD starts with a short header (the code 8BPS, the size, the bit depth and the colour mode), then the layers, then one flattened image of the whole document, which most PSDs include so other programs can show them. The tool reads the header first, so an unreadable colour mode is caught before anything is traced.

One traced picture or one group per layer

Layout	Inside the SVG	Looks like the PSD	Best for
One traced picture (default)	paths of the whole visible picture	Yes, blend modes and effects included	Logos, icons, final artwork
One group per layer	a named g element per visible layer, bottom first	Close; blend modes, clipping and styles left out	Editing parts separately

Each layer group keeps the layer’s name and opacity, and the group id is made from its position and name, so a vector editor’s layers panel shows the same order as the PSD.

Choosing Colours and Detail

Start from	Colours	Detail	Good for
Logo or flat art	16	5	Most logos, icons and illustrations
Black and white	2	6	Line drawings, stamps, cutting machines
Few colours, smooth	6	4	Soft or compressed edges
Detailed	32	8	Artwork with many colours; larger files

Colours sets how many colours the picture is reduced to before tracing; Detail sets how closely the outlines follow the pixels and how small a speck is kept. They work the same way as on our PNG to SVG and JPG to SVG pages.

Traced paths or a picture inside an SVG

SVG type	Inside the file	Sharp when enlarged	Editable as shapes
Traced vector paths (default)	path elements, one per colour area	Yes	Yes
Picture inside an SVG	your PSD as a PNG, in an image element	No, it blurs	No

Some converters only wrap the picture in an SVG file. That gives an .svg that still blurs when you enlarge it, so here it is a separate, clearly named option for when a program only accepts SVG files.

Tips for a clean trace

• Start from the largest, sharpest file you have.
• Fewer colours give fewer, cleaner shapes and a smaller file.
• If small specks appear, lower Detail; if corners look rounded, raise it.
• For a cutting machine, use Black and white, then check the shapes in your cutting software.

Next steps: tidy and shrink the result with the SVG Optimizer, change its colours with the SVG Color Changer, or edit it in the SVG Editor. Need the PSD as pixels instead? Use PSD to PNG. Tracing a flat image? Use PNG to SVG or the Image Vectorizer.

Sources

Sources: the Photoshop file format specification (colour modes, the saved composite image); ag-psd on GitHub (MIT licence); W3C Scalable Vector Graphics (SVG) 2; imagetracerjs on GitHub (The Unlicense).

Not affiliated with Adobe.

Frequently asked questions

Is this PSD to SVG converter free?

Yes. There is no sign-up, no watermark and no limit on how many files you trace. Tracing runs in your browser, so your PSD never leaves your device.

Is the SVG really vector?

Yes, with the default Traced vector paths option. Every colour area becomes an SVG path, and the line under the preview counts the paths and colours. Only the option called Picture inside an SVG keeps the pixels, and the page says so when you choose it.

Are the PSD layers kept?

Choose One group per layer: every visible layer with pixels is traced on its own and written as a group (g element) named after the layer, with the layer’s opacity, bottom layer first. Blend modes, clipping and layer styles are not applied in that layout. One traced picture traces exactly what you see.

Does it keep text editable?

No. Text layers are traced like any other pixels, so letters become vector outlines. That keeps the look without the fonts, but you cannot retype the words in the SVG.

Why is my CMYK PSD refused?

The PSD reader used here opens RGB, Grayscale and Bitmap files only. Rather than guess the colours, the page says so. In Photoshop, change the image mode to RGB Color, save a copy and add that.

Does it open 16-bit PSD files?

Yes. 16-bit RGB and Grayscale PSDs are read with our own decoder of the image saved in the file and traced at 8 bits per channel, which makes no visible difference to traced shapes. Per-layer groups need an 8-bit PSD.

Does a transparent PSD stay transparent?

Yes. Transparent areas are left empty in the SVG, so it sits on any background. Untick Leave transparent areas empty only if you want the invisible shapes kept in the file.

What size is the SVG?

By default the SVG says it is the same width and height in pixels as your PSD, and because it is vector you can set it to any size later. The picture is traced at up to 500 px on its long side; choose 1000 or 1500 px for finer edges on big pictures.

Is my PSD uploaded?

No. Reading the PSD, tracing it and writing the SVG and the ZIP all happen in your browser.