How to vectorize a logo.

Vectorizing a logo means tracing its pixels back into shapes: reading the image, grouping neighbouring pixels of similar color into regions, and fitting outlines around those regions. The result is a set of SVG <path> elements that stay sharp at any size. For flat brand marks — the overwhelming majority — an automatic trace at a low color count gets you most of the way there in one pass.

Start with the largest copy you can find

Tracing cannot invent detail. Every curve in the output is fitted to a boundary that exists in the source pixels, so the number of pixels along each edge sets the ceiling on how smooth that curve can be. Before you convert anything, spend five minutes looking for a better original.

• Check the brand folder and the press kit — a vector original may already exist as EPS, AI, or PDF, in which case you do not need to trace at all.
• Look at the site favicon and the app icon — often the cleanest small copies, and the ICO container may hold a larger frame than the one you see.
• Prefer a lossless export — a PNG at 1000 pixels wide beats a JPG at the same size, because it carries no compression artifacts along the edges.

Do not upscale a small logo before tracing. Enlarging adds pixels but no new information, and the interpolated soft edges it creates actually trace worse than the crisp original.

Clean the source before you trace

Two minutes in any image editor usually beats an hour of fiddling with settings afterwards. Crop tightly to the mark so there is no stray whitespace or page background to trace. If the logo sits on a photograph or a textured background, isolate it first — tracing has no idea which regions you consider foreground, and a busy background produces hundreds of paths you will only delete later.

Be aware that transparency is flattened during tracing here, so an alpha channel in your PNG will not survive as transparency in the SVG. Prepare the artwork against the background you actually want. If the logo needs to sit on white, put it on white first.

Choose settings that suit flat artwork

A logo is close to the ideal input for tracing: flat areas, hard edges, few colors. The settings should reflect that rather than reaching for maximum detail.

1. Count the colors the design actually uses. Most brand marks are 2 to 6. Add one for the background and start there.
2. Use Simple or Standard mode. High density preserves source detail you do not want in a flat mark — it will faithfully reproduce antialiasing and JPEG noise as extra regions.
3. Raise the count only for a reason.A gradient, a soft drop shadow, or a duotone photograph inside the mark are reasons. “It might look better” is not.

If the source is a JPG, a low color count does double duty: it merges the blocky 8×8 compression artifacts JPEG leaves around high-contrast edges into flat, even tones. That is usually the difference between a wobbly outline and a clean one. There is more on choosing the number in the color count guide.

Check the result properly

Open the SVG and zoom to 400%. A thumbnail hides everything that matters. What you are looking for:

• Edges — smooth curves rather than stair-steps or ripples. Ripples along a straight edge mean compression noise in the source.
• Corners — sharp where the design is sharp. Rounded corners on a square mark usually mean the source was too small.
• Stray specks — isolated dots of color, most often from noise or from a color count set higher than the artwork needs.
• Colors — tracing derives its palette from the pixels, not from your brand guide. Expect to correct the exact hex values by hand.

Finish it in a vector editor

A trace is a starting point, not a deliverable. In Illustrator, Inkscape, Figma, or any editor that reads SVG, the last pass is quick:

• Replace traced colors with the exact brand values.
• Delete the background rectangle if the mark should sit on anything else.
• Straighten edges that should be perfectly straight and re-circle shapes that should be perfectly round.
• Remove stray specks and merge fragments that belong to one shape.

One thing no trace can give you back: lettering. Text is traced into outlines like everything else, so it is editable as paths but no longer as type. If the wordmark matters, set it again in the real typeface and keep only the symbol from the trace.

When tracing is the wrong tool

Tracing rewards flat artwork with clear edges. It struggles with photographic logos, heavy gradients, fine textures, and marks that were only ever saved at 100 pixels wide. If your source is in that category, a trace will produce a technically valid SVG that no one wants to use — redrawing the mark from scratch is faster and the result is better. The honest test is whether you can see the shapes clearly at 100% zoom. If you cannot, neither can the tracer.

Where to convert

The converters that put this guide into practice:

• Logo to SVG converter — The converter this guide describes, set up for brand marks: any source format, and the low color counts flat logos want.
• JPG to SVG converter — Trace a logo that arrived as a JPG email attachment, with the color count set low enough to flatten compression noise.
• PNG to SVG converter — Start from a lossless PNG export when you have one — no compression artifacts to work around.
• Image to SVG converter — Convert a brand asset folder where every logo was saved in a different format, without sorting it first.

Where can I read more?

The output is standard SVG markup, defined by the following public specifications and references:

• W3C — Scalable Vector Graphics (SVG) 2 specification
• MDN Web Docs — SVG reference
• MDN Web Docs — Image file type and format guide
• Can I use — browser support for SVG

Written and maintained by the JPGtoSVG team. Last updated August 5, 2026.