PNG to SVG in Photoshop: Step-by-Step Method

Photoshop's Limitation for SVG Conversion

Photoshop is primarily a raster editor — it works with pixels. To get a true SVG output, you need to convert pixel areas into vector shapes using Photoshop's Shape tools and path operations. This is a manual process best suited for simple logos and icons.

Method 1: Select Subject + Convert to Path

For logos and simple shapes, use Photoshop's selection tools to isolate the shape, then convert the selection to a vector path.

• Open your PNG in Photoshop
• Use Select > Subject (or Magic Wand for simple images) to select the shape
• Go to Window > Paths, click 'Make Work Path from Selection' with a tolerance of 1–2
• Right-click the path and select 'Export as SVG' (Photoshop CC 2015+)
• Alternatively, use File > Export > Export As and select SVG

Method 2: Use Shape Layers

For the cleanest SVG output, manually recreate the shape using Photoshop's Shape tools (pen, rectangle, ellipse). Shape Layers export as true vector SVG.

• Use the Pen tool to trace the outline of your PNG image
• Each closed path becomes a Shape Layer
• Right-click the Shape Layer and choose 'Export as SVG'
• Or use File > Export > Export As > SVG

Recommended Alternative: Our Free Converter

For automatic PNG-to-SVG conversion, our online tool is faster and produces better results than Photoshop's manual path workflow — especially for logos, icons, and clipart. Upload your PNG and get a clean SVG in seconds without manual tracing.

Photoshop SVG Export Settings

When exporting SVG from Photoshop, set these options for clean output.

• CSS Properties: Style Attributes (not Inline Style or Presentation Attributes)
• Font: SVG (converts text to vector paths)
• Images: Embed (includes any raster content in the SVG)
• Object IDs: Layer Names (makes the SVG easier to edit in code)
• Minify: Yes (reduces file size)

Frequently Asked Questions

Related guides