P: How to export to SVG from Photoshop?

[TomH07]

I have a PS file that has text that I converted to a shape, plus another shape. I want to convert that to an SVG file, but, when I use the Explort As dialog, the only export file options are GIF, PNG and JPG. If I do Save As, the only options are Photoshop, Large Document Format, Photoshop PDF, and TIFF. 

I searched the help system, there's nothing there that I can find. Did they remove SVG export from Photoshop?? I sure hope not. I have Photoshop 22.4.3. 

[Artsymae]

We pay for Adobe's products- mainly for quality graphic work consisting of ALOT of vector images... makes NO sense why they would remove that option from photoshop. come on adobe, get some sense.

[katieb77346109]

I am brand new to adobe photoshop cc 2015 and I am try to convert a png file to an svg file.  Is there anyone who can help me?

[Derek Cross]

You can't - PNG and JPGs are raster formats and svg is a vector format.

You might be able to do something with tracing in Illustrator, if you have it.

[c.pfaffenbichler]

Photoshop has some vector capabilities (funnily enough in some aspects they are even superior to Illustrator’s) so you might be able to recreate the elements in Photoshop, but as Derek Cross mentioned Illustrator may be the better application for the task.

Could you post (a lores version of) the image in question?

[Lilybiri]

With PS 2017 it is possible, I often use this work flow to convert a bitmap image to a SVG (for file size reasons):

1. Open the PNG in Photoshop
2. Edit and save file as PSD file
3. Use File, Export as and indicate the format SVG.

If my memory is correct, exporting to SVG is a recent feature of Photoshop, have been waiting for it since quite a while. I don't think it is available in PS 2015.

[peterl54357453]

And what does it do with a .PSD which contains raster parts? Does it convert it in high quality? Currently I use this converter: image.online-convert.com/convert-to-svg but it hardly can handle complex images.

[Nancy OShea]

In my experience raster images make terrible SVGs.  Scalable Vector Graphics need sharp, crisp edges to work effectively.  If you try to convert a fuzzy bitmap to SVG you will invariably have an enormous file size and poor image quality -- both deal breakers. 

My SVGs all begin life in Illustrator or Inkscape because they are vector graphics apps.   Photoshop is 1st & foremost a raster image editor which is fine for JPG or PNG images; not SVG.

Assuming you don't have a vector graphic to work with, you would need to trace paths around your image onto a new layer.  Depending on complexity of image, tracing new paths could be labor intensive.

I have not found any automated method that works 100% perfect.

[peterl54357453]

Thank you!

I will take a look on Inkscape too.

Personally, I make .SVG images from logos to use them on https://www.vouchers4u.com/ . As you can see everything is optimized for retina like displays. Nowadays vector-graphics tends to be a must have on web, since everyone have high-res devices.

[Thomas Logan Art]

Amazing what can be done when someone know's what they're talking about.  Almost clicked off the page after the first several comments "can't be done" and then I got to yours.  THANKS - works like a charm!

[c.pfaffenbichler]

Do you understand the difference between vector and pixel content?

[davido40219699]

Well, yes and no. It creates an svg file but the content isn't vectorized. It's just an svg with an image layer containint the original rasterized graphics so it really doesn't serves that much of a purpose. You just wrap the original data in a new container.

[Muhammad5FE1]

Yes , I can do.

[saras28135836]

Hi,

How do I export a Photoshop image as an SVG and save as an image to upload in Indesign? It keeps saving as an Internet Explorer code, not an image I can upload in other CC files.

It successfully saves as an SVG finally, but each time I go to either import or place it just gives me a code. I don't know where to place code in Indesign yet, and I just want to be able to have an svg image on file.

Thanks!

[Sheena Kaul]

Moving to Photoshop General Discussion‌

[JJMack]

Perhaps Creative Sync library would do that under the covers. CreativeSync - Adobe MAX 2015 - Create with Impact - YouTube

[khatwani]

Hi

Greetings !!!

Here are the steps that show how an image be saved as SVG from photoshop :http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/

Also I would recommend Adobe Illustrator for SVG images.

As it comes to your second query of InDesign.

Open Indesign

Click File-> Place and check the import options

Now choose your SVG file, it will give you the import options of that SVG image.

Regards

Jitendra

[saras28135836]

Hi again,

I've seen that link for the Photoshop 2014 update! However, my 2015 one doesn't have the "extract assets" options; also when I tried to do this before the update it still saved my image as a code, not an actual image

[PBArtattack]

The Extract Assets thing got changed in CC2015. Now it's File  >  Export  >  Quick Export as [file format]. The default setting is PNG. To get it to be SVG, you have to go to Edit  >  Preferences  >  Export... and choose between PNG, JPG, PNG-8, GIF or SVG. Counterintuitive? Well, uh, hmmm.

I don't have a copy of InDesign, but I created a SVG and threw it into Inkscape. It opened properly.

[saras28135836]

I haven't heard on Inkscape but will look into it, but surely there has to be a way to do this on Adobe that I'm just missing? Still new to CC so I thought I'd ask on here.

[khatwani]

Hi saras28135836

Yes you can try the steps that PBArtattack suggested.

Yes I forgot that new CC 2015 have the changed option of extracting assets that PBArtattack explained.

Regards

Jitendra

[saras28135836]

Hi guys,

I'm sorry, I might not be making my issue clear. I have already changed my export preferences/quick export to SVG, that part is successful, but when I go to import this SVG file into Indesign, it just gives me the code to paste/place in, not the actual image. Is there a way within Adobe CC to turn this code into the actual image to copy/paste in?

[khatwani]

Hi

Would you be able to share that SVG image so that we can try that at our end.

Regards

Jitendra

[PBArtattack]

I really should keep out of this because this is outside my area of competency (ha!), but apparently the only way you can import/place a SVG in InDesign is to first open it in Illustrator and convert it to AI or PDF and then import it into InDesign.

https://www.quora.com/Why-does-Adobe-InDesign-still-not-support-the-placement-import-of-SVGs-in-CS6

The link dates from 2012, but I don't think the situation has changed.

Btw, Inkscape is the open source equivalent of Illustrator; they're both for vector graphics. Mind, I'm not pimping for non-Adobe products, it's just that I do so little vector work I can't really justify the expense of Illustrator.

[SarasotaWebPro]

In Photoshop you can save an image as an svg by going to File > Export > Export As. Under file settings choose svg, then Export All.

[stephenowoyemi]

Am trying to export a Photoshop Logo as an SVG. It not shwoing SVG option at Export As. The image is not clear when i save as PNG. [Spam link removed by moderator] Here is the logo that I upload.

It successfully saves as PNG which I also uploaded [Spam link removed by moderator]  Here as the platform logo. I don't know how to get my file saved as SVG. I just want to be able to have an svg image on file.

Thanks!