logoredraws.com

How to Export SVG from Photoshop

Learn how to export SVG from Photoshop for logo and favicon artwork: prepare shape and type layers, choose an export method, and check that the file is truly vector.

Published

Contents
  1. The short answer
  2. Before you start: starting conditions
  3. Step 1: Prepare paths and shapes
  4. Step 2: Handle typography
  5. Step 3: Choose an export method
  6. Step 4: Verify the result
  7. Making the export usable as a favicon
  8. When Photoshop is not the right tool

The short answer

Photoshop can save an SVG, but only the vector parts of your document come out as real vector paths. SVG (Scalable Vector Graphics) is a text-based format that describes artwork as geometry: paths, shapes and text that stay sharp at any size. In Photoshop, the layers that can become SVG geometry are shape layers, vector masks and type layers. Pixel layers, smart objects that contain raster content, and many layer effects are either embedded as bitmap images inside the SVG or left out.

In recent Photoshop versions, SVG is usually hidden from the standard Export As dialog. The common route is to turn on the legacy Export As option in Photoshop's export preferences. Then choose File > Export > Export As and pick SVG. Other routes are Copy SVG from the Layers panel or the Generator image-assets feature. Menu names and availability have changed between releases, and no version-specific documentation was supplied for this guide. Confirm each command in your own copy of Photoshop.

The .svg extension alone does not prove the file contains vector artwork, that it can be edited cleanly, or that you have permission to reuse the logo. Inspect the result as described in the verification section below.

Before you start: starting conditions

  • The logo is built from shape layers, paths or type in Photoshop, not from a placed photo, scan or flattened PNG.
  • You have the rights to use and convert the logo for your intended purpose, such as a website favicon.
  • For a favicon, the canvas or artboard is square and the mark is simple enough to read at very small sizes. This is a design recommendation, not a format requirement.
  • You have a copy of the original PSD saved, because some preparation steps, such as converting text to shapes, cannot be cleanly reversed.

To check layer types, look at the Layers panel. Shape layers have a shape or vector mask thumbnail. Type layers show a T icon. Ordinary pixel layers show a bitmap thumbnail. If the logo exists only as pixels, exporting to SVG will not vectorize it. You would need to redraw or trace it as paths, either in Photoshop with the Pen and Shape tools or in a dedicated vector editor.

Step 1: Prepare paths and shapes

  • Rebuild any pixel-based parts of the logo as shape layers using the Shape tools or the Pen tool.
  • Use path operations (combine, subtract, intersect, exclude) to build compound shapes. Do not stack pixel masks.
  • Give important layers clear names. Exported SVGs often carry layer names into element IDs, which makes later editing easier.
  • Delete hidden, empty or unused layers so they do not add clutter to the file.
  • Use solid fill colors where possible. Gradients, patterns, strokes and layer styles such as drop shadows or glows may be simplified, rasterized or dropped. Rebuild essential effects as plain shapes.

Step 2: Handle typography

A live type layer can be exported as an SVG text element. That element still depends on the viewer having the same font installed or loaded. If the font is missing, the browser substitutes another one and the logotype changes. For logo and favicon delivery, the safer choice is usually to convert text to outlines. Select the type layer and use Type > Convert to Shape. The letterforms then become paths that render the same everywhere.

Converted text can no longer be edited as type. Keep an unconverted copy in your master PSD. Also check that your font license permits embedding or converting the typeface in logo artwork. That is a licensing question the file format cannot answer.

Step 3: Choose an export method

Method A, legacy Export As. Open Photoshop's preferences (labelled Settings in some recent versions) and go to the Export section. Enable the option to use legacy Export As. Then choose File > Export > Export As, select SVG as the format, check the image size and canvas size, and export. If SVG still does not appear in the format list, your version may handle this differently. Check Adobe's documentation for that release.

Method B, Copy SVG. In some versions you can right-click a shape layer in the Layers panel and choose Copy SVG. This places the SVG markup for that layer on the clipboard. Paste it into a text editor and save it with an .svg extension. This works well for a single-shape mark, such as a favicon glyph.

Method C, Generator image assets. Enable File > Generate > Image Assets, then rename a layer or group with an .svg suffix, for example logo-mark.svg. Photoshop writes the asset into a folder next to the saved PSD. This is useful if you need to re-export the logo repeatedly while editing.

Step 4: Verify the result

  • Open the SVG in a web browser and zoom in far. Edges should stay crisp. Blurry or stepped edges point to embedded pixels.
  • Open the file in a plain-text editor. Vector artwork appears as path, rect, circle or similar elements. Raster content appears as an image element, often with a long data:image/png;base64 string.
  • Check that the viewBox attribute matches the intended proportions. For a favicon, a square viewBox is the usual target.
  • Confirm that no text elements remain if you meant to outline the type, and that colors and shapes match the original.
  • If you have a vector editor, open the file in outline or wireframe view to inspect the path structure and look for stray or duplicated points.

The text-editor check is the most reliable test. This is a simplified illustration of the difference between a true vector shape and an embedded bitmap:

<!-- Vector: geometry the browser draws at any size -->
<path d="M10 10 H90 V90 H10 Z" fill="#1a1a1a"/>

<!-- Raster embedded in an SVG wrapper: will blur when scaled -->
<image width="100" height="100" href="data:image/png;base64,iVBORw0KGgo..."/>

Making the export usable as a favicon

An SVG exported from Photoshop often needs light cleanup before use as a favicon. Remove leftover metadata or unused IDs, make sure the artwork fills a square viewBox with sensible padding, and simplify fine details that disappear at tab-icon sizes. Browser support for SVG favicons varies. Many sites also supply raster favicon sizes alongside the SVG. Confirm current support for the browsers your audience uses, since this guide had no supplied compatibility data to cite.

When Photoshop is not the right tool

Photoshop is mainly a raster editor, and its SVG output is limited to the vector layers you prepared. If the logo needs precise path editing, complex strokes, or a print-ready vector master in addition to the web SVG, build or finish the artwork in a dedicated vector application. Then export the favicon SVG from that master file.