Skip to main content
A
Anonymous
May 28, 2016
Answered

Convert PNG to SVG

  • May 28, 2016
  • 6 replies
  • 37524 views

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

    Correct answer TwoSuits

    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.

    6 replies

    A
    Anonymous
    June 11, 2016

    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!

    A
    Anonymous
    June 1, 2016

    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
    Rob Hecker2
    Legend
    June 1, 2016

    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.

    A
    Anonymous
    May 31, 2016

    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
    Rob Hecker2
    Legend
    May 31, 2016

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 28, 2016

    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.

    Nancy O'Shea— Product User & Community Expert
    TwoSuits
    TwoSuitsCorrect answer
    Participating Frequently
    May 29, 2016

    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.

    Rob Hecker2
    Rob Hecker2
    Legend
    May 30, 2016

    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.

    Rob Hecker2
    Rob Hecker2
    Legend
    May 28, 2016

    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.

    hans-g.
    hans-g.
    Legend
    May 28, 2016

    Hello Andreas,

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

    Hans-Günter

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices