My workflow to export SVG’s out of Photoshop

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

Share

Recently I finished a large redesign project at my company, SimilarWeb. In this project I had to create (and constantly update) an iconfont made out of SVGs that I exported from my Photoshop designs.

In this post I’ll explain how I used the “PSD layers to SVG” script to drastically improve my workflow.

Let’s begin:

When working on a large design project, I like to create a separate PSD containing all the shapes and icons that I want to export as SVGs.

The SVGs PSD doc
The SVGs PSD doc

I recommend putting this PSD in a separate folder inside the main project folder (i.e [projectname]/svgs/svgs.psd). The script will later export the SVGs to this folder, so you’ll want to get something like this at the end:

The SVGs folder
The SVGs folder

In the SVG PSD, make sure of the following:

  • Name the layers properly (with names that you’d like to export them as), and make sure you have “.svg” at the end.
    For renaming multiple layers and adding the “.svg” ending I used a $10 plugin called Renamy.
    I made a keyboard shortcut for it. So to rename I chose the layers I wanted, entered the keyboard shortcut (CMD+Alt+R in my case), and then typed *.svg and pressed Enter. There is also a free batch layer renaming tool by captain awesome that came out recently. It really looks awesome but I didn’t try it yet.
  • Make sure each vector shape you have is a closed vector.

    Make sure each vector shape you have is a closed vector
    Make sure each vector shape you have is a closed vector
  • Make sure all shapes in the icon are merged.

    Merge shape components
    Merge shape components
  • All the points of that shape are selected: Choose the vector selection tool (or click A), then choose the shape to see its vector points, then select all of the shapes points by clicking and dragging the tool, and then exit the selection tool. Its not as long as it seems, just a second.

    Make sure all points are selected
    Make sure all points are selected

Exporting

Now the only thing left is to export. I’ve been using the PSD to SVG script that David and I put together. You’re welcome to download it for free.
I made a shortcut for it cmd+alt+e.

Updating and maintaining the doc

You’re probably asking yourself:  “Will the script re-export all my SVGs every time I have a new asset?”

Well, after I export all the icons I want, I make sure to remove the “g” at the end of the layer names (i.e “coolicon.svg” –> “coolicon.sv”). I do it by simply going to the top icon and editing its name and then clicking “tab” and “backspace” over and over until I’ve changed all the icon names I need. Once the layer name ending is “.sv” and not “.svg” the script wont recognise it next time I run it.

Creating the iconfont

Now it’s time to create the icon font. I’ve been using icomoon for that. Tried Fontastic and Fontello but icomoon is the only one with SVG editing options that become handy with some of the icons.

I save the iconfont each time in a shared “slices” folder. Then I make sure to notify the devs when I’ve updated the iconfont so they can update it in the code.

[sep]

That’s it. If you have any suggestions or questions about this workflow – feel free to ask here in the comments.

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