Increase Image Resolution: Convert Raster Images to Vector

Ads by Google

convert raster image to vectorMost of the digital images and pictures you see on the web are raster graphics images or bitmaps (.bmp). A raster graphics image is simply defined with a grid of pixels that are set to certain colors. Raster graphics images are resolution dependent and cannot be made larger without loss of apparent quality. Therefore, for images that need to be scaled to higher resolution often it is better to use vector graphics.

Images that are rendered using vector graphics will scale to any size and still maintain smooth edges. This is ideal for dealing with things such as fonts and logos. Inkscape is an open source vector graphics editor that you can use to convert raster images to vector graphic images.

I will demonstrate how to use Inkscape to convert the Inkscape logo above into an SVG (Scalable Vector Graphics) image. SVG is a vector graphics file format.

First of all you will need to download Inkscape and install it. It’s available for Mac OS X and Windows, and of course with the source you can compile it on Linux and other platforms as well.

convert raster to vector

Once you’ve installed Inkscape, launch it and open the raster image you want to convert. In this example, I’ve opened the inkscape-logo.png file. You can see from the screenshot that the edges are not smooth. Converting it to an SVG file will allow us to scale it to any size, and maintain the smooth edges.

Ads by Google

Select the entire image by navigating to Edit > Select All in the Inkscape menu or by pressing Ctrl-A on your keyboard. Then go to Path > Trace Bitmap – or press Shift-Alt-B on your keyboard. In the trace bitmap dialog, select Colors as the mode and be sure that Smooth is unchecked.

smooth image edges photoshop

Click the OK button and the conversion will take place but the dialog box will be on the screen. Close the dialog box by clicking the X in the upper right corner. Next you have to get rid of the original image, which is lying beneath the trace you just performed. To view the original, go to Object > Lower to Bottom or press the End key on your keyboard.

Now the original jagged looking image should be on top. Click on it to select it and then press the Delete key on your keyboard. Now you should see the nice and pretty vector image with smooth edges. Next, save the file by navigating to File > Save As”¦ Give the file a new name, and be sure that the file type in the bottom right is Inkscape SVG.  The image below was created from the SVG file I made.

convert image to svg (inskcape logo example)

When you do use your SVG images in web pages, you’ll want to convert them from SVG back to a raster image, just as I did in the image above. To do this, just go to File > Export Bitmap”¦ Not all browsers support SVG images, so you’re better off exporting SVGs to bitmaps. This way you will have your nice image and also be able to use it online.

Using SVGs makes a big difference when you scale the images to be much larger than the originals.  Wikimedia Commons actually has a better SVG image for the Inkscape logo than I made. The Wikimedia Foundation has made an effort to make most diagrams and logos available as SVG files, to allow them to be used at higher resolutions without degrading the original content.

Are you aware of any other free tools that can convert raster images to vector graphics?

Join live MakeUseOf Groups on Grouvi App Join live Groups on Grouvi
Windows Hacks & Customization
Windows Hacks & Customization
91 Members
Windows_10
Windows_10
79 Members
Windows Troubleshooting
Windows Troubleshooting
57 Members
Best Windows Software
Best Windows Software
54 Members
Mac Troubleshooting
Mac Troubleshooting
21 Members
Mac OS X & Software
Mac OS X & Software
15 Members
Mac Switchers
Mac Switchers
14 Members
Apple Hardware Discussion
Apple Hardware Discussion
14 Members
Mac Gamers
Mac Gamers
8 Members
Ads by Google
Comments (14)
  • Rollercoaster

    This was a nice tutorial! Sadly the procedure is not possible with complex images. For these you need good resampling methods. For those who use GIMP, make sure to check out the build in resampling methods and compare them. You can find them in the pop up menu that opens if you clicke “resize image”. There are 4.

    • Anna

      I noticed the problem as well when trying to follow this procedure with more complex images. I am a user of the GIMP though, and would like to know a bit more about this resampling method you were talking about, how exactly does it work?

  • Muhsin Hamdoon

    How I can (extract or save as) a svg image to (tif) format with high resolution?

    • Jorge Sierra

      Gimp will do it with relative ease. Just open it, select your resolution, and then save the image as a TIF.

  • Melinda

    Great tool. Thanks!!!

  • sal_er

    Hi Jorge, thanks for replying. Yes, I followed the steps you’d described above (tracing, lowering, deleting the original, saving).

    The strange thing is when I open the saved plain .svg file in text editor – it contains just paste.ideaslabs.com/show/MIoUxyGvqp (I uploaded here the content). Strange, isn’t it? I’m just curious what ‘ xlink:href=”image.gif” ‘ does do there inside (?!). Btw. this is a plain SVG, saving this image (or any other) as Inkscape SVG does the same, excepting the file size is a little bit greater, but there are still references to the original .gif file inside…

    The second odd thing is if I save the file as EPS – it is completely unreadable by any application, including Inkscape itself and CDR X3 (however, judging from the file size, there should be *sth* inside it – file is quite huge, several MB).

  • sal_er

    I got stuck. I cannot save the file to plain SVG format – every time I try I receive a white square with nothing inside (I’m using the latest Inkscape 0.4.6, 7zipped; I tried converting several images).
    The only thing which works is saving as a PDF file. But this doesn’t seem to be a bright idea to me as I’d like to edit the file later in CDR.

    Has anyone of you got the same problem as I did?

    • Jorge Sierra

      That’s very odd. Does everything work fine up until the point where you try to save the file? Are you able to generate the bitmap trace, lower it, and delete the original bitmap?

Load 10 more
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.
Affiliate Disclamer

This review may contain affiliate links, which pays us a small compensation if you do decide to make a purchase based on our recommendation. Our judgement is in no way biased, and our recommendations are always based on the merits of the items.

For more details, please read our disclosure.