Pinterest Stumbleupon Whatsapp

Most of the digital images and pictures you see on the web are raster graphics images or bitmaps. 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, it is better to use vector graphics.

Images that are rendered using vector graphics 10 Amazing Sites to Find High-Quality Vector Art 10 Amazing Sites to Find High-Quality Vector Art Finding quality vector art for your designs can be time-consuming. That's why we've put together this list of 10 top vector libraries for you to find exactly what you need, every time. Read More 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 The Best Vector Software For Mac Designers On A Budget The Best Vector Software For Mac Designers On A Budget Adobe Illustrator might be the gold standard when it comes to vector software for the Mac, but you don't always have to spend a fortune on design software. Read More 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.

Once you’ve installed Inkscape, launch it and open the raster image you want to convert. 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 How to Resize Images Using iPhoto, Photos or Preview on Mac How to Resize Images Using iPhoto, Photos or Preview on Mac Your Mac can resize images for you using built-in software, free of charge! Read More , 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.

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?

Image Credit: Hwang Teamvia

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Linda
    October 27, 2016 at 7:44 am

    Thank you so much for the instructions - it worked a treat : )

  2. Rollercoaster
    December 22, 2009 at 7:39 pm

    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
      January 1, 2010 at 3:14 pm

      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?

  3. Muhsin Hamdoon
    August 13, 2009 at 2:03 pm

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

    • Jorge Sierra
      August 13, 2009 at 2:35 pm

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

  4. Melinda
    July 9, 2009 at 6:43 pm

    Great tool. Thanks!!!

  5. sal_er
    February 23, 2009 at 8:20 pm

    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 (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
      February 24, 2009 at 8:44 am

      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.

  6. sal_er
    February 23, 2009 at 1:00 pm

    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
      February 23, 2009 at 1:36 pm

      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?

  7. iOsiris
    February 22, 2009 at 10:52 am

    JPEG turns it raster though.

  8. Vadim P.
    February 22, 2009 at 10:28 am

    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.

  9. Cristian Eslava
    February 22, 2009 at 2:34 pm

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

    The desktop app is not free.

    Great blog!!!

  10. phaoloo
    February 22, 2009 at 9:20 am

    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
      February 22, 2009 at 12:56 pm

      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.