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

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 or CC
  3. Adobe Illustrator

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.

Download the script:

The script is 100% free, but we’d like to invite you to sign up to our weekly newsletter, so you can stay up-to-date on the best resources in the industry and get more great free stuff like this.

Known Issues:

  • 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.

 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.
Published on 17 Dec 2013

Comments

    1. David Tintner Post author

      Hey Daina, I didn’t know that there would be a need for it but a script for Illustrator is definitely possible. If that’s something that people would use then we can do it in version 2.0 :)

      Reply
    2. Matt

      Illustrator comes with an SVG conversion script natively ( File » Scripts » SaveDocsAsSVG). This Photoshop script might have more functionality or write better code, though.

      Reply
      1. David Tintner Post author

        Hey Matt, this script allows you to not just save as svg, but complete your entire workflow from Photoshop and expedites the process by handling multiple layers at once

        Reply
  1. Nogah

    Hi, Thank’s for this!
    It will be very usefull for me.

    I couldn’t make the shortcut (step 3) because “PS to SVG” doesn’t show up in photoshop>file>scripts.
    (I did drag the file to the adobe photoshop scripts folder)
    I need to browse and find it in my documents.. do you know how I can make the shortcut or bring it to the scripts without the browsing step?

    Thank’s!
    Nogah

    Reply
    1. David Tintner Post author

      Thanks Nogah, the script should be placed in Applications->Photoshop[version#]->Presets->Scripts and then will show up inside the Photoshop menu File ->scripts as ‘Save as SVG’. If you just placed it inside the scripts folder while photoshop is running you may have to restart the application. But as long as its in the correct directory it should show up there without needing to browse

      Reply
    1. Sagi Shrieber

      Hey Ray – all you need to do is save the file first. If your file isn’t saved anywhere the script would not know where to save the files. Let us know if you come across any other issues and we’ll be glad to help.

      Reply
  2. Jan Semler

    nice addition would exporting multivectorshapes and folders for full scale svg. make an addon out of it and sell it i would buy it :-)

    Reply
    1. Sagi Shrieber

      Hey Jan, Thanks for the feedback! We actually started working on this for V2 of the script :) Hope we will get there as photoshop scripting isnt as friendly as we hoped. But ofcourse we’ll update!

      Reply
      1. allison mcgrath

        Has V2 been released? Jan’s description is exactly what I’m looking for! :)

        Reply
  3. Pingback: Tools | Annotary

  4. Chris LaChance

    This is super helpful, thanks so much! I’ve shared it to my social stream as well. By the way, is there any hope that this could work for CS4 at some point too?

    Reply
    1. David Tintner Post author

      thanks Chris! At the moment we’re only working with CS5 and up, but I will look into the difficulties of supporting CS4 too

      Reply
  5. James Deering

    Can’t, for the life of me, think of any reason to be using Photoshop for front end web design.

    Reply
  6. Pingback: Free script: Export your layers from photoshop ...

  7. Bob Sermon

    I always get the message “You need to add some layers to convert. Make sure they are named with .svg”
    And i have one layer called Test.svg and it is a vector that i made in illustrator.
    What do i do wrong?

    Reply
  8. Pingback: Free Script For Exporting Photoshop Layers To SVG » CSS 3 & HTML 5 Links und Infos

  9. Pingback: Free Script For Exporting Photoshop Layers To SVG | aguiarconsultingpr.com

  10. Pingback: Export your vector layers from PS to SVG | The Boneyard

  11. Pingback: [Photoshop] Export your vector layers from PS to SVG in a single click! – フォトショップのベクターレイヤー内のオブジェクトをSVGで書き出すスクリプト - mBlog

  12. Pingback: Des pixels et du code #94 - Stéphanie Walter, Graphiste - Designer web et mobile

  13. Pingback: Pixels & code #22 – Web Design weekly links not to miss - Stéphanie Walter: Webdesigner - UX-UI designer

  14. Pingback: Free photoshop script: Export your vector layers from PS to SVG

  15. Pingback: Exportez vos calques PSD vers SVG en un click | outils gratuits pour webmasters

  16. Pingback: Free Script For Exporting Photoshop Layers To SVG | UICorner-User interface design inspiration & design tools

  17. Pingback: Free script: Export your layers from photoshop ...

  18. Pingback: Free Script For Exporting Photoshop Layers To SVG :: Graficznie

  19. ashgie

    it does not work for me
    I upload it and open this script with active vector layer
    something loading and nothing happens :(
    mavericks, ps cc

    Reply
    1. Sagi Shrieber

      Hey Ashgie, check 2 things:
      1. that you named all the layers you wish to export as SVG with a “.svg” at the end of the layer name.
      2. that your vector shape is closed (sometimes shapes appear closed but infact they are open as 2 vector points are overlapping but not joined.

      Reply
  20. Pingback: A Free PS Script Auto Export Vector From PSD To SVG | WebQE.com

  21. Pingback: Free Script For Exporting Photoshop Layers To SVG | WarWebDev

  22. Pingback: Weekly Design News (N.216)

  23. Pingback: Weekly Design News (N.216) « Refined Sites Blog

  24. Pingback: Un script Photoshop pour exporter vos calques vectoriels en SVG - Kune.fr

  25. Pingback: PSD to SVG, UI Faces, UI Names - 胡作菲为 网页设计

    1. David Tintner Post author

      Jaafer, make sure your layer is actually a vector layer. Also that you are using Illustrator CS5 and up as well

      Reply
  26. Pingback: 网页设计和前端开发资源周刊N.54

  27. Eytan Chen

    The script only create the svg.ai files for me in the folder. also, trying to open those files in AI doesn’t work. I am working with AI CS4 version and PS CS6

    Reply
    1. David Tintner Post author

      Hey Eytan, sorry but you need Illustrator CS5 or up as well too.

      Reply
  28. Pingback: Exportera PSD till SVG | keckes

  29. Simon

    Great script ! I have a few question. How about vector shape composed only with outline ? When I export them, I get a black plain shape and not the outline has specify in my photoshop document.

    Is it possible in the future to have an option to say “Take the shape that I want and also the composition size with element’s position.” ?

    BTW, useful if you need a frame by frame animation from photoshop to illustrator !

    Nice work with this script !

    Reply
    1. David Tintner Post author

      Thanks Simon, glad you like! And those are great ideas. Be on the lookout for them in V2

      Reply
  30. Pingback: Exportar un vector de Photoshop a formato SVG (script) | Kabytes

  31. Pingback: Exporta tus capas vectoriales de PS a SVG en un solo clic! | Render | Arte, Cultura, Producción y Diseño

  32. Pingback: Esportare livelli di Photoshop in SVG | Mr.Webmaster Blog

  33. Justin

    Any plans in the future to create a multi layered .svg? Like all the layers in a folder called folder.svg or something.

    Reply
    1. David Tintner Post author

      hmm, this is a nice idea and could be done. I’ve been compiling a list of feature requests for version 2. Adding it to the queue

      Reply
      1. Leandro

        Hi, I need to create SVG from outlined (hollow) icons. Do you have an idea if this can be done, since merging the layer flatten the entire icon? Other suggestion: export the folder directly so we don’t need to merge the layer. Do you have a plan to build a second version. Keep it up!

        Reply
  34. Pingback: Siti Internet Aziendali » Esportare livelli di Photoshop in SVG

  35. Pingback: Script para exportar vectores de Photoshop a SVG con un click

  36. Pingback: Script para exportar vectores de Photoshop a SVG con un click | feedandroid

  37. Pingback: Script para exportar vectores de Photoshop a SVG con un click | Grupo Libre

  38. Pingback: Script para exportar vectores de Photoshop a SVG con un click · STARCROM

      1. David

        svg file PSD layer of the color value of the RGB color values ​​and different output

        Reply
  39. Pingback: 40 Fresh Tools and Services for Web Developers | Splashnology.com

  40. Pingback: Exportar SVG desde Photoshop CC | DSÑ + IEO * GRFC + ÁIO

  41. Pingback: Freebies wednesday

  42. Pingback: Docucare Copy Service – Freebies wednesday

  43. Pingback: Freebies wednesday | Web Mirra

  44. Pingback: Freebies wednesday | Design blog

  45. Pingback: R&D XLab – BRAND ALCHEMISTS – Transforming your ideas. » Freebies wednesday

  46. Pingback: 15 Best & Must Have Photoshop Actions, Scripts & Plugins « The Creative Project

  47. Vladimir

    Hello, the script creates test.svg.ai and there is no test.svg
    Photoshop CC, Illustrator CC (working)

    Reply
  48. Chris Gali

    Hi…

    When I run the script I get an error at line

    var SvgWiz = SvgWiz || {

    I then changed to

    var SvgWiz = {

    Now I’m getting an error about this line…

    projectPath : app.activeDocument.path,

    I fixed that by manually getting the path…

    then I get an error saying this following line is NOT compatible with my photoshop…

    s.doc.exportDocument(s.svgFile, ExportType.ILLUSTRATORPATHS, opts);

    My Details:

    OS: MAC OSX
    Photoshop: CS6

    Thanks

    Chris

    Reply
    1. David Tintner Post author

      Hey Chris, do you have illustrator CS5 or higher installed too? Its required. You don’t need to change any code. Make sure your PSD file is saved, you have a true vector layer in the PSD, and that it is named properly

      Reply
  49. Pingback: Script para exportar vectores de Photoshop a SVG | Gabriel D. Sulé

  50. Nathan

    You may also like to try Drawscript which works for Illustrator.
    http://drawscri.pt/

    Creates SVG for your CSS/Canvas as well as JSON, Processing, Actionscripts3, and more.

    Reply
    1. David Tintner Post author

      Sorry Jolene I don’t think we are going to have time to downgrade it. We are working on releasing version 2 with improvements though

      Reply
  51. Jax Roth

    Whenever i run the script it says, “You need to add some layers to convert. Make sure they are named with .svg” What should i do?

    Reply
  52. Aaron

    This doesn’t seem to work to well with Shape layers. When I export, I’m missing pieces of the icons and some icons are duplicated within the same SVG file. Also, they seem to all export at different sizes.

    Reply
    1. Sagi Shrieber

      Hi Aaron, you have to make sure all vector points are selected in each and every SVG you want to export. The export size is basically the same size as the shape you’re exporting.

      Reply
  53. Pingback: 28 Tutorials about SVG Images in Web Design

  54. Thomas

    The script was installed perfectly, however don’t know where the save location is? I’ve done everything perfectly, merge all layers and renamed it as NAME.svg, then activated the script, no error messages, but where does it save?

    Reply
    1. Skyler

      It saves in the same spot your PSD is saved in. For example, if the your PSD is saved on your desktop the SVGs are on your desktop.

      Reply
  55. Adrian Florin Florescu

    Hey,

    Nice script. I really think that the outline option should be there because I get s plain shape instead of the shape I have in the PSD file.

    Great job. Can’t wait for the V2

    Reply
  56. Way W

    Hi, thanks for the scripts. But i tried using photoshop CC 64 64 bit did not work? My PS not responding after i clicked Save as SVG script. Any workaround? Tks

    Reply
  57. Pingback: 28 Tutorials about SVG Images in Web Design | Eduardo Akio Fukunari - Blog

  58. Jim Pratt

    I only get the Illustrator files exported and not the SVGs. Anyone else getting this problem? Is there something i’m not doing correctly? I have checked against all the known issues.

    Reply
  59. Pingback: 10 Best SVG Tools

  60. Pingback: 10 Perfect SVG Instruments | Daily News

  61. Pingback: Newsletters imprescindibles para diseñadores y desarrolladores | Criterion

  62. Zander

    Just for clarity: Do I *have* to have Adobe Illustrator for the script to work? (I have Photoshop CS6)

    Reply
      1. Zander

        So there is no use installing the script if I don’t have Illustrator… too sad! :~(

        Reply
  63. Katerina

    Thanks! i try this script for mapmaking in our project. Could you write about nessesary to save file first in main arcticle? May be some people won’t find this fact in comment list.

    Reply
  64. Pingback: Retour sur l'Apéro #21 chez Studio Meta | WdStr

  65. Tobi

    I installed the script in PS CC 14.0. But when i test it it only outputs an svg.ai file and no .svg file. Why is that?

    Reply
  66. Pingback: My workflow to export SVG’s out of my Photoshop design files. | Hacking UI Magazine

  67. Ruslan

    Hello, i have problem with this script.
    I always get the message “You need to add some layers to convert. Make sure they are named with .svg”. But i dit it =)
    Help, please!

    P.S. Adobe Photoshop CS6 (13.0), Adobe Illustrator CC (17.1.0), Windows 64x

    Reply
  68. Theresa

    I put the Script in the right place, named the vector layer correctly, and saved the doc. It just keeps crashing my CS6 and doesn’t export anything, nor does the Script show up in the File menu. :(

    Reply
  69. David

    It would be great if this could work for an ‘Embedded Smart Object’ layer. The smart object I want to export originates in Illustrator, but has effects applied to it and I’d like to export it as it appears in Photoshop. Is this possible?

    Reply
    1. Sagi Shrieber

      Hey Davis, unfortunately at the moment this is not possible. Adobe scripting is very limited when it comes to SVGs.

      Reply
  70. Jane Portman

    Thank you guys, this is super-super awesome!

    Protip (it’s mentioned in the guide, but I didn’t do it the first time): make sure to merge shape components for each exported layer.

    Reply
    1. Sagi Shrieber

      Hey Yuren, this means that the script launched itself, and did the first part which is copy from PS to illustrator. The second stage for some reason did not happen which is Save from illustrator to SVG. Try running the script again with your illustrator open. If that doesnt work check if all your shapes are closed properly and “combined” in photoshop.

      Reply
  71. Matt

    Hi, I keep getting an error ‘You need to add some layers to convert. Make sure they are named with .svg’.

    Can the script make SVGs from layers that are Vector Smart Objects? Thanks

    Reply
  72. Mike Pleimann

    Just a heads up–the latest Photoshop CC update 2104.2 natively supports SVG via the image assets functionality. Just add the .svg extension onto the shape layer or group and check the “Image Assets” in File > Generate or use the new “Extract Assets…” function also on the File menu.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *