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 aim | Use |
|---|---|
| Add a logo or graphic to a design and resize it freely | Place Embedded |
| Paint on it, erase parts, or use it as a mask | Open, at a generous size |
| Just get a PNG or JPG of the SVG | Neither: a converter is quicker |
| Change the shapes, colours or layers of the SVG itself | A vector editor, not Photoshop |
Way 1: place it as a Smart Object
- Open or create the Photoshop document the graphic is going into.
- Choose File, then Place Embedded, and select the .svg file. Dragging the file from a folder onto the open document does the same.
- The graphic appears in a box with handles. Drag a corner to resize it, and drag inside the box to move it.
- 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
- Choose File, then Open, and select the .svg file.
- 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.
- 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 for | A sensible size |
|---|---|
| A website or screen | The pixel size it will be shown at, doubled for sharp screens |
| A print | Inches multiplied by 300: a 4 by 6 inch print needs 1,200 by 1,800 pixels |
| Not yet known | Err 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 see | Cause | Fix |
|---|---|---|
| The SVG looks soft or jagged | It was opened as pixels at too small a size | Open it again at a larger size, or place it as a Smart Object |
| The file cannot be picked in the Open window | The window is filtering by format | Choose the option that shows all files or all formats |
| Brushes and the eraser do nothing on the layer | It is a Smart Object | Rasterize the layer first, or paint on a new layer above it |
| Everything is on one layer | Photoshop merges the SVG’s parts | Separate them in a vector editor, or export a PSD from Illustrator |
| The lettering has changed | The SVG uses a font that is not installed | Install the font, or convert the text to outlines in a vector editor |
| It went blurry after being enlarged | The layer is pixels | Place the SVG again as a Smart Object |
| A white box surrounds the drawing | The SVG has a white rectangle behind the artwork | Remove 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.