What is SVG? XML Vectors, Scalability, and Why Browsers Love Code-Based Graphics
Discover how Scalable Vector Graphics (SVG) store geometric shapes using XML code instead of pixels, offering infinite scalability and crisp UI rendering.
Zero-Upload Client Architecture Research
Scalable Vector Graphics (SVG) is an XML-based vector graphics file format defined by the W3C. Instead of saving a grid of fixed color pixels, an SVG describes geometric primitives—such as lines, paths, Bézier curves, polygons, and text—using mathematical coordinates. This allows SVGs to scale infinitely to any resolution or screen density without pixelation, while remaining scriptable and stylable via CSS.
1. Vectors vs. Pixels: Coordinate Math Instead of Color Grids
Raster formats (like JPEG, PNG, and WebP) are spreadsheets of color. If an image is 1000×1000 pixels, it contains exactly one million data points. If you scale that image up on an Apple Studio 5K display, the browser stretches those pixels, causing blur.
An SVG file operates on coordinate geometry. To draw a red circle, an SVG does not store 10,000 red pixels; it simply declares:
<circle cx="50" cy="50" r="40" fill="red" />
Whether rendered on a 32-pixel Apple Watch screen or projected onto an outdoor billboard, the browser recalculates the mathematics on the fly, rendering razor-sharp edges every time.
2. Inside an SVG File: Paths, ViewBox, and XML Attributes
- viewBox: Defines the virtual coordinate canvas (e.g.,
viewBox="0 0 100 100"). It dictates aspect ratio and relative scaling. - <path d="...">: The most powerful element in SVG. The
dattribute contains commands likeM(moveto),L(lineto), andC(cubic Bézier curve) that trace complex custom shapes. - Stylability: Elements accept CSS classes, inline styles, and responsive media queries, allowing logos to adapt to dark mode automatically.
3. How Squeeze Vectorizes Raster Pixels with Marching Squares
Squeeze incorporates a client-side Marching Squares contouring algorithm running in a dedicated Web Worker to vectorize raster images:
- The raster image is analyzed pixel by pixel to determine luminance thresholds and alpha boundaries.
- Marching Squares evaluates 2×2 pixel cells, determining vector contour paths where edges transition.
- Path-simplification routines smooth out noisy jagged lines into elegant Bézier vector curves.
- The final geometry is bundled into a clean XML SVG document.
Convert and Vectorize Images Online
- Convert PNG to SVG to trace raster logos into scalable vector curves.
- Convert SVG to PNG to generate crisp raster assets.
- Convert JPG to SVG directly in your browser without uploading to external servers.
Authoritative References
Ready to convert or compress images with 100% privacy?
Experience zero server uploads. All WebP, PNG, JPG, SVG, and multi-resolution ICO conversions run entirely inside your browser using sandboxed Web Workers.