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

Free script: Export your layers from photoshop 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.

 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.

David Tintner

Front end developer and entrepreneur, with a passion for UI/UX design. Also one of the co-founders of TapDog.

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

Leave a Reply

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