How to View and Edit SVG Files

SVG files are greatly accommodated in Adobe Photoshop but editing them requires greater access to vector-based editing tools and features upon which Adobe Illustrator comes into play. This article explores the possibility of viewing and editing a scalable vector graphics file in a raster-based editor – Photoshop. how-to-view-and-edit-svg-files

How to View and Edit SVG Files

SVG offers unparalleled flexibility and scalability that any graphic designers love. The odd is, vector graphics are not really supported across all browsers and software applications, which is why you need to consider this approach in viewing and editing your SVG Files.

  • Step 1: Launch Your Adobe Photoshop and Place the SVG File


  • To bring up your scalable vector graphic (SVG) file to Photoshop, just go to “File” and click on “Place Embedded”. From the dialog box that follows, select the SVG file you want to view and edit, and hit the “Place” button in the right-hand corner. When placing, though, click and drag your mouse pointer across the artboard to the size you want your file to be displayed. Release it and you should now be able to view your SVG file in Adobe Photoshop as a rasterized image.
  • Step 2: Edit the SVG File via Adobe IllustratorHow to View and Edit SVG Files - Step 2

    Photoshop is a raster graphics editor and does not have access to vector-based editing programs. Hence, bring your file up to Adobe Illustrator so you can make full edits to the vector objects. Just click on “Window” on select “Layers” and your file goes to Illustrator.

  • Step 3: Make the Changes You Want for the SVG Image

    As your SVG is now in the vector graphics editor, you can begin working on the edits on whichever vectors and shapes. You can resize it, change the color, or add more paths. Any changes you make will immediately be applied to the original file in your Photoshop.

  • Step 4: Go Back and SaveHow to View and Edit SVG Files - Step 3

    Before the original file is changed completely, keep in mind that you need to save all the changes first in Illustrator. So, when you are done editing, head over to the arrow pointing left on the overhead toolbar to go back to Photoshop. A dialog box will pop up, asking you to save the changes to your document or not, and you just have to click “Save” to complete the process.


Why edit the SVG file through Illustrator?

SVG files are vector graphics and require an editor that fully supports the file format, and with Adobe Illustrator being a vector graphics editor software, it is undoubtedly the best place to go.

Can SVG be edited in Photoshop?

The latest versions of Adobe Photoshop support vector-based file types but are still not the best option when it comes to editing vector-based graphics; hence, do your editing in Adobe Illustrator.

How are SVG files edited in Photoshop?

To get the desired output while retaining the vector paths, edit your SVG files through Illustrator but still within Photoshop by first going to the “File” tab and selecting “Place Embedded” or “Place Linked” and then to “Window” and “Layers” as described in this article.