Raster vs Vector

Introduction

A raster image stores a grid of sampled colors. A vector graphic describes geometry that the browser draws at the requested size. The practical difference is what survives a change: do you enlarge existing samples, or render the shape again?

This guide uses one controlled circle to separate scaling from tracing. It does not measure a converter's accuracy. Image to SVG covers the conversion workflow; When NOT to use SVG covers rejecting an unsuitable result.

The same geometry, two representations

The SVG below defines a circle by its center and radius. SVGKIT created this teaching asset directly, then rendered it to a 32 by 32 PNG using Chromium canvas. The PNG is not a screenshot of a photograph and the SVG is not a trace of the PNG.

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><circle cx="144" cy="144" r="85" fill="#e74c3c"/></svg>

32 x 32 PNG

Authored SVG

Raster dimensions

32 x 32

Vector circles

1

Open the 32-pixel PNG, authored SVG, and measurement record. The controlled export is 695 bytes and the SVG is 143 bytes in the recorded Chromium run. These sizes describe only these files, not a ranking of PNG and SVG encoders. The script and browser version are recorded for reproduction.

Reproduce the scaling difference

Put the two downloaded files next to an HTML page and render them with equal dimensions:

<img src="circle-raster-32.png" width="256" height="256" alt="Enlarged raster circle">
<img src="circle-authored.svg" width="256" height="256" alt="Vector circle">

First change both widths and heights to 32, then to 256. At 256 CSS pixels on a device-pixel-ratio-1 display, each raster sample spans eight display pixels per axis before interpolation. The browser can smooth that enlargement, but cannot recover a more precise source boundary. The SVG instead rasterizes its circle at the target resolution. Both ultimately become pixels on screen.

This deliberately small input makes the distinction visible. A suitably sized high-resolution PNG can look just as sharp at its intended size. Browser interpolation and device pixel ratio also affect appearance; “vector” does not mean that antialiasing or small-size alignment stops mattering.

Reproduce the editing difference

In the SVG, change only r="85" to r="64". The center stays at (144, 144) while the radius decreases. Change fill="#e74c3c" to fill="#167544" to recolor the whole circle.

The exported PNG has no radius or fill attribute. A bitmap editor can repaint pixels, but the original parameters are no longer explicit. Tracing that PNG may produce several paths around its antialiased boundary rather than recovering one editable circle.

Common mistakes

Assuming an SVG file contains only vector shapes

SVG can include a raster image through an image element. That embedded picture still has a fixed pixel resolution. Wrapping a PNG in SVG does not vectorize its contents. See the SVG image element.

Confusing a trace with editable source artwork

A trace stores geometry, but its paths may describe edge fragments rather than intended objects. Being able to edit coordinates is different from having meaningful circles, layers, text, or constraints.

Expecting vector text to stay searchable after tracing

Letter outlines are shapes, not text characters. For selectable text, retain actual text in the appropriate document or HTML structure instead of tracing a screenshot.

Best practices

• -Keep the editable source and the delivery export as separate assets.
• -Test the largest required display size, not only the fitted preview.
• -Inspect whether an SVG uses shapes, embedded images, or both.
• -Choose an editing workflow based on the objects you need to change later.

Practical workflow

1. 1
   Identify which dimensions or properties the asset must support.
2. 2
   Inspect the source: pixel samples, explicit geometry, or a mixture.
3. 3
   Render raster and vector candidates at equal sizes.
4. 4
   Try one real edit, such as changing radius or color.
5. 5
   Keep the representation that supports the required appearance and edits.

FAQ

Does vector graphics mean no pixels are involved?

No. The browser ultimately draws pixels on a screen. Vector geometry allows it to calculate those pixels for the requested resolution instead of only enlarging a fixed source grid.

Can a high-resolution PNG look as sharp as SVG?

Yes, at sizes for which it has enough source pixels. The example intentionally uses a 32-pixel export to make enlargement limits visible.

Does tracing recover the original circle radius?

Not reliably. It estimates geometry from samples. The authored example has a known radius because we defined it before creating the PNG.