Rasterize
/ˈræstəraɪz/ · verb · graphics
To rasterize means to turn a vector image, like an SVG, into a fixed grid of pixels, like a PNG.
In more detail
Rasterizing turns a vector image, which has no fixed resolution, into pixels at a size you choose. The result looks sharp only at that size or smaller.
It only goes one way. Once rasterized, the sharp vector version that scales to any size is gone. Keep the original SVG.
What rasterizing does
Vector art describes shapes, curves, fills, strokes and text with math. A rasterizer works through those instructions for a set width, height and pixel density. Then it picks the color and transparency of each pixel in the output.
Anti-aliasing blends pixels along slanted and curved edges so they look smooth. Text rendering, color profiles, unsupported SVG effects and the background color can all change the result. That is why two tools can make slightly different PNGs from the same SVG.
What size to rasterize at
Rasterize at the largest size you expect to need. A 400 pixel PNG looks clean shown at 200 pixels. Stretching it to 800 pixels forces the software to fill in pixels, and the edges get soft. High-density screens often need a 2x image, twice the CSS width and height.
Use PNG when you need transparency or sharp interface graphics. Use JPG when the artwork looks like a photo and needs no transparency. Keep the SVG or other vector original so you can export a new size later instead of tracing blurry pixels.
Key points
- Rasterizing turns vector instructions into a fixed grid of pixels.
- Size, pixel density, background and the renderer all affect the result.
- Keep the vector source and export a raster copy at the size each use needs.