How to convert a PNG image to a SVG?
15 Answers
There is a website where you can upload your image, and see the result.
But if you want to download your svg-image, you need to register. (If you register, you get 2 images for free)
potrace
does not support PNG as input file, but PNM.
Therefore, first convert
from PNG to PNM:
convert file.png file.pnm # PNG to PNM
potrace file.pnm -s -o file.svg # PNM to SVG
Explain options
potrace -s
=> Output file is SVGpotrace -o file.svg
=> Write output tofile.svg
Example
convert 2017.png 2017.pnm
Temporary file = 2017.pnm
potrace 2017.pnm -s -o 2017.svg
Script
ykarikos proposes a script png2svg.sh that I have improved:
#!/bin/bash
File_png="${1?:Usage: $0 file.png}"
if [[ ! -s "$File_png" ]]; then
echo >&2 "The first argument ($File_png)"
echo >&2 "must be a file having a size greater than zero"
( set -x ; ls -s "$File_png" )
exit 1
fi
File="${File_png%.*}"
convert "$File_png" "$File.pnm" # PNG to PNM
potrace "$File.pnm" -s -o "$File.svg" # PNM to SVG
rm "$File.pnm" # Remove PNM
One-line command
If you want to convert many files, you can also use the following one-line command:
( set -x ; for f_png in *.png ; do f="${f_png%.png}" ; convert "$f_png" "$f.pnm" && potrace "$f.pnm" -s -o "$f.svg" ; done )
See also
See also this good comparison of raster to vector converters on Wikipedia.
-
2The image looses color when converted from pnm to svg using potrace. Is there any way to preserve color?– CoderOct 9, 2014 at 1:47
-
1Hi @mundella. I have always used
potrace
for black & white icons. Thanks for your feedback. But sorry no idea how to preserve colors... Ho! I have an idea: If your original image has few colors (let's say three unique colors), you may create three initial images (one for each color). Then convert to SVG. And finally, merge the three SVG content in one file (SVG is XML based). Hope this could help... Cheers ;-)– oHoOct 9, 2014 at 19:21 -
-
1Hi @AmiKamboj. I am not sure to understand your question. The commands
convert
andpotrace
are available on many platforms. I am using Linux-based computers. I have just used these commands yesterday to produce a SVG from a scanned paper. You can see the result : cpp-frug.github.io/images/Cpp-President-2017.svg Please explain more about your target. What do you want / wonder ? What is your need / wish ? Cheers ;-)– oHoJul 29, 2016 at 8:41 -
1I've used just about every online x to svg converter out there. The potrace npm package blew them all out of the water. It's awesome.– tsteveNov 18, 2017 at 20:42
A png is a bitmap image style and an SVG is a vector-based graphics design which supports bitmaps so it's not as if it would convert the image to vectors, just an image embedded in a vector-based format. You could do this using http://www.inkscape.org/ which is free. It would embed it, however it also has a Live Trace like engine which will try to convert it to paths if you wish (using potrace). See live trace in adobe illustrator (commericial) is an example:
http://graphicssoft.about.com/od/illustrator/ss/sflivetrace.htm
-
1I've used the live trace in Inkscape to re-create logos with long lost originals. Unless the latest version has made some improvements, it is a bit hit-or-miss. Having said that, I've also manually traced some logos in Inkscape and managed quite fine.– AnonJrDec 7, 2009 at 17:19
-
12Here is an explanation how to do this in Inkscape: wiki.inkscape.org/wiki/index.php/Potrace Oct 9, 2012 at 6:43
-
great comment. We have noticed that iOS 7.1 Safari will not display images embedded in svg's while Chrome does not have a problem with it Sep 3, 2014 at 10:00
You may want to look at potrace.
-
1this Potrace is very accurate when you know how to use it: but its not multicolor 1.) convert your file to BMP 2.) (for the accurate part) convert bmp to a high resolution(strech it) 3.) color the shapes you want to trace in black 4.) convert 5.) change width and height to original 6.) appreciate the accurate tracing.– PauAIDec 14, 2015 at 2:28
Easy
- Download Inkscape (it's completely free)
- Follow the instructions in this short youtube video
As you'll see, if you want to do a whole lot of other clever .svg stuff you can do it using Inkscape also.
A non-technical observation: I personally prefer this method over "free" website offerings because, aside from often requiring registration, by uploading the image, in all practical terms, one is giving the image to the website owner.
-
1Why the downvote? I use this approach very successfully. At least have the courtesy to explain why so people can benefit from your insights.– PanchoFeb 5, 2016 at 16:37
-
5Following those instructions only wraps the image with SVG XML - it doesn't convert anything to path data.– RobertFeb 6, 2016 at 19:25
-
@Robert - thanks for the info, I was blissfully ignorant as it worked fine for my purposes. This does not however detract from the fact that Inkscape is able to perform a complete PNG to SVG conversion - and much more. To illustrate for anyone interested I amended my answer to include a short explanatory video clip.– PanchoFeb 6, 2016 at 23:24
-
Is that really so? I checked the generated SVG and it appears to have path data, unlike the mobilefish method... Apr 23, 2017 at 7:16
-
This is the easiest way. Should be the top answer. All steps are explained in the video. And it's a real SVG, nothing embedded Feb 10, 2018 at 18:04
with adobe illustrator:
Open Adobe Illustrator. Click "File" and select "Open" to load the .PNG file into the program.Edit the image as needed before saving it as a .SVG file. Click "File" and select "Save As." Create a new file name or use the existing name. Make sure the selected file type is SVG. Choose a directory and click "Save" to save the file.
or
online converter http://image.online-convert.com/convert-to-svg
i prefer AI because you can make any changes needed
good luck
-
3+1 for online-convert.com. Tried it now with a couple of monochrome silhouettes.. performed flawlessly.. Also seems to be completely free.– nedRDec 8, 2013 at 13:24
-
-
1Didn't realize Illustrator had this cooked in. Having everything as .ai already, this will save me a ton of time. Feb 4, 2015 at 22:50
To my surprise, potrace it turns out, can only process black and white. That may be fine for you use case, but some may consider lack of color tracing to be problematic.
Personally, I've had satisfactory results with Vector Magic
Still it's not perfect.
A note to those using potrace and imagemagick, converting PNG images with transparency to PPM doesn't seem to work very well. Here is an example that uses the -flatten
flag on convert
to handle this:
sudo apt-get install potrace imagemagick
convert -flatten input.png output.ppm
potrace -s output.ppm -o output.svg
rm output.ppm
Another interesting phenomenon is that you can use PPM (256*3 colors, ie. RGB), PGM (256 colors, ie. grayscale) or PBM (2 colors, ie. white or black only) as the input format. From my limited observations, it would appear that on images which are anti-aliased, PPM and PGM (which produce identical SVGs as far as I can see) shrink the colored area and PBM expands the colored area (albeit only a little). Presumably this is the difference between a pixel > (256 / 2)
test and a pixel > 0
test. You can switch between the three by changing the file extension, ie. the following use PBM:
sudo apt-get install potrace imagemagick
convert -flatten input.png output.pbm
potrace -s output.pbm -o output.svg
rm output.pbm
You can also try http://image.online-convert.com/convert-to-svg
I always use it for my needs.
-
I really works like a charm even in comlex images. I really advice this tool. Jan 7, 2016 at 16:16
-
-
-
You cannot expect the script to take a photo of yourself and get a perfectly layered SVG out as a result, there is no such a thing. If you have a simple shape and you want to get the path(s), this does it. I made alot of font-icons with that page and never failed for me.– thednpApr 13, 2016 at 19:29
-
I just found this question and answers as I am trying to do the same thing! I did not want to use some of the other tools mentioned. (Don't want to give my email away, and don't want to pay). I found that Inkscape (v0.91) can do a pretty good job. This tutorial is quick to and easy to understand.
Its as simple as selecting your bitmap in Inkskape and Shift+Alt+B.
Depending on why you want to convert from .png to .svg, you may not have to go through the trouble. Converting from .png (raster) to .svg (vector) can be a pain if you are not very familiar with the tools available, or if you are not a graphic designer by trade.
If someone sends you a large, high resolution file (e.g. 1024x1024), you can resize that down to pretty much any size you want in GIMP. Often, you will have problems resizing an image if the resolution (number of pixels per inch) is too low. To rectify this in GIMP, you can:
File -> Open
: your .png fileImage -> Image Properties
: check the Resolution, and the color space. You want a resolution around 300 ppi. In most cases you want the color space to be RGB.Image -> Mode
: set to RGBImage -> Scale Image
: leave the size alone, set and Y resolution to 300 or greater. Hit Scale.Image -> Scale Image
: the resolution should now be 300 and you can now resize the image down to pretty much any size you want.
Not as easy as resizing a .svg file, but definitely easier and faster than trying to convert a .png to a .svg, if you already have a big, high-resolution image.
I'm assuming that you wish to write software to do this. To do it naively you would just find lines and set the vectors. To do it intelligently, you attempt to fit shapes onto the drawing (model fitting). Additionally, you should attempt to ascertain bitmaped regions (regions you can't model through shames or applying textures. I would not recommend going this route as that it will take quite a bit of time and require a bit of graphics and computer vision knowledge. However, the output will much and scale much better than your original output.
http://online-converting.com/image/convert-to-svg/ worked well for converting to svg
-
this removes any color from the image, same problem as with
potrace
on the command line - makes me wonder what the website uses internally...– sscJul 11, 2017 at 12:36
This tool is working very well right now.
-
17
-
This converted one of my colored pngs in which other online converters were not able to convert properly. I thought it was working since I can open it in browser but when I tried opening it on another tool, it has an error. Maybe because of the comment stated above.– vidaMay 16, 2016 at 0:41
If you're on some Linux system, imagemagick is perfect. I.e
convert somefile.png somefile.svg
This works with heaps of different formats.
For other media such as videos and audio use (ffmpeg) I know you clearly stated png to svg, however; It's still media related.
ffmpeg -i somefile.mp3 somefile.ogg
Just a tip for if you wish to go through lots of files; a loop using basic shell tricks..
for f in *.jpg; do convert $f ${f%jpg}png; done
That removes the jpg and adds png which tells convert what you want.
-
2
-
25This technically works, however, the generated svg file is not really vector graphics - it just contains the original bitmap "as is". Thus, when you enlarge it, you still get the degraded quality of a raster image. Oct 9, 2012 at 6:41
-
7@archeyDevil no, that's not "converting" to SVG, that's "embedding" the bitmap inside an empty SVG. No use to anyone.– AdamJan 30, 2013 at 11:13
-
4@archeyDevil Question title is "convert ... to SVG". Your answer doesn't convert. It embeds. PNG is a bitmap format, SVG is a vector format. Massive difference. Embedding is useless and not worthy of an SO question IMHO– AdamJan 31, 2013 at 15:08
-
3I am aware it doesn't convert. I did however; post this for those who don't need a vector persay, but just need a quick and dirty change between filetypes.– DarkFoxFeb 1, 2013 at 13:09