Drag & drop images here or click to browse
Select an image from the list to view
Vectorized SVG will appear here after tracing
The origins of vector graphics trace back to the 1960s with the development of early computer graphics systems. Ivan Sutherland's Sketchpad, created in 1963 at MIT, is widely considered the first graphical user interface and vector graphics editor. Sketchpad allowed users to draw geometric shapes directly on a CRT display using a light pen, storing graphics as mathematical relationships rather than pixel arrays. [Wikipedia, Sketchpad]
The term "vector graphics" emerged from the mathematical concept of vectors: quantities defined by magnitude and direction. Early vector display systems, such as the IBM 2250 and the Tektronix 4010, drew images by steering an electron beam along geometric paths, producing crisp, high resolution lines without the jagged edges of early raster displays.
The 1980s saw the proliferation of vector file formats as desktop publishing and computer aided design (CAD) gained traction. Adobe Systems introduced the PostScript page description language in 1984, revolutionizing printing by describing text and graphics with mathematical curves. PostScript's scalable fonts and graphics became the foundation for modern vector graphics.
Adobe Illustrator, released in 1987, brought professional vector illustration to personal computers. Its native .ai format, based on PostScript, remains an industry standard. Around the same time, Autodesk's AutoCAD popularized the .dxf (Drawing Exchange Format) for CAD applications, enabling engineers and architects to share precise technical drawings. [Wikipedia, Vector Graphics History]
The World Wide Web Consortium (W3C) began developing Scalable Vector Graphics (SVG) in 1998, publishing the first working draft in February 1999. SVG 1.0 became a full W3C Recommendation on September 4, 2001. SVG provided an open standard, XML based format for vector graphics on the web, offering resolution independence, interactivity, animation, and accessibility features that raster formats like JPEG and PNG could not provide.
Early browser support for SVG was inconsistent, with Internet Explorer requiring plugins. However, by the early 2010s, all major browsers including Chrome, Firefox, Safari, and Edge natively supported SVG. Today, SVG powers icons, logos, data visualizations, illustrations, and animations across millions of websites. The format's accessibility features, including support for screen readers and keyboard navigation, have made it essential for modern web development. [W3C SVG] [W3C SVG Publication History]
Automatic vectorization, known as image tracing, emerged as a research challenge in computer vision and graphics. Early methods relied on edge detection algorithms like Canny and Sobel to find boundaries, then fitted vector primitives such as lines and Bézier curves to those edges. These approaches worked well for line art and logos but struggled with photographs and complex natural images.
In 2001, Peter Selinger released Potrace, an open source tool that transformed bitmap images into smooth, scalable outlines. Potrace uses a polygon based tracing algorithm that first generates a polygonal approximation of the image's foreground regions, then converts those polygons to optimal Bézier curves. Selinger published a detailed description of the algorithm in 2003. Potrace became the engine behind many vectorization tools, including Inkscape's trace bitmap feature. [Potrace Official] [Potrace Algorithm Paper]
ImageTracer.js, developed in 2015 by András Jankovics, brought high quality vectorization to the browser. Implemented in pure JavaScript, ImageTracer analyzes pixel data to identify regions of similar color, traces their boundaries, and generates optimized SVG paths. Unlike server side solutions, ImageTracer processes images entirely on the client side, preserving user privacy and reducing server costs.
The tool offers multiple tracing presets that control color quantization, path simplification, corner detection, and curve smoothing. Modern vectorization combines color quantization (reducing millions of colors to a manageable palette), edge detection (finding boundaries between color regions), and curve fitting (converting pixel edges to smooth Bézier paths). This three step process enables the conversion of photographs, paintings, logos, and sketches into infinitely scalable vector graphics. [ImageTracer GitHub]
Raster images (JPG, PNG, GIF, WebP) store graphics as a grid of colored pixels. Each pixel contains color information for a specific position. When you zoom into a raster image, you eventually see individual square pixels, resulting in blurring or pixelation. Vector images store graphics as mathematical formulas describing points, lines, curves, and shapes. No matter how much you zoom, vectors remain crisp because the computer recalculates the curves at any scale. [Wikipedia, Raster Graphics]
The first step in vectorization reduces the millions of colors in a typical image to a much smaller palette. A photograph might contain 16 million colors, but vectorizing all those colors would produce an enormous, impractical file. Color quantization groups similar colors together, replacing them with representative colors.
Different presets use different quantization strategies. "Posterized" presets use aggressive quantization to 2, 3, or 4 colors for bold graphic effects. The "detailed" preset preserves up to 64 colors for high fidelity tracing. "Grayscale" converts all colors to shades of gray by calculating luminance. The quality of quantization dramatically affects the final vector output, balancing file size against visual accuracy.
After quantization, the image has distinct color regions. The vectorization algorithm scans the image pixel by pixel, identifying where colors change. These boundaries become potential edges for vector paths. Sophisticated algorithms perform connected component analysis, finding contiguous regions of the same color and marking their perimeters.
The edge detection step must handle antialiasing (soft edges created by smoothing) and noise (random color variations). The "smoothed" preset applies a blur filter before edge detection, reducing noise and producing simpler, more organic shapes. The "sharp" preset uses aggressive corner detection, preserving fine details for technical illustrations and logos. [Wikipedia, Edge Detection]
Once edges are identified, the algorithm traces each boundary to create a sequence of points. This sequence starts as a polyline: a series of straight line segments approximating the edge. However, pure polylines produce jagged, unprofessional vectors with many points. Vectorization must convert these polylines into smooth Bézier curves.
The tracing algorithm analyzes each polyline, identifying corners (where the path direction changes sharply) and smooth curves (where direction changes gradually). It fits cubic Bézier curves to the smooth sections while preserving corners as sharp points. The "curvy" preset optimizes for smooth curves, while "sharp" preserves more corners. The number of resulting paths becomes the SVG path count displayed in the information panel.
Bézier curves are parametric curves used extensively in vector graphics. A quadratic Bézier curve uses three control points: start, end, and a single off curve handle that pulls the curve. A cubic Bézier curve uses four points: start, end, and two handles that independently control the curve's shape. SVG uses cubic Bézier curves (the 'C' and 'c' commands) for maximum flexibility.
The mathematical formula for a cubic Bézier curve is B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃, where t ranges from 0 to 1. P₀ is the start point, P₃ is the end point, and P₁ and P₂ are control handles. This elegant mathematical representation allows infinite scalability with minimal data. [Wikipedia, Bézier Curve]
After path tracing, the vector data often contains more points than necessary. Optimization algorithms simplify paths while preserving visual accuracy. The Douglas Peucker algorithm, also known as Ramer Douglas Peucker, reduces the number of points in a polyline by removing points that lie within a specified tolerance from the simplified line.
Each preset applies different optimization settings. The "default" preset balances file size and accuracy. The "artistic" presets use higher error thresholds for simplified, stylized outputs. The "detailed" preset uses very tight tolerances, preserving fine details at the cost of larger SVG files. Optimization makes vector files practical for web use, reducing download times and improving rendering performance. [Wikipedia, Douglas Peucker]
Potrace, written by Peter Selinger, remains one of the most influential vectorization algorithms. It begins by converting the input image to a binary bitmap, where pixels are either black (foreground) or white (background). Potrace then traces the contours of black regions, producing polygons that approximate the region boundaries. Finally, it converts these polygons into smooth Bézier curves using an algorithm that minimizes curvature while maintaining good fit.
Potrace excels at tracing black and white images, line art, and logos. Its main limitation is its binary nature: it cannot directly handle grayscale or color images without preprocessing. However, many applications, including the "Grayscale" preset in this tool, convert color images to multiple binary layers through thresholding or color quantization. Potrace's output is clean, well optimized, and widely supported. [Potrace Algorithm]
Marching squares is a computer graphics algorithm that extracts polygonal contours from a two dimensional scalar field. For vectorization, the scalar field is the image's color values. Marching squares scans the image pixel by pixel, examining 2×2 pixel squares. For each square, the algorithm determines which of the 16 possible topological cases applies, based on whether each corner exceeds a threshold value.
This algorithm produces a set of line segments that approximate the boundary between regions. While marching squares is fast and reliable, it produces only polylines, not curves. Additional post processing, such as Bézier curve fitting, is required to produce smooth SVG paths. ImageTracer uses a variant of marching squares for its initial edge detection phase. [Wikipedia, Marching Squares]
The median cut algorithm, developed by Paul Heckbert in 1982, reduces an image's color palette while preserving visual quality. The algorithm works by repeatedly dividing the color space (typically RGB) into smaller boxes, each containing approximately the same number of pixels. At each division, the algorithm finds the axis (R, G, or B) with the largest range and splits the box at the median value along that axis.
After the desired number of boxes (colors) is achieved, the algorithm computes the average color of all pixels in each box. This averaged color becomes a palette entry. All pixels in the box are then mapped to that palette color. Median cut produces perceptually accurate color reduction, essential for vectorizing photographs and complex images where color accuracy matters. The "detailed" preset uses minimal color reduction to preserve subtle gradients. [Wikipedia, Median Cut]
K-means clustering offers an alternative to median cut for color quantization. The algorithm begins by randomly selecting K colors as initial centroids (where K is the desired palette size). It then iteratively assigns each pixel to the nearest centroid, recalculates centroids as the average of assigned pixels, and repeats until convergence.
K-means often produces better color separation than median cut because it minimizes within cluster variance. However, it is computationally more expensive and may converge to local optima depending on initial centroid placement. Modern implementations use k-means++ initialization to improve results. The "randomsampling" presets demonstrate k-means style quantization with random starting points, producing distinctive artistic effects. [Wikipedia, K-Means Clustering]
After edge detection produces polylines, the algorithm must fit smooth Bézier curves to the sequence of points. Least squares curve fitting finds the Bézier control points that minimize the sum of squared distances between the curve and the original polyline points. The algorithm typically uses a parametric approach, estimating parameter values (the t values) for each point before solving for control points.
For cubic Bézier curves, the fitting problem involves solving for 6 unknowns (two control points with x and y coordinates each). The algorithm segments long polylines into smaller pieces at corner points, fitting separate curves to each piece. The "curvy" preset applies stronger smoothing, fitting longer curves with fewer segments. The "sharp" preset preserves more corners, resulting in shorter curves that better follow original details. [Wikipedia, Least Squares]
ImageTracer.js combines these algorithms in a sophisticated pipeline. It first quantizes colors using a modified median cut implementation. For each color layer, it extracts boundaries using a marching squares variant. It traces each boundary to produce an ordered point sequence, then simplifies the sequence using a modified Douglas Peucker algorithm. Finally, it fits cubic Bézier curves to the simplified polylines using least squares optimization.
The algorithm also includes corner detection, identifying points where the direction changes significantly and treating them as curve segment boundaries. Each preset modifies parameters throughout the pipeline: color count controls quantization depth, blur radius affects edge detection sensitivity, path omission removes very small paths, and curve optimization settings control simplification tolerance. These adjustable parameters enable the wide range of artistic and technical outputs available in this tool. [ImageTracer Source Code]