PNG, SVG, or WebP: which asset format?

SVG for controllable vector icons

SVG is best for simple line icons, single-colour graphics, and marks that must scale with the interface. CSS can recolour it, it can work with motion, and it stays sharp at different resolutions. The source must be real vector paths—not a bitmap placed inside an SVG container.

PNG for fixed visuals and transparent detail

PNG works well for detailed transparent icons, illustrations, textures, and UI assets with fixed visual styling. Slice Master exports transparent PNG files because developers can reference them directly without a runtime dependency. For assets that do not need dynamic recolouring and have a relatively fixed size, PNG is a dependable handoff format.

WebP for content images and smaller files

WebP is commonly used for editorial images, covers, posters, or larger illustrations where transfer size matters. It is often lighter than PNG or JPG, but it does not replace SVG. Compare real output before choosing it for small icons with delicate transparent edges.

Why screenshots usually export as PNG

Extracting an element from a flattened UI screenshot means working with pixels. Even if an icon was originally an SVG, it is already rasterised in the screenshot. A clean transparent PNG preserves the visual result; if a project needs SVG, retrieve it from the original design file or icon library.

Two more things to hand off

1. Name and group files: for example, nav-home-active.png and nav-home-default.png make state relationships clear.
2. Declare display size: the file canvas and CSS display size can differ; documenting the intended rendered size avoids blur and unnecessary stretching.