SVGs are perfect for the web, but sometimes you need a raster: for a Slack/Discord avatar, an OpenGraph preview, an email footer logo, or a legacy platform that doesn't understand vector. The Rankato SVG-to-PNG converter takes any SVG — from a Figma export, a Font Awesome icon, or a hand-written illustration — and produces a PNG at whatever pixel size you want. You control width, height, DPI, background (transparent or solid color), and whether to preserve or override the SVG's aspect ratio. Everything runs in your browser using the same rendering engine that draws SVGs on every website you visit, so what you see is exactly what you'll ship.
Why rasterize an SVG?
SVGs are the right choice for icons, logos, and illustrations on the web because they scale infinitely without pixelating. But raster formats still rule everywhere off the web: OpenGraph previews (which most social platforms require as PNG or JPEG), email templates (Outlook does not render SVG), product images in marketplaces, chat avatars, print, and older CMS platforms. Rasterizing an SVG at the exact target size gives you the sharpest possible output — sharper than exporting a large PNG from a design tool and letting the browser downscale it, and sharper than upscaling a smaller PNG.
Resolution and DPI controls
The converter offers three ways to specify output size: Pixels (set width and/or height directly — the other dimension is derived from the SVG's viewBox to preserve aspect ratio), Multiplier (2×, 3×, 4× the SVG's intrinsic size — perfect for @2x and @3x asset generation), and DPI (150, 300, 600 — useful for print, where the SVG's width="…mm" is honored). If you set both width and height explicitly, you can override the aspect ratio; a warning appears when this will distort the image.
Background and transparency
SVGs support transparency natively, and PNG preserves that transparency losslessly. The default is a transparent background; toggle Solid background to fill with any color (with a picker) or match a common brand background (white, black, or a specific hex). This is especially useful when you need a raster for a platform that doesn't respect the alpha channel — Facebook OpenGraph previews, for example, composite over a gray backdrop that makes semi-transparent PNGs look wrong.
Handling of embedded images and fonts
If your SVG contains an <image href="…"> tag with an external raster, the rasterizer needs to load that image first — external URLs are fetched (subject to CORS), and data URIs are used directly. If your SVG references a font via <text font-family="…">, the rasterizer uses whatever font your operating system has installed under that name — so an SVG that uses Inter will look different on a machine without Inter installed. To lock down fonts, either convert your text to paths in your design tool or embed a base64 @font-face in a <style> block inside the SVG.
Batch mode
Drop up to 20 SVGs and configure a single target size for all of them. The rasterizer produces one PNG per SVG, each named original.svg → original.png. This is handy for icon sets — export the whole set at 24×24 for a UI, 48×48 for Retina, and 96×96 for a hover state, all in one pass. Download individually or grab a ZIP.