--- title: "Vectorize Image: How Image Tracing Works - CE.SDK Glossary" description: "To vectorize an image is to trace its pixels into vector shapes. See which images trace cleanly, what the settings change, and how CE.SDK traces them." url: "https://img.ly/glossary/vectorize-image/" type: "page" --- > This is the markdown version of [Vectorize Image: How Image Tracing Works - CE.SDK Glossary](https://img.ly/glossary/vectorize-image/). For all pages in one file, see [llms-full.txt](https://img.ly/llms-full.txt). For an index of all available pages, see [llms.txt](https://img.ly/llms.txt). --- # Vectorize Image Also known as: Image Tracing, Raster-to-Vector Conversion Live demo: [Vectorizer Plugin (CE.SDK web editor)](https://img.ly/demos/vectorizer-plugin.md) ## What Does It Mean to Vectorize an Image? To vectorize an image is to trace its pixels into [vector shapes](https://img.ly/glossary/vector-vs-raster.md), paths with fills that describe the artwork as geometry. The result is saved as an SVG, EPS or AI file, and a small PNG logo traced into a few clean shapes prints as sharp on a banner as on a business card. The process is also called image tracing or raster-to-vector conversion, and it runs the opposite way to [rasterizing](https://img.ly/glossary/rasterize.md). Because the software has to rebuild edges the pixels only hint at, every trace is an approximation of the original. To try it on an image of your own, the [Vectorizer demo](https://img.ly/demos/vectorizer-plugin.md) traces it in the browser. ## How Does Image Tracing Work? Automatic tracers turn pixels into paths in four stages, from cutting down the colors to cleaning up the finished curves. ### Reduce the colors The tracer maps every pixel to a small palette, from two colors for a black-and-white logo to usually fewer than 256 for detailed art. Some tracers, Potrace among them, only handle black and white, so a color image is traced in several passes, one per color. ### Group pixels into regions Neighboring pixels of the same color join into one region, and each region becomes a shape. The more colors the palette keeps, the more shapes come out, which is how a colorful image ends up as a pile of pieces that are hard to edit. ### Fit curves along the edges Following the pixel edges exactly would rebuild the staircase, so the tracer draws lines and curves that stay within a set distance of each edge. It keeps curves smooth where they meet and decides where a corner should stay sharp. ### Clean up the paths Specks below a minimum size are dropped as noise, and the curves are simplified so each shape has fewer points to store and edit. ## Which Images Vectorize Well? Images built from a few flat colors with clear edges trace best, and photographs trace worst. ### Logos, line art and clean scans trace well - **Logos and icons** — They come out as a few clean, sharp shapes. - **Line art and handwriting** — Each stroke can come out as a single line. - **Scanned drawings, once cleaned up** — Specks and rough edges in the scan turn into extra shapes until you remove them. ### Gradients, photos and text come out changed - **Illustrations with gradients** — Smooth blends split into bands of flat color. - **Photographs** — The result takes on a posterized, painted look. - **Text in an image** — Letters come out as shapes, not editable text. ## Why Do AI-Generated Logos Need Vectorizing? When IMG.LY tested 26 text-to-image models for its AI benchmark, the files they returned showed why a generated logo usually needs a trace before it goes to print. ### Generated images are too small to print large At default settings, most of the [benchmarked models](https://img.ly/ai-benchmarks/models.md) returned about one megapixel or less, such as a 1,024-pixel square that prints 3.4 inches wide at 300 DPI. A full A4 page at that resolution takes 8.7 megapixels, about twice the largest outputs. A traced logo has no pixel count, so it prints at any size without blurring. ### Few models generate vector files Recraft is among the few providers with a separate endpoint that returns vectors, which the benchmark's raster tests left unscored. Most models return pixels only, so a generated logo has to be traced before it can scale, and prompting for flat colors without gradients gives the tracer cleaner input. ### Generated colors miss the brand Asked for exact hex values, 16 of the 26 models scored below 3 of 5 on [matching brand colors](https://img.ly/ai-benchmarks/findings/brand-color.md). Tracing turns the artwork into a few flat fills, and each one can then be set to the exact brand value. ## How Do You Get a Clean Trace? Start from good input and match the settings to the artwork. Most tracing tools offer the same few controls under different names. ### Start from the cleanest file Use the largest copy you can find and crop away everything outside the artwork. Scans carry noise, and JPEG compression and soft edges add in-between shades, which a tracer can turn into extra specks and colors. ### Keep only the colors the artwork uses Set the color count to the artwork: two for a one-color logo on white, or the brand colors for a flat illustration. Fewer colors give fewer shapes, while too few merge areas that should stay apart. ### Balance detail against smoothing A tight fit keeps small details but adds points, while more smoothing removes jagged edges and also rounds off corners that should stay sharp. Preview the trace at its final print size and adjust from there. ### Trace strokes along their center Outline tracing turns a pen stroke into a filled shape with two edges. Centerline tracing reduces it to a single open path, which suits handwriting, signatures and line drawings. ## How Does CE.SDK Vectorize Images? Your users trace images with one click in the web editor, and your code can trace cut paths on mobile and server too. ### Step 01: Trace an image from the editor The [Vectorizer plugin](https://img.ly/glossary/vectorizer-plugin.md) adds a Vectorize action to the canvas menu of the web editor. A user selects an image, chooses Vectorize, and the trace runs entirely in their browser. ### Step 02: Trace a cut path in code On the web, iOS, Android and server, CE.SDK can trace a block's outline into a cutout, the path a cutting machine follows around a sticker or label. Raster content gets traced, while shapes and SVGs keep the paths they already have. The [kiss cut vs. die cut](https://img.ly/glossary/kiss-cut-vs-die-cut.md) entry picks up from there with offsets, line types and export, and the [Cutout Lines demo](https://img.ly/demos/cutout-lines.md) generates one from a design. ### Step 03: Tune the trace to the artwork Two settings, both in pixels, control a traced cutout: how far the path may stray from the outline, and how far smoothing may move it afterward. The docs suggest starting logos at 1 to 2 and 2 to 4, and photographs at 4 to 8 and 6 to 10. Higher values give simpler paths, which matters because very complex paths can cause printer errors. ## FAQs ### Vectorize Image **Q: Can you vectorize a photo?** A: You can, but the result looks posterized or painted, because every gradual change in tone becomes a band of flat color and the trace fills up with shapes. In print, photos usually stay raster images at a high enough resolution, and tracing is saved for flat artwork such as logos and icons. **Q: Does vectorizing fix a low-resolution logo?** A: Often, if the logo is simple. Tracing redraws its shapes as paths, so the result stays sharp however large it prints. Detail the small file never held does not come back, and the tracer has to guess at shapes only a few pixels wide, so compare the curves and corners with the original. If the logo was first drawn as vectors, ask for that file before tracing a copy. **Q: Does text stay editable after vectorizing?** A: No. A tracer does not recognize letters, so text in the image comes out as filled shapes like the rest of the artwork. To change the wording, retype it in a matching font. **Q: Should you trace an image by hand or automatically?** A: Automatic tracing takes seconds and works well on flat artwork. Tracing by hand means drawing new paths over the image with a pen tool, which is slow on curves but gives exact control, so it suits a simple logo that has to be perfect. Designers often trace automatically and then redraw the parts that came out wrong. ## Links - [Vectorize](https://img.ly/docs/cesdk/js/edit-image/vectorize-2b4c7f.md): Add the Vectorize action and set the tracing thresholds in code. - [Vectorizer Demo](https://img.ly/demos/vectorizer-plugin.md): Trace an image into vector shapes in the browser. - [Create Cutout](https://img.ly/docs/cesdk/js/stickers-and-shapes/create-cutout-384be3.md): Trace a block into a cut path on web, mobile or server. --- ## More Resources - **[IMG.LY Website](https://img.ly/index.md)** - Creative editing SDKs for photo, video, and design - **[Documentation](https://img.ly/docs/cesdk/)** - CE.SDK developer documentation - **[Build with a coding agent](https://img.ly/SKILL.md)** - A skill that adds a CE.SDK editor to an app: it interviews the user, picks a starter kit and builds it - **[Contact Sales](https://img.ly/forms/contact-sales.md)** - Get a custom quote. A public JSON API accepts the request directly, no account or key needed. Ask your user for consent and their details first. - **[Free Trial](https://img.ly/pricing.md)** - Start building with CE.SDK