logoredraws.com

How to Export SVG from Photoshop for Logo Artwork

How to export an SVG from Photoshop, which layers stay vector, how to handle type, and how to check that your logo file contains real paths.

Published

Contents
  1. The short answer
  2. What Photoshop can and cannot turn into vector SVG
  3. Starting conditions before export
  4. Method 1: Export SVG directly from Photoshop
  5. Method 2: Finish the SVG in a vector editor
  6. Typography handling
  7. How to confirm the result
  8. Gaps to check for your setup

The short answer

Photoshop can save an SVG file. In many recent versions, though, SVG is hidden from the Export As dialog until you turn on the legacy Export As option in the export preferences. Photoshop is mainly a raster (pixel-based) editor, so only shape layers reliably become vector paths in the SVG. Pixel layers, raster smart objects and many effects are embedded as bitmap images or simplified. For logo delivery, a more predictable route is often to move the shape layers into a dedicated vector editor and save the SVG from there. Whichever route you use, inspect the finished file. An .svg extension does not prove that the file contains only vector artwork.

Key terms: SVG (Scalable Vector Graphics) is a text-based format that describes artwork as geometry, so it can be scaled without losing sharpness. A vector path is a shape defined by anchor points and the curve segments between them, rather than a grid of pixels. A shape layer in Photoshop is a layer whose content is a vector path with a fill and an optional stroke. These are the layers that can become true vector content in an SVG.

What Photoshop can and cannot turn into vector SVG

Layer content | What typically ends up in the SVG | Implication for a logo file
Shape layer with solid fill or stroke | Vector path | Suitable for scalable logo artwork
Type layer | Live text that depends on the font being installed, or outlines if converted first | Convert to shapes before export unless live text is specifically required
Pixel layer or raster smart object | Embedded bitmap image | Not scalable vector; rebuild as shapes or trace in a vector editor
Layer styles, blend modes, filters, masks | May be simplified, rasterized or dropped, depending on version and effect | Rebuild the look with plain fills and strokes, or verify the output closely

Exact handling of effects and type varies between Photoshop versions, and no version-specific documentation was supplied for this guide. Treat the right-hand columns as what to check for, not as guaranteed behavior.

Starting conditions before export

  • Confirm you have the right to reproduce and redistribute the logo. File access is not usage permission.
  • Save a copy of the layered master PSD so later edits do not destroy the original.
  • Make sure every logo element is a shape layer. Select each one with the Path Selection tool and confirm that anchor points appear.
  • Convert type to outlines with Type > Convert to Shape (right-clicking the type layer offers the same command), unless the recipient specifically needs editable text.
  • Remove, or rebuild as shapes, any pixel layers, textures, gradients made with brushes, and photographic elements.
  • Replace layer styles such as drop shadows, bevels and glows with plain fills and strokes. Most logo specifications call for flat artwork, and this is a design recommendation rather than a format requirement.
  • Trim the canvas to the logo plus any intended clear space, because the canvas or artboard size defines the SVG dimensions.

Method 1: Export SVG directly from Photoshop

  • 1. Open the export preferences: Edit > Preferences > Export on Windows, or Photoshop > Settings (or Preferences) > Export on macOS.
  • 2. If SVG is not listed as an export format, enable the option to use legacy Export As, then close the dialog.
  • 3. To export the whole document, choose File > Export > Export As. To export only the logo, select its layers or group in the Layers panel, right-click, and choose Export As.
  • 4. In the Format menu, choose SVG.
  • 5. Check the size and canvas settings shown in the dialog, then click Export and name the file.
  • 6. Run the checks in the verification section below before delivering the file.

Menu names and the location of the legacy option have changed across releases. If your version shows neither SVG in Export As nor a legacy Export As preference, use Method 2.

Method 2: Finish the SVG in a vector editor

  • Option A: Choose File > Export > Paths to Illustrator. This writes path outlines only, without fills or colors, so you will need to reapply the brand colors in the vector editor.
  • Option B: Select a shape layer, copy it, and paste it into a vector editor such as Illustrator. Choose to paste as a path or shape if the app asks.
  • In the vector editor, check the paths in outline view, reapply fills and strokes with the correct color values, and remove stray or duplicate points.
  • Save or export as SVG. Review the options the app offers, such as how styling is written, whether text is converted to outlines, and coordinate precision. Choose the settings the recipient's platform requires.

This route gives you direct control over path geometry and SVG output settings, which a logo file usually needs. If the original Photoshop logo is mostly pixels, neither method produces a true vector logo. Redraw or trace the artwork as vector paths instead.

Typography handling

Live type in an SVG is written as text that names a font. On a device without that font, the logo renders in a substitute typeface and loses its letterforms and spacing. Converting type to shapes keeps the appearance fixed, but the wording can no longer be edited as text. For logo delivery, outlined type is the usual choice. Keep an unconverted copy in the master file in case the wording needs to change, and confirm that the font license allows the outlined artwork to be distributed.

How to confirm the result

  • Open the SVG in a plain text editor. Vector content appears as path, rect, circle or polygon elements. An image element containing data:image/png;base64 (or a similar string) means raster pixels were embedded.
  • Search for text elements. If you find any, the logo still depends on installed fonts.
  • Open the file in a web browser and zoom in far. Vector edges stay crisp, while embedded raster content turns soft or pixelated.
  • Open the file in a vector editor's outline view. Every logo element should appear as a path, and no image frames or missing pieces should be present.
  • Compare colors, proportions and clear space against the master artwork, and check for effects that were silently dropped.
  • If the file is going to a website or platform with its own SVG requirements, test it there before final delivery.

An illustrative comparison of what to look for in the SVG source:

<!-- Vector: geometry described as a path -->
<path d="M10 10 L90 10 L50 80 Z" fill="#1A1A1A"/>

<!-- Raster embedded inside an SVG wrapper -->
<image width="200" height="100" href="data:image/png;base64,iVBORw0..."/>

<!-- Live text that depends on the font being installed -->
<text font-family="BrandSans">ACME</text>

Gaps to check for your setup

No version-specific evidence was supplied for this guide. The menu paths, the legacy Export As preference, and how Photoshop treats layer effects and type in SVG output should all be confirmed in your installed version and its official documentation. If your results differ from what is described here, rely on the verification checks above, because they show what the file actually contains regardless of how it was produced.