Convert PNG to SVG

[Guest]

Dearest Adobe Community,

I have many images in the format PNG that I want to convert to SVG, since I have created a responsive website and want the images to preserve their clarity.

I have tried to find a suitable online converter and, if I am correct, Photoshop only works for exporting images in SVG format you create in the software.

Once again, I want to convert PNG to SVG.

Thank you dearly!

Regards

Andreas

[hans-g.]

Hello Andreas,

---------- deleted because my answer became superfluous ---------

Hans-Günter

[Rob Hecker2]

You can easily convert vector images to rasters, but when you go the other direction, you generally get a bloated mess.

The following is the SVG data for the facebook logo:

  <path class="cls-1" d="M313.67,37.13a21,21,0,1,0,21,21A21,21,0,0,0,313.67,37.13Zm8.4,9.31H318a1.76,1.76,0,0,0-1.62,1.45V52h5.67c-0.23,3.18-.7,6.08-0.7,6.08h-5v18H308.9v-18h-3.63V52.05h3.63v-5c0-.91-0.18-7,7.64-7h5.53v6.31Z" transform="translate(-292.67 -37.13)"/>

Now take a PNG of the facebook logo and convert it to a vector/SVG using a tool such as what Hans-Günter provided a link to. Then compare the data, and also examine the images closely.

[Nancy OShea]

I don't recommend converting PNG to SVG. 

If your images begin their life as vectors (text paths, icons, logos), then SVG is the way to go.  But going from bittmap to SVG is like spitting in the wind.  The resulting file size is often much bigger than what you started with and the quality is poor.

Nancy O.

[TwoSuits · Accepted solution]

Nancy is spot on (as usual) that converting Bitmap to SVG automatically is usually a non starter.

The only route I have had any success with this, is to open the Bitmap in Illustrator (I don't know of a suitable alternative but I'm sure one probably exists) and 'Trace' the image to a Vector. This often involves a certain amount of manual input to get the Vector as simple as possible (simpler = smaller) whilst still keeping it crisp and smart. The more complex the image, the more manual input is required, and there is only so much that can be done without resorting to manually recreating the image.

It should be noted (however obvious to some) that there is a BIG difference between Vector graphics and Bitmap images, not least in the way they are created/edited. Someone very proficient in Photoshop can find Vectors extremely difficult to work with, and vice versa.

[Nancy OShea]

Well said.

I have used Illustrator to reconstitute a vector path but it's a tedious process. Not my favorite thing to do.

At some point you have to ask yourself if the reward is worth the pain.  Sometimes it is; sometimes not.

Nancy O.

[Rob Hecker2]

The trace tool in Illustrator is just a joke. You might be able to create an image that looks OK, but behind the scenes it will surely be badly formed, which can cause it to break when sent to rendering for printing, conversion to PDF, or even conversion to SGV.

The only way to end up with a correctly formed graphic that uses minimal paths is to create it from scratch using the drawing tools in Illustrator.

[TwoSuits]

No offence Rob, but you always seem to come across as angry and bitter. Maybe that's your intention, maybe it is just your writing style makes it appear that way or maybe I am just misinterpreting it?

I didn't say the Trace tool was good, I did state that manual input is often required and it certainly is NOT a one click silver bullet for every image. However, it IS possible to convert very simple bitmaps to SVG using it, although this is often time consuming and labour intensive. When first used it takes a lot of experimentation with the settings to get the number of paths created into the sweet spot between too many (large, complex file) and too few (inaccurate representation). Once this is done you should have a reasonable looking vector image but you will then need to expand the image and remove any other unnecessary path, anchors etc. to ensure the vector will convert to the smallest possible size. When saving as an SVG, all the paths, anchors, strokes and fills etc. are converted to a textual description from which the renderer (web browser in this case) draws the image, so any unnecessary data will bloat the file considerably.

I appreciate that some will find it easier to create images from scratch, but equally there are also those who prefer to work with an existing image, and this is what the OP asked. As long as you understand how vectors work and manually check any automated output, either can produce excellent results.

[Rob Hecker2]

you always seem to come across as angry and bitter

I'm having a lovely morning. I can be definitive and terse when I am sure of my position. I don't see any angry or bitter words in my post, unless calling the tracing tool a joke can be seen as angry and bitter.

Fifteen years ago when I was involved in the Adobe Illustrator forum, we actually did refer to the trace tool as a joke. You know how a company or school will play the same joke on every new employee or student? Well that's the trace tool. It's Adobe's joke on people new to Illustrator.

A vector is code, and just like any other code, like SQL or PHP, the fact that it works don't mean it ain't broke. When I worked in advertising, I often had to recreate logos from scratch that had been sent to us by graphic designers who had used a trace-like tool or simply didn't know how to build a vector image.

[TwoSuits]

Pretty sure the trace tool has improved slightly in the last 15 years?

All my SVG files resulting from the above method pass W3C validation, work perfectly in all the browsers I have tested and, as vectors, have never been rejected by printers, so thanks for your concern but I stand by my post: It isn't quick or easy but it IS possible with simple bitmaps. It's definitely not my preferred method but it is very useful occasionally. 

[hans-g.]

Hello Andreas,

---------- deleted because my answer became superfluous ---------

Hans-Günter

[Guest]

Thank you so much for all of your insightful answers and I hope you stay patient with people who do not possess the same knowledge in this specific matter.

I understand that raster images are fundamentally different from vector images, so there is no similar conversion process as between JPEG and PNG for example.

I just wanted to capture more people by denoting this thread "Convert PNG to SVG".

My intent is simple after having visited so many responsive websites that have appealing images regardless if the web browser has been minimized, whereas mine become blurry...

So my initial interpretation of your answers indicates that the best solution would be to resort to creating all images in vector graphics from scratch.

[Rob Hecker2]

So my initial interpretation of your answers indicates that the best  solution would be to resort to creating all images in vector graphics  from scratch.

Yes, we can all agree on that. Where we differ is in the usefulness of tools that automatically convert rasters to vectors.

[Nancy OShea]

Let's qualify what you mean by images. 

Photographs are not a candidate for SVG.  If you're visiting web sites with good quality photos, chances are they are serving more than one JPG in various sizes (height x width).

A guide for creating a better retina web - Ivo Mynttinen / User Interface Designer

Common Icons can be expressed with Fonts now.  They have a small footprint and they scale well. 

See Font Awesome, the iconic font and CSS toolkit

SVGs are excellent for text, logos, line art, and icons that begin life as Vectors.

Nancy O.

[osgood_]

Dominus AB wrote:

My intent is simple after having visited so many responsive websites that have appealing images regardless if the web browser has been minimized, whereas mine become blurry...

If they are becoming blurry then you're either viewing on a retina screen or the original images are not large enough in the first instance to cater for various different sizes at which they require to be shown across a range of devices. Images are generally massive now because you have to take the largest common denominator into consideration. If you have an original sized image which is 200px wide because it needs to fit into a 200px wide column on desktop but that image needs to fill the width of a tablet it isn't going to be wide enough - so create the orginal image at the widest size you need, make that image 500px wide and just set it to fill 100% of the width of its container. As soon at the image exceed around 120% of its original size it will start to loose its clarity.

[Guest]

Assume that I am above average as a fairly quick learner and who has a great sense for these types of software...

What are the outlooks for someone who wants to create pure SVG with Illustrator using PNG images with good quality?

[Rob Hecker2]

Illustrator doesn't require great intelligence, but it requires a lot of practice/experience before someone can work with it effortlessly.

The pen tool is the basic tool in Illustrator, and it is not intuitive.I think most people get hung up there.

Illustrator is kind of hard to get started with, but it becomes easier as you go more deeply into the program. Photoshop, on the other hand, is easy to get started with but on an advanced level gets difficult.

[Nancy OShea]

Can you show us one of your PNG images?

Copy & paste it into a web forum reply.  Don't use email, it won't come through.

[Guest]

Thank you so much for all of your insightful answers and excuse the late response.

I have started with Illustrator and it works great to import an image and trace it manually.

The first individual to point out this solution was TwoSuits so I am going to award him the correct answer.

I also want to thank Nancy and osgood_ for always being there with your valuable responses. (I will take into account retina screen and image sizes)

Think of the images that I am creating in SVG as in line with diagrams (also a logotype) that frequently occur in Powerpoint presentations, so no complex images that would be too difficult to create from scratch.

Thank you again and I wish you the greatest most pleasant weekend!