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!


  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


    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 :)

    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.

      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

      2. Jess

        Hi Matt, that function doesn’t appear in my Photoshop CC 2014? Did they remove it, or can it be found somewhere else?

  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?


    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

    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.

  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 :-)

    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!

      1. allison mcgrath

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

  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?

    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

  5. James Deering

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

  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?

  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 |

  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

    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.

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

  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 -

  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

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

  27. Eytan Chen

    The script only create the 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

    1. David Tintner Post author

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

  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 !

    1. David Tintner Post author

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

  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.

    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

      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!

  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

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

  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 and there is no test.svg
    Photoshop CC, Illustrator CC (working)

  48. Chris Gali


    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:

    Photoshop: CS6



    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

  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.

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

    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

  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?

  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.

    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.

  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?

    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.

  55. Adrian Florin Florescu


    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

  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

  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.

  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)

      1. Zander

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

  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.

  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 file and no .svg file. Why is that?

  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

  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. :(

  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?

    1. Sagi Shrieber

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

  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.

    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.

  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

      1. Maria

        Will this feature of extracting vector smart objects as an svg file be available at some point in the future?

  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.

  73. Pingback: Free photoshop script: Export your vector layers from PS to SVG in a single click! | Breton Brander

  74. Pingback: A Must-See Collection Of Powerful Photoshop Free Tools & Plugins |

  75. JayJo

    This script has caused my PS to crash all 4 times I’ve used it. Is CC2014 not supported?


Leave a Reply

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