Increase Image Resolution: Convert Raster Images to Vector

inkscapelogo   Increase Image Resolution: Convert Raster Images 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.

inkscapescreenshot   Increase Image Resolution: Convert Raster Images 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.

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.

tracebitmapdialog   Increase Image Resolution: Convert Raster Images to Vector

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.

scaledinkscapelogo   Increase Image Resolution: Convert Raster Images to Vector

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?

The comments were closed because the article is more than 180 days old.

If you have any questions related to what's mentioned in the article or need help with any computer issue, ask it on MakeUseOf Answers—We and our community will be more than happy to help.

14 Comments -

phaoloo

It is really great, but there’s a disadvantage of SVG is that it is not popular. JPEG is still the most used graphic format until now.

Jorge Sierra

Popularity isn’t so much an issue, as one could say that PNG is not a “popular format” either. However, I use it quite extensively because all the major browsers have been supporting it for some time. The real problem is that older browsers lack SVG support, not that SVG is unpopular. In time, SVG will become more widely supported as PNGs have become.

Cristian Eslava

Raster vs. vector is like saying photography vs. drawings.

JPEG is and it will be the best format for photos, but PNG is now and sooner SVG will be the best format for drawing (logos, icons, etc.)

There is a great online application to trace images (covert to vectors):

vectormagic.com/home

The desktop app is not free.

Great blog!!!
ceslava.com

Vadim P.

It’s available on Linux OS’s too. You don’t have to compile it.

SVG has the advantage is that it’s essentially a text file – so you can compress it too just fine.

iOsiris

JPEG turns it raster though.

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?

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).

Jorge Sierra

You may want to try posting the issue to the Inkscape forums on Launchpad. They should be able to help you better than I can.

Melinda

Great tool. Thanks!!!

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.

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?