ViewBox decides the ratio
- Input
- <svg width="100%" height="100%" viewBox="0 0 512 512">
- Expected output
- Tamanho intrínseco lido como 512×512, não 100×100
Percentage width/height carry no absolute size information outside a page, so the viewBox wins.
SVG rasterization to PNG
An SVG is an XML document that describes geometric shapes, not a pixel grid, which is why it scales to any size without losing sharpness. Rasterizing to PNG (or JPG, or WebP) freezes that vector description into a fixed number of pixels, and the trickiest step in that conversion is figuring out the SVG "correct" size before drawing it.
Percentage width/height carry no absolute size information outside a page, so the viewBox wins.
The scale multiplies the intrinsic size read from the viewBox, not an arbitrary value typed separately.
The height is always recalculated from the viewBox ratio, so setting only the width never distorts the image.
It depends on use: 512 px works for icons and thumbnails; 1024–2048 px for larger images or high-density screens. Since SVG is vector, you can export at any size without losing quality at the source.
Because a PNG is a fixed pixel grid: once rasterized, the SVG loses its ability to scale without loss. Export at a scale or width larger than the final use (for example, 2x or 3x the display size) to give high-density screens some headroom.
The SVG likely uses a font via `@font-face` pointing to an external URL, and an SVG document loaded from a blob URL cannot fetch cross-origin resources to rasterize. Embed the font as inline data inside the SVG itself, or convert the text to vector paths before exporting.
PNG and WebP preserve transparency, useful for icons and logos over varied backgrounds; JPG has no alpha channel, so any transparent area of the SVG gets a solid background colour before exporting. For flat-colour art with sharp edges, like most SVGs, PNG tends to be the most predictable choice.
The source file is capped at 20 MB, and the output width is capped at 8192 px, a ceiling that avoids freezing the browser with a canvas larger than it can allocate.
Scale multiplies each SVG’s intrinsic size (best for batches). Fixed width exports every file at the same width.
PNG and WebP keep transparency. Turn it off to export on a solid colour.
Rasterization happens entirely in your browser. No file is sent to any server.