SVG to PNG: Canvas Rasterization, DPI, and Transparency
Understand how SVG markup becomes PNG pixels using the Canvas 2D API, device pixel ratio scaling, alpha compositing, and export quality trade-offs.
Parsing SVG for draw calls
Browsers render SVG through a combination of DOM-like structure and CSS. For raster export, SVG Buddy loads the file as text or blob URL, instantiates an image element or inline SVG, and draws it to an offscreen canvas.
The intrinsic width and height from the SVG root (or viewBox) define the logical coordinate system. Canvas width and height multiply those dimensions by the export scale factor.
Scale factors and retina exports
A 1x export maps one SVG user unit to one canvas pixel. Setting scale to 2x or 4x increases pixel density without editing the source SVG—useful for App Store screenshots, @2x/@3x icon slots, and slide decks.
Sub-pixel strokes can blur at 1x because anti-aliasing spans fractional pixels. If edges look soft, increase scale or round stroke widths to whole numbers in the source file.
Transparency and backgrounds
PNG supports alpha. Clearing the canvas to transparent before drawImage preserves soft shadows and rounded icons. Opaque fills (white or dark) are required when downstream systems ignore alpha—some PDF pipelines and legacy CMS thumbnails, for example.
SVG elements with partial opacity composited in groups may differ slightly between browsers; always spot-check critical brand assets after export.
Encoding PNG from canvas
canvas.toBlob with image/png produces a lossless bitmap. Quality sliders apply to JPEG/WebP exports where supported; PNG size is driven by resolution and flat color regions, not compression quality knobs.
Batch export repeats the same pipeline per file, which parallelizes well at the UX layer (queue items) even though each canvas draw remains single-threaded on the main thread.