SVG to Image Converter

SVG scales forever, but half the web refuses to accept it: upload forms, marketplaces, chat apps, office documents, and social platforms all want pixels. This converter rasterizes your SVG into PNG, JPG, or WebP — with AVIF appearing as an option when your browser can encode it — at whatever resolution the destination needs.

Resolution is the decisive setting when leaving vector land, so it gets first-class controls: export at 1×, 2×, 3×, or 4× the SVG's natural size, or enter custom width and height with an aspect-ratio lock. A 2× or 3× export is the standard move for high-DPI screens — the file is raster, but at sufficient resolution nobody can tell. Transparency is handled per format: PNG and WebP can keep it (a toggle), while JPG has no alpha channel, so you choose the background colour that replaces it.

The tool reads the SVG's dimensions from its width/height attributes or viewBox, warns when neither exists, and enforces sane output limits (up to 8,000 pixels per side and 64 megapixels) so a typo cannot lock up the browser. Conversion happens entirely on your device. Two boundary notes: ICO output is deliberately not here — favicons need multi-size packaging, which the Favicon Generator does properly — and if the SVG itself should be cleaned before export, the SVG Optimizer is the upstream step.

The SVG file is read as text and parsed to determine its natural size — from explicit width and height attributes first, falling back to the viewBox; if neither exists, conversion stops with an instruction to add one. Your scale or custom dimensions produce the output size, which is validated against the 8,000-pixel and 64-megapixel caps.

Rendering loads the SVG into an image and draws it onto a canvas at the target size — the browser's vector rasterizer does the scaling, which is why a 4× export is genuinely sharp rather than an upscaled blur. For JPG (or when transparency is toggled off), the canvas is filled with your background colour first; for PNG and WebP with transparency on, the alpha channel passes through. The canvas encodes to your chosen format at the set quality, and format support (notably AVIF) is feature-detected beforehand so unsupported options never appear.

Input is one SVG at a time, capped at 5 MB, and the file must declare its dimensions (width/height or viewBox). Rendering uses the browser's SVG engine, so features it does not rasterize — external references, some filters, animations (which render as their static state) — will not survive into the raster. Output is capped at 8,000 pixels per side and 64 megapixels. ICO is intentionally excluded (the Favicon Generator owns that job), and AVIF availability depends on the browser. As with any rasterization, the output no longer scales — keep the SVG as the editable master.

The file is read via FileReader and parsed with DOMParser; natural size resolves from width/height attributes, falling back to viewBox, else a descriptive error. Output dimensions are scale-multiplied or taken from the custom fields (aspect-locked by default) and validated against MAX_DIMENSION 8000 and 64 MP. Rendering draws the SVG into a canvas at target size — background-filled unless transparency is on — and encodes via canvas.toBlob at the chosen quality. AVIF (and general format) support is probed with a tiny test encode before being offered. The 5 MB input cap and all processing are client-side.

Output formats at a glance

Designers and developers who keep assets as SVG but constantly meet destinations that demand pixels — upload forms, docs, marketplaces, chat — and anyone producing high-DPI raster variants of vector artwork. For favicon output specifically, the Favicon Generator is the purpose-built path; for pre-export cleanup, the SVG Optimizer.