Free photoshop script: Export your vector layers from PS to SVG in a single click!

Share on facebook
Share on twitter
Share on linkedin
Share on facebook
Share on twitter
Share on linkedin

Share

Finally a solution to one of the biggest and most annoying workflow setbacks in every interaction designer’s day. Here’s a free script that we created that will save you a lot of time slicing and restore your sanity.

What this Photoshop script does:

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute.

No more slicing SVGs one by one like a caveman. Finished preparing your layers? Boom!

Requirements:

  1. Windows or Mac OSX
  2. Photoshop CS5, CS6
  3. Adobe Illustrator

[mc4wp_form id=”29511″]

How to use this script:

  1. Download following instructions below.
  2. Drag this to your adobe photoshop scripts folder: “Adobe Photoshop/presets/scripts”
  3. (OPTIONAL) Go to photoshop and set a keyboard shortcut to use this script (can be done through “Edit” menu –> Keyboard Shortcuts” and then in File –> Scripts –> PS to SVG). We like to use CMD+ALT+E, but you can set whatever keyboard shortcut you wish.
  4. In your PSD name the vector layers you would like to export with a “.svg” at the end. For instance a layer named “Star” should be named “Star.svg”.
  5. When ready – simply activate the script by the keyboard shortcut you defined in step 3, or by the menu in: File –> Scripts –> PS to SVG, and your files will be waiting for you in the same directory as your PSD.
    Tip: Works faster if  Illustrator is already open before activating the script.

Known Issues:

  • The script is not compatible with the new versions of Photoshop CC, which by the way has an “export assets” feature.
  • The script also creates AI files in addition to the SVG files.  You can delete those, you don’t need to use them.
  • This script only works on vector layers, and not on groups of layers.

Read all about how we use the script in our own workflow

Sagi shared his workflow in exporting SVGs out of Photoshop when working on a large design project.

Download the script:

[mc4wp_form id=”29511″]

 Script not working! What now?

  • Check that you put the “.svg” (DOT SVG) at the end of the names of the layers you wish to export, and that each of those layers is a single vector layer.
  • Check that your illustrator is working.
  • Check that the vector layers you want to export are closed vectors. Sometimes shapes can appear closed, but  there are actually 2 overlapping points that have not been joined and therefore it is not really defined as a “shape” yet by photoshop.

About the author:

hackingu_admin

hackingu_admin

Product Designer at ContrastUX

Find hackingu_admin on:

About the author:

hackingu_admin

hackingu_admin

Product Designer at ContrastUX

Find hackingu_admin on:

Articles that may interest you.

Results & Analysis of The 2017 Tech Education Survey

The Falafel Method for UI Design

Git for designers is here – Meet Abstract

This blog is brought you by Contrast UX

© 2021 All rights Reserved. Privacy Policy.

We participate in the Amazon Services, LLC Associates program, and affiliate advertising program designed
to provide a means for us to earn fees by linking to Amazon.com and affiliate sites.

© 2021 All rights Reserved. Privacy Policy.

We participate in the Amazon Services, LLC Associates Program, an affiliate advertising program designed

to provide a means for us to earn fees by linking to Amazon.com and affiliate sites.

Sign Up

for The HackingUI Newsletter