How to open an SVG file in Photoshop

Photoshop opens SVG files, but turns them into pixels unless they are placed as a Smart Object. Both ways step by step, the size to choose, and what is lost.

Published

Yes, Photoshop can open an SVG. There are two ways and they give different results. File, Open turns the drawing into pixels at a size chosen at that moment. File, Place Embedded adds it to a document as a Smart Object, which keeps the shapes behind the scenes, so the layer can be resized again and again without going soft. Neither way lets Photoshop edit the shapes themselves: it is a pixel editor, and for changing the outlines of an SVG a vector editor is the right tool.

Which way to use

The aimUse
Add a logo or graphic to a design and resize it freelyPlace Embedded
Paint on it, erase parts, or use it as a maskOpen, at a generous size
Just get a PNG or JPG of the SVGNeither: a converter is quicker
Change the shapes, colours or layers of the SVG itselfA vector editor, not Photoshop

Way 1: place it as a Smart Object

  1. Open or create the Photoshop document the graphic is going into.
  2. Choose File, then Place Embedded, and select the .svg file. Dragging the file from a folder onto the open document does the same.
  3. The graphic appears in a box with handles. Drag a corner to resize it, and drag inside the box to move it.
  4. Press Enter, or Return on a Mac, to finish.

The new layer is a Smart Object, marked by a small icon on its thumbnail in the Layers panel. Adobe’s help pages describe what that means: the layer keeps the original file’s data, so scaling, rotating and warping it do not wear the picture down, and vector artwork stays sharp where it would otherwise have been converted to pixels. Shrink the graphic to a thumbnail, enlarge it to fill the canvas, and the edges are redrawn cleanly each time.

Place Linked, the other command in the same menu, keeps a reference to the file on disk instead of a copy inside the document. If the SVG is later changed, the layer updates. Use it when one graphic appears in many documents.

A Smart Object cannot be painted on or erased directly. To do that, turn it into an ordinary layer with Layer, Smart Objects, Rasterize. From then on it is pixels at its current size.

Way 2: open it as pixels

  1. Choose File, then Open, and select the .svg file.
  2. Photoshop asks what size to make the picture, as it does for other vector formats: a width and height, and a resolution. Enter the largest size the work will need.
  3. The drawing opens as a single layer of pixels on a transparent background.

The size typed in step 2 is the decision that matters. An SVG has no pixels of its own, so Photoshop draws it once, at that size, and the shapes are gone afterwards. Enlarging the layer later only stretches the pixels.

The picture is forA sensible size
A website or screenThe pixel size it will be shown at, doubled for sharp screens
A printInches multiplied by 300: a 4 by 6 inch print needs 1,200 by 1,800 pixels
Not yet knownErr on the large side. Reducing later costs nothing, enlarging does

DPI vs PPI explains the resolution box.

What is lost in Photoshop

  • The shapes. Once opened as pixels, outlines cannot be reshaped and the picture can no longer be scaled up cleanly.
  • The layers. Parts that were separate in the SVG arrive merged into one layer. Adobe’s advice for bringing layered artwork in from Illustrator is to export it from there as a Photoshop (PSD) file, which keeps the layers.
  • The cut lines. A cutting machine follows the paths in an SVG. A file that has been through Photoshop as pixels has none left, so it cannot go back to being a cut file without being traced again.
  • Live text. Words in the SVG become part of the picture. If the SVG names a font that is not installed, the words may be drawn in another font: check them before going on.

If all that is needed is a PNG or JPG

Photoshop is not needed for that. SVG to PNG draws an SVG at any pixel size with a transparent background, in the browser, and SVG to JPG does the same with a background colour. The result can then be opened in Photoshop like any picture.

Editing the SVG itself

To change a colour, delete a part or reshape a curve and still have an SVG at the end, use a vector editor. Inkscape is free, and Adobe Illustrator opens SVG directly. Small changes such as a colour can even be typed into the file’s code. How to edit an SVG file covers all three, and raster vs vector explains why Photoshop and SVG are built on different ideas.

Common problems

What you seeCauseFix
The SVG looks soft or jaggedIt was opened as pixels at too small a sizeOpen it again at a larger size, or place it as a Smart Object
The file cannot be picked in the Open windowThe window is filtering by formatChoose the option that shows all files or all formats
Brushes and the eraser do nothing on the layerIt is a Smart ObjectRasterize the layer first, or paint on a new layer above it
Everything is on one layerPhotoshop merges the SVG’s partsSeparate them in a vector editor, or export a PSD from Illustrator
The lettering has changedThe SVG uses a font that is not installedInstall the font, or convert the text to outlines in a vector editor
It went blurry after being enlargedThe layer is pixelsPlace the SVG again as a Smart Object
A white box surrounds the drawingThe SVG has a white rectangle behind the artworkRemove the rectangle in the file: see SVG transparent background

Questions

Does Photoshop keep an SVG as a vector? Only as a Smart Object, and only in the sense that the layer can be redrawn at any size. The shapes inside it are not editable with Photoshop’s tools.

Can the SVG be saved again as an SVG from Photoshop? Photoshop can export SVG, but what was opened as pixels is exported as a picture, not as the original shapes. Keep the original file.

Why does the opened SVG have a checked background? The checks are Photoshop’s way of showing transparency. The SVG had no background of its own.

Which is better for an SVG logo in a Photoshop layout? Place Embedded. The logo can be resized as the layout changes and stays sharp.