How to Convert a PNG to SVG in Inkscape

inkscape logo with svg and png icons

PNG files are raster images, which means it is made-up of small static elements called pixels, each pixel is filled with one color, so if you zoom in enough, you can reach a point where there are no details but single-colored pixels stacked together.

In contrast, vector elements are described by mathematical equations; therefore, results in infinite resolution, which means no matter how you zoom in, the file will not pixelate.

PNGs are often the final product of the design process, i.e., after you create your logo or illustration in a vector, exporting that design as a PNG is a common step.

So, returning that PNG to a vector format isn’t always easy, especially if your design is complicated, but there are two ways to do that in Inkscape:

  1. Trace Bitmap.
  2. Manual tracing.

Convert a PNG to SVG Using Trace Bitmap

It is a built-in tool in Inkscape that enables the user to trace a raster image into a vector one. It is easy to use, and you can achieve fabulous results if you tweaked the settings to what fits your needs.

Pros of Trace Bitmap

  • Its ease of use.
  • If mastered, it can save you a lot of time.
  • There are just enough options to give you the results you are looking for, without confusing the user with many options.

Cons of Trace Bitmap

  • It doesn’t always work, for example, it doesn’t work on complex designs, giving poor results in this case, also the quality of the input PNG may be the reason behind its failure sometimes.
  • The algorithm isn’t perfect, it generates paths with random nodes, so even in symmetrical shapes it doesn’t produce perfectly symmetrical paths. Also, you may find random nodes in the midst of straight lines which is totally nonsensical!
  • It produces infinitesimal paths, which are inconvenient when trying to edit you design in the future, these lead to increase the number of nodes, which can drop the performance by consuming many resources (A lot of math!!).

But if your design that you want to trace is a simple one, you will get a great outcome without the hassle of manually tracing you image.

You can overcome the obstacle of high number of nodes by simplifying the path, but you don’t need to do so unless you are a perfectionist, in that case it is better to perform the tracing manually.

The third problem can be tackled by removing these unwanted paths.

Steps to Perform a Trace Bitmap

  1. Import the image you want to trace, the easiest way is by dragging and dropping, then choose smooth in the Image Rendering Mode.
  2. Open the Trace Bitmap menu which can be found in Path>Trace Bitmap.
  3. If you image is simple, then just select auto trace.
  4. Click apply.
  5. Do some clean-up and recoloring; if needed.

Trace Bitmap Main Options

  1. Single scan vs Multiple scans: this is concerning the output, if you want a single path then choose the first option, if you want multiple paths grouped together then choose multiple scans.
  2. Tracing method: there are four options.
    1. Brightness cut-off: this uses the difference in brightness of the input image to make the paths, you can specify the threshold brightness which is basically the difference that Inkscape uses to decide to which path a region belongs.word image 110
    2. Edge detection: this method detects edges rather than silhouettes, so the output is just outlines, but you can color these paths later, the edge threshold is similar to the previous, but in this case, it means how much length should Inkscape consider as a step, but note the edges are paths filled with black not strokes.
      word image 111
    3. Color quantization (multiple steps): this uses the differences of color to define the steps; it is the best method if you have colorful designs.
      word image 112
    4. Autotrace: this method uses an algorithm to suggest the best settings; I used this method in the video.
    5. Centerline tracing: on contrast to the previous methods, this method traces the center of lines; therefore, it is best suited for line-art.
      word image 113

There are minor options you can explore yourself; because If I wrote about them the article will be unnecessarily lengthy.

Convert a PNG to SVG Using Manual Tracing

Manually tracing images works like carbon-copying; but in reverse.

You place your image in Inkscape, then you manually draw on top of the image (you can decrease the opacity of your image to see better), the most useful tool in manual tracing is the Bezier pen, so some knowledge about how the tool works is beneficial at this step.

Pros of Manual Tracing

  • You have a full control of the outcome.
  • You almost never run out of resources.
  • The final outcome is more manageable.

Cons of Manual Tracing

  • Can be tedious and time consuming.
  • There is learning curve, mastering manual tracing takes a lot of time and effort.

Tips for Manual Tracing

Actually, there are no steps to follow in this process, but here are some guidelines; these are about the options of Bezier pen which are located in the top left of your canvas:

  1. Create regular Bezier path is the default option: you create corners by clicking, and curves by clicking and dragging.
  2. Create spiro path lets you create paths of spiral edges with a minimum number of nodes; it is a handy option but trickier to use.
  3. If you’ll be tracing many curved lines but the spiro paths option doesn’t work for you, then the Create BSpline path option is what you need, but this option is easier to use if you create a relatively higher number of nodes.
  4. If your design has a lot of sharp corners; then use Create a sequence of straight lines option.

The other options are not relevant when using the Bezier pen to trace.

Conclusion

In this article we learned how to convert a PNG to an SVG, but these methods do work with other image files that are supported by Inkscape like JPG, also we learned a bit about the power of Bezier pen.

 

0 Shares:
Subscribe
Notify of
guest
Receive notifications when your comment receives a reply. (Optional)
Your username will link to your website. (Optional)

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
You May Also Like