Rasterize
/ˈræstəraɪz/ · verb · graphics
Turning vector graphics (like SVG) into a fixed grid of pixels (like PNG).
In more detail
Rasterizing converts a resolution-independent vector image into pixels at a chosen resolution. The output is sharp only at or below that size.
It’s a one-way step: once rasterized, the crisp, infinitely-scalable vector version is gone, so keep the original SVG.
What happens during rasterization
Vector artwork describes shapes, curves, fills, strokes, and text mathematically. A rasterizer evaluates those instructions for a chosen canvas width, height, and pixel density, then decides the colour and transparency of every output pixel.
Anti-aliasing blends pixels along diagonal and curved edges so they appear smooth. Text rendering, colour profiles, unsupported SVG effects, and the selected background can all change the result, which is why two rasterizers may produce slightly different PNGs from the same vector file.
Choosing an output size
Rasterize at the largest dimensions you reasonably expect to use. A 400-pixel PNG can be displayed cleanly at 200 pixels, but enlarging it to 800 pixels requires interpolation and will soften edges. High-density displays often need a 2x asset: twice the CSS width and height.
Use PNG when transparency or crisp interface graphics matter, and JPG when the artwork is photographic and does not need transparency. Preserve the SVG or other vector original so you can export a new size later without tracing softened pixels.
Key points
- Rasterization turns mathematical vector instructions into a fixed pixel grid.
- Resolution, pixel density, background, and renderer affect the exported result.
- Keep the vector source and export raster copies at the size each destination needs.