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

5
  • 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, 2014 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, 2014 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, 2014 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, 2014 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, 2014 at 15:51

2 Answers 2

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)

2
  • Can this be done within PhotoShop? This answer say's it's not possible.
    – Dan Bough
    Oct 28, 2014 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. Oct 29, 2014 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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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