1

I have a project where I need to extract Vector Smart Objects as SVGs to use on a website. I'd like to make a single file with these SVGs - it looks like IcoMoon.io will do this for you.

I've extracted each Vector Smart Object layer as an svg (right+click layer, export asset) and then uploaded the files to icomoon. The images don't seem to be recognized (getting blank icons). If I test with an SVG acquired from somewhere else, it seems to work fine.

I'm new to this process - am I missing something?

Here are the settings one of of the objects. It looks like it was created in AI - although I don't have access to the original.:

Image Settings

  • I tried it in multiple different ways and I couldn't re-create the issue. Try to make a new document with 1 simple shape and export that as svg. – Joonas Oct 26 '14 at 18:16
  • @joonas - a new object seems to work fine. I've updated the question with a screenshot of one of the objects I'm trying to work with. Should I be able to export this to SVG? – Dan Bough Oct 26 '14 at 20:34
  • When you open an .ai file in photoshop, it'll be rasterized. You'll need the layer to be a Shape layer for the exported .svg to contain a vector object. Svg can contain raster images, but in most cases, like this one, it defeats the purpose of making an svg file. Importing vector files to photoshop is pretty difficult. – Joonas Oct 26 '14 at 21:19
  • The only way is to copy in illustrator and paste to photoshop as a shape layer. I can only come up with a few options for you: 1. Open and export it to .svg with Illustrator (You could get a trial version). If you don't have illustrator, there is a chance you can open the file in Inkscape instead. I don't think it has a native support though. If you have any other vector format available, Inkscape should be able open those. 2. Redraw the image in photoshop by using Shape layers. 3. Use the raster image and a raster image format instead... – Joonas Oct 26 '14 at 21:20
  • @joonas - After updating Inkscape I double clicked on the Vector Smart Object in PhotoShop. It automatically opened in Inkscape where I could save it as an SVG. Clunky, but more cost effective than AI. Thanks for your help! – Dan Bough Oct 27 '14 at 15:51
1

If you need the vector information, currently you need to convert the smart object into a shape layer, otherwise it will be stored as a rasterized image within the SVG file. We are investigating how to better read Illustrator smart objects, but it is taking a while.

(I am the Product Manager looking at Extract Assets dialog in Photoshop)

  • Can this be done within PhotoShop? This answer say's it's not possible. – Dan Bough Oct 28 '14 at 12:07
  • When you paste the illustrator file ensure you import it as a shape layer instead of as a smart object. Otherwise use the workaround suggested in that answer. – Divya Manian Oct 29 '14 at 1:02
0

Basically the Photoshop "Extract Assets" process doesn't always work for SVG, you need to open the layer in Illustrator and export as SVG from there....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.