Generate SVG with Photoshop CC

Generate SVG with Photoshop CC

EDIT – October 2014: Since the October 2014 update of Photoshop CC, Photoshop can natively export SVG!!! This is awesome. Just select the layers you want to export, open the “File > Extract Assets” window. It lets you select layers and define in which format you want to export them one by one. You have the choice between JPEG, PNG and SVG! Update your Photoshop CC, try the new “Extract Assets” UI and let me know what you think. The Photoshop team is actively working on it.

extract

 

Original hack before the October 2014 Update of Photoshop CC:

Adobe updated Photoshop CC in January 2014 and introduced several new features such as “Warp perspective”, “Print 3D objects” and “Linked smart objects”. Terry White has recorded a video to showcase these new features:

Tim Riot also shared on Twitter that Adobe Generator for Photoshop can now export SVG files. The feature is in beta and here is how you can enable it:

  1. Close Photoshop CC. The required version to make it work is 14.2.
  2. Create an empty text file and name it “generator.json”
  3. Copy and paste inside this line of code:
  4. Save this file generator.json in your user home folder.
  5. Open Photoshop CC and a PSD file.
  6. Activate Generator (File > Generate > Image assets).
  7. Rename your vector layers adding a .svg extension. Photoshop will generate SVG files in the assets folder.

layerSVG

Adobe Generator is an open-source technology available on GitHub. You’ll find more information about the Configuration Options here: https://github.com/adobe-photoshop/generator-assets/wiki/Configuration-Options

 

 

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

21 Comments

  1. Hi, I’m a bit confused by your instruction #4: place in your Home folder. That’s a bit ambiguous to me, can you be a bit more specific as to what you are calling a “Home folder?”

    Thanks

    • Hi Gary, on a MAC it would be “Macintosh HD>Users>michaelchaize”. On Windows, there is also a Users folder.

  2. I’ve followed these instructions to the T, numerous times. I can generate a reflow project, no problem, but I cannot generate my assets.

    I’ve got the jSon file set, so I am a bit perplexed. Is there a step I am missing?

    Thanks.

    • Do you have Photoshop CC version 14.2?

  3. Michael Chaize considering you work for Adobe I would think that you would go into more detail for Windows users and the general actions of this Photoshop SVG generator. I’ll attempt to fill in some areas.

    I am using Photoshop CC 4.2.1 on a Windows 8.1 PC (Vista and 7 are most likely the same deal).

    Now the destination that you need to place your generator.json file in is the following:

    C:\Users\YOUR-NAME\
    Replace YOUR-NAME with the name you gave when you created your Windows Logon Account. Mine is called Philip so my full path was C:\Users\Philip\

    You should see this folder listed alongside two other folders named Default and Public.

    Go inside this folder (for me it is Philip) and create the generator.json file. It should now be resided among some folders by the name of AppData, Contacts, Favorites, Links, OneDrive, SavedGames, Searches, ect.

    If you are creating this file with notepad be sure that after you have saved it that it did not save as generator.json.txt. If it did simply rename it so that you have removed the .txt at the end of the filename.

    Take note of the folder where your open image file is located on your computer. Photoshop will save your newly generated file in a folder within this location. So if your image file is a tiff (preferably with with a shape layer) and is located on your desktop, PS will create a new folder on your desktop. This new folder will share the same name as your currently open image file. To generate your SVG or a png, jpg, gif, ect just name a layer you want an image generated from to logo.svg, or 20pxIcon.png24 or someAsset.png or anything.jpg12 or LogoABC.svg and PS will save the generated file.

  4. Got it working ,but it sure does export some funky canvas sizes.

    Btw, I had to restart Photoshop for it to work.

    Thanks for posting!

  5. FINALLY! I’ve been looking all over for a good solution to this problem. Works better than expected. Thanks for sharing!

  6. Hi I have photoshop CS6 version 13.0.6
    Mac OS X v10.6 64-bit – 10.8 64-bit.

    I have the latest update i can find, i have created a text file in home, all seems ok but Photoshop is not showing ‘Generate’. What am I doing wrong, please as I really need SVG for my cutting printer and I don’t want to buy illustrator just for this… please help asap.

  7. Hi I am using Photoshop CS6 13.0.6 and Mac OS X v10.6 64-bit – 10.8 64-bit.

    I have created the text file, all seems ok but I can not find ‘Generate’ can you help pls urgently as I have a college assignment in art and i need SVG. Thanks

    • @Giselle It won’t work for CS6 – if you read the article it says:
      Close Photoshop CC. The required version to make it work is 14.2.

      Works fine for me in Photoshop CC 2014.

  8. Works great! Just open the svg in illustrator after.. hit transform to get your object size… then edit the art board down to that size and save. Send it to the dev team…

  9. is it working for multiple layers?

    thanks.

  10. I know that Adobe often scraps features that people don’t use much, so first I’d like to express my support for this feature. It would probably be a good idea to promote it a bit more. At the moment if it was scrapped most people wouldn’t care because they wouldn’t know it existed.

    Maybe as well as the current method you could add a checkbox to Save for web to save all slices that only contain vectors as SVGs. I think a lot more people would use this feature if it was obvious.

    Also, it would be great if more work could be done on this. At the moment it works okay for basic things like shapes, but trying to export a group of layers that makes up a button doesn’t give such a good result.

    Dave

  11. This is awesome! Here’s a tip… if you put multiple vector layers in a folder and add the .svg file extension to the folder name, it will generate a single .svg file.

  12. I have CC 20140730.r.148 x64. It doesn’t work. Says: Unsupported extension: svg. Please invest some time in this feature, I think it is a very important one that would facilitate the whole process and should work not only on CC 14.2.

  13. Does this work with Photoshop CS5? Thanks.

    • No sorry. CC only

  14. Thanks Michael Chaize, I really appreciate.

    I lost original SVG files and I changed in to layer,

    soon later I had to re convert it to SVG

    your article help me a lot.

  15. Is there a way to extract vector smart objects as an .svg file? Thanks so much for clarifying

  16. This is awesome! Here’s a tip… if you put multiple vector layers in a folder and add the .svg file extension to the folder name, it will generate a single .svg file.

Trackbacks/Pingbacks

  1. Exportar SVG desde Photoshop CC | DSÑ + IEO * GRFC + ÁIO - […] método lo obtuve de Creative Droplets. Para que funcione necesitamos tener Adobe Photoshop CC […]
  2. John Nack on Adobe : Feedback, please: SVG in Photoshop - […] better conversion of Photoshop artwork into Web-native content, including CSS & SVG. You can turn on SVG export via…
  3. Photoshop CCの画像アセット機能でSVGを書き出す裏技 | Stocker.jp / diary - […] 参考: Generate SVG with Photoshop CC (beta) | Creative droplets […]
  4. SVG-Grafiken erstellen und einbinden | kulturbanause® blog - […] Generate SVG with Photoshop CC (beta) […]

Submit a Comment

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