Part of the Intro to SVG Reading List

In previous articles I’ve explained how to work with SVG in Adobe Illustrator, and how SVG export has been improved in the Adobe suite. The most recent versions of Adobe PhotoShop and Illustrator feature further enhancements that make modifying and generating elements even easier and more productive:

New SVG Features In Adobe Illustrator

The first new feature is perhaps the most remarkable: treats SVG as a native format. That is, you can copy an element from Illustrator and paste it directly into an editor as SVG. Really. It’s that simple:

While the pasted code could use a bit of a cleanup, this excellent feature will make it considerably easier to generate and modify SVG code.

SVG Export From Adobe PhotoShop

is traditionally associated with bitmap image editing… but if you’re willing to put in a little extra work to gain a beta feature, you can get SVG documents out of PhotoShop almost as easily as you can from Illustrator:

  1. Ensure that Adobe PhotoShop CC is closed.
  2. In a text editor, insert the following lines in a new, blank document: 
    { "generator-assets": { "svg-enabled": true } }
  3. Save the document as generator.json in your home folder: for Mac users, that’s in Macintosh HD > Users > yourname (where you’ll see folders like Applications, Desktop and Documents); in Windows, it’s C:\Users\yourname (which includes folders such as AppData, Contacts and Favorites)
  4. Start PhotoShop CC, create a new document and draw a vector shape.
  5. Under the File menu, choose Generate > Image Assets
  6. Save the PSD as something.psd: your Desktop would be a good place.
  7. Move to the Layers palette and name the vector layer somethingelse.svg (note that the layer name cannot contain a hyphen)
  8. Switch to the location where you saved the PSD. Alongside it you’ll now find an something-assets folder; inside that, a document named somethingelse.svg. It’s your layer, automatically saved, exported, and updated as an SVG.

Again, the exported SVG document needs a little improvement: you’ll find that the viewport may be a little small, and the code could be cleaned up somewhat; I expect that it will be fixed in future releases.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.