Vector paths drawn at the size you ask for
There is a right way and a wrong way to turn a vector file into a bitmap, and the difference shows up immediately at large sizes. The wrong way decodes the SVG at some default resolution, gets a small bitmap, and stretches it up, which produces exactly the soft, fuzzy result people expect from enlarging any image.
This tool does the other thing. It sizes the canvas to your chosen output dimensions first, then asks the browser to draw the SVG into that canvas. The renderer evaluates the actual path geometry at the target resolution, so a 16 pixel icon rasterized at 2048 pixels has genuinely crisp edges rather than sixteen pixels of information spread thin. That is the property that makes vector artwork worth keeping as vector for as long as possible.
The only limit is the artwork. Hairlines specified at fractional widths and effects tuned for one display size can look different once frozen into a fixed pixel grid, particularly at very small outputs where a half-pixel stroke has to land somewhere.
Where the aspect ratio comes from when an SVG declares no size
Your chosen width determines the output width. The height comes from the source file’s proportions, and finding those proportions takes three steps, in order.
First, the width and height attributes on the root tag, when both are present and both are real lengths. A percentage is rejected here, since width="100%" describes no size at all. Second, the viewBox attribute, whose third and fourth numbers give the artwork’s own coordinate extents; this is the case for most icon sets, which ship a viewBox and nothing else. Third, if neither yields anything usable, the file is treated as 300 by 150, which is the fallback dimension a browser applies to any image whose intrinsic size it cannot determine.
Only the ratio is taken from that lookup. The absolute numbers are ignored unless you deliberately ask for them with one of the percentage options, because a declared size of 24 by 24 on an icon says nothing about how large the icon is meant to be used.
Widths, percentage scales and the 10,000 px ceiling
The preset widths cover the sizes platforms actually specify: 128 and 256 for interface icons, 512 for an app icon or a social avatar, 1024 for an App Store submission, 2048 for retina assets and print. Custom width (set below) takes anything from 1 to 10000 pixels through the number box beneath it.
The percentage options behave differently: they scale the SVG’s own declared size rather than setting an absolute width, and unlike the resize tool for photographs they are allowed to go above 100%, because enlarging is the normal direction for vector artwork. Use them when the declared size is meaningful, for instance on an illustration exported at its intended dimensions, and use a pixel width when it is not.
Fonts and external references a rasterizer cannot reach
An SVG loaded as an image is rendered in a deliberately restricted mode: no scripts run, and nothing is fetched from outside the file. That is a browser security rule, not a limitation of this tool, and it has one practical consequence worth planning for.
Any text still stored as text will be drawn with locally available fonts. If your design depends on a web font pulled in through an @font-face rule, the rasterized PNG will show a substitute, and the layout may shift with it. The fix is the same one print workflows have used for decades: convert text to outlines before exporting, so the letterforms become paths that need no font at all. Similarly, an <image> element pointing at a remote URL will render as nothing. Icons and logos exported from Figma, Illustrator or Inkscape normally embed everything they need and are unaffected.
Rasterizing an icon set
- Drop your
.svgfiles into the box above, or use Choose files. Files accumulate across drops, so a whole icon set can go in at once. - Pick an Output size: a pixel width, a percentage of the file’s declared size, or Custom width (set below).
- If you chose the custom option, type your width into Custom width in px (used with “Custom width”).
- Click Convert SVG to PNG. Every file is rendered at the size you picked, with the height following each one’s own proportions.
- Download the results. Each is named after its source with the real output dimensions appended, for example
logo-512x512.png.
Transparency, and the absence of a white background
The canvas starts empty, and PNG has a full alpha channel, so anything your artwork does not paint stays transparent all the way through to the file. No background is added, which is what you want for a logo destined to sit on a coloured header or over a photograph.
That does mean an SVG designed to be viewed against a white page can look odd on its own, since the page was supplying the white. If you need an opaque background, add a filled rectangle behind everything in your vector editor before exporting. To shrink the source file first, SVG Optimizer strips the editor cruft; to produce a full favicon set from the result, Favicon Generator and PNG to ICO take it from here. The rest of the collection lives on the image tools hub.
