Png to svg

Method 1: Auto-Tracing

The first way you can trace your PNG file is by using the Trace Bitmap function in Inkscape. The Trace Bitmap extension scans your image and uses it as a reference to automatically generate a vector rendering of it.

To use the Trace Bitmap function, simply select the object you’d like to trace, then go to Path > Trace Bitmap. This will bring up the interface menu depicted above (check out my Inkscape dark theme tutorial if you’d like a dark interface like mine.)

Assuming you’d like to create a complete retrace of the image and not just a monotone silhouette, choose Color from the Multiple Scans menu. After that it’s time to set the Scans. Scans are basically the number of colors that will be used in the tracing. If you’re working with a really simple PNG that only uses 2 or 3 colors, set the Scans to 2 or 3. If it has more, use more.

It may be worth it to experiment with different numbers of scans to see what works out best. You can click the Update button to generate a preview in the preview window before finalizing your selection.

The Trace Bitmap function handles simple graphics quite well

After you’ve finalized your tracing and clicked OK to generate it, make sure to Ungroup it (CTRL + SHIFT + G) several times to unlock all of the individual elements of the design.

Potential Problems With Auto-Tracing

This method is far from perfect. As can be expected, there’s no way for the software to understand all of the nuances of a raster image and render them with flawless precision. If the PNG you’re looking to trace is a very simple graphic at a high resolution and only uses a handful of colors, this method may be a viable option for you.

However, if you’re using a more complex, detailed image (or a really small image) it’s likely not going to give you acceptable results.

Click to enlarge

As you can see, the Trace Bitmap function produces results that are quite rudimentary when applying it to a more detailed image. The gradient background of the original image resulted in lots of color banding in the tracing, and the finer details — like the lettering and shading of the character — were completely lost in translation. The same will also happen if you use an image that’s too small…

Click to enlarge

There’s simply not enough information for the software to process when working with such a small image, which results in a blurry image with lots of color banding.

If after experimenting with the extension you are unable to produce the result you want, it may be time to consider other options.

Why It’s Easier Said Than Done

File formats ending in .png are raster graphics, meaning they’re made entirely of individual colored boxes known as pixels. Graphics made of pixels are static and set at a specific size. The more you zoom in on them or try to enlarge them, the more visible the individual pixels become.

Example of a raster graphic

Vector graphics (unlike raster graphics) are not made of pixels; they’re made of mathematical formulas that dictate all of the properties of a graphic on an X and Y axis. Since these formulas are far more dynamic than a series of static boxes, vector formats (like SVG) offer many more benefits, like being fully editable with vector graphics software, and having the ability to enlarge them infinitely without quality loss.

Example of a vector graphic

I assume that the reason you’re trying to use Inkscape to convert PNG to SVG format is because you’d like to take advantage of these benefits. Unfortunately, it simply isn’t possible. As I mentioned earlier, SVG files are what’s used to generate PNG files. The SVG is used as a reference to generate a series of static pixels that form the PNG file, and once that file is generated, the rest of the information from the SVG file (the mathematical formulas) is absent from it. The PNG format in and of itself is not capable of retaining such information.

Because of this, there’s simply no way to take an already rasterized, flattened image and transform it into a series of dynamic mathematical formulas.

Конвертировать другие форматы в формат SVG

Method 2: Manual Tracing

As the title suggests, this is a method in which you manually trace over your image using various different shapes and the Bezier Pen. This may seem daunting upon first impression — especially if you’re new to the software — but it’s not something a first-time user couldn’t get the hang of within a relatively short period of time.

Why This Is My Preferred Method

As a professional designer I prefer the manual method because it simply produces the most professional results.

A manually-traced SVG will always be the best option

When you’re manually tracing an image, you’re in the driver’s seat — you are in complete control of the outcome. You get to dictate boundaries, lines, curves, shapes, colors, and every other aspect. The human element allows you to determine how to best handle those nuances that simply cannot be interpreted by automated software.

The auto-tracing method may get the job done, but if you want it done right and you want your tracing to have a professional appeal, I recommend tracing it manually.

Video Tutorial

Explaining this method through written text would take far longer than you’d care to read, so I put together a step-by-step video tutorial with voice narration that should set you off on the right path and have you manually tracing your PNG images in no time.

Potential Problems With Manual Tracing

As you would assume, one of the downsides to manual tracing is that it does include — albeit to a small degree — somewhat of a learning curve. You’re probably not going to knock it out of the park on your first try. It’ll take a bit of practice.

Another downside is that it can be quite time-consuming, depending on the image.

Want Me To Design Your Logo? I’m Nick, and I design logos. I can help you enhance your image and make an impactful impression with some next-level branding. Check out my portfolio to see how I’ve helped others and learn more about how I can do the same for you.

С этим читают

• Векторный редактор онлайн: 8 лучших бесплатных браузерных альтернатив adobe illustrator
• Python write file/ read file
• Image resizing made easy with php
• Что такое base64 и зачем он нужен в веб разработке?
• Как сделать SVG адаптивным с помощью CSS
• Как вставить svg картинку на свой сайт
• C++ files and streams
• Api reference
• Svg
• Class yii\grid\actioncolumn