SVG, also known as Scalable Vector Graphics is a term and a file format type that pertains to a two-dimensional based vector graphic which allows designers to display their vector images on the web. Animators very much appreciate it as it possesses qualities that make the images saved in this format to be animation possible.

If you are after saving your file or graphic two-dimensional based vector graphics in the SVG file format, here is how to go about it.

Key takeaways

  • First convert your file from Photoshop to Adobe Illustrator, and then resave that file from Adobe Illustrator to an SVG file.
  • Make sure that the SVG profile is SVG 1.1.

how to save as svg in photoshop featured image

How-to: A step-by-step instruction on how to save as SVG

A white canvas in photoshop

Step 1: Create a blank canvas

The first step is to get your canvas set for work. Scroll up to the left-hand side of the screen to click on Files. In the drop-box produced, click New, fill in the requirements and dimensions, and click Ok to save. Your blank canvas is ready for work.

Red rectangular shape on the white canvas

Step 2: Select a shape tool

Pick the rounded rectangle tool located under shape tools, and create a rounded rectangle with a red color fill.

A circle on the rounded rectangle on a white canvas

Step 3: Draw a circle on the rounded rectangle

After drawing your rounded rectangle, return to the shape tools once more, and pick an Ellipse tool to create a circle with a red fill in it right above the rounded rectangle.

A red-filled circle and rectangle on a closed background layer

Step 4: Close the background layer

Once you complete creating the shapes on the two new layers, you’ll need to close the background layer. Head to the Layer box on the right-hand side of the screen; click the Background layer. There is the “eye” symbol right on the layer; click on it to close it. Once completed, a padlock symbol appears on it.

After closing the background, proceed to select/highlight the rounded rectangle layer and the ellipse layer since those are the needed ones. To select each of the layers, press Ctrl and click on each item designed to select/highlight them.

Selecting "Path to illustrator" in the export option

Step 5: Select File

After selecting every designed item, proceed to Files, and a dropbox appears with commands. Click on Export, and on the smaller dropbox generated, click on Path to illustrator.

The dialogue box of "export paths to file"

Step 6: Export path to files

After clicking on Path to illustrator, a dialogue box appears showing Export paths to file, choose what path to export to with relations to each layer you worked on.

Selecting the "Paths" in the dialogue box

Step 7: Export path to files (Continued)

Once the dialogue box comes up with its options on paths, click on the option tray. There you’ll see options about each layer singled out, and you’ll also find the All paths option.

Selecting "All paths" option

Step 8: Completing Export Paths to file

After clicking on your selection of All paths, as seen in the previous step, press Ok to confirm your selection.

Dialogue box of choose a file name to save path to

Step 9: Saving the selection

After concluding your path selection, the next thing to do is to save your selection. Save it in Desktop and rename it as you desire. Here for the example, the file name for the saving is Practice and then click Save. By doing this, you are saving the image as an illustrator file.

Selecting the "open" option in adobe illustrator

Step 10: Open Adobe Illustrator

For graphic designers who have the full Adobe package on their laptops, you will find Adobe Illustrator to install and use. Go to your Adobe Illustrator, click on File and open the illustrator document earlier saved on the Desktop with the file name Practice.

The file "practice" in adobe illustrator

Step 11: Open the file

Once you click on open, your initially saved file under the Adobe Illustrator of a rounded rectangle with a red fill and an ellipses circle with a red fill appears on the Adobe Illustrator for you to check out.

Selecting the Save as option in adobe illustrator

Step 12: Resave your file

After checking out your image, proceed to Files, click on Save as. A dialogue box appears.

A dialogue box of "save as"

Step 13: Saving your image

After you click on Save as the dialogue box brings out the file name of Practice (Converted), meaning it was converted from Photoshop to Adobe Illustrator. You can retain the title or decide to change the file name as you wish, then click on Save as type. The scroll bar provides options on the types of files. Click on SVG, which is the second to the last on the scroll bar option. Then proceed and click Save.

The dialogue box for SVG options

Step 14: SVG options

Once you click on save, you’ll see another dialogue box with SVG options. On it, you’ll see the SVG profile, which should be SVG 1.1, and the type should be SVG. Click Ok, and the work automatically saves on your desktop as an SVG file.


How to save as PDF in Photoshop

Pixlr vs Photoshop


As graphic designing also transcends the realm of designs and goes into other areas of two-dimensional web animation, Photoshop creates a way to save files easily that is convertible for different functions like the SVG. While you may or may not use it often, you must learn how to get around it with the above-stated steps for relevance and understanding.