Toolium

SVG to PNG: Picking the Right Scale, and the Font Trap

Hemanth Gedda6 min read

The first time I built an SVG to PNG converter, I made the obvious mistake: I rendered the SVG at 1x scale and called it done. The output PNGs looked great on a desktop monitor and terrible on every retina screen, where the system was upscaling my already-rasterized image and producing fuzzy edges. The fix was straightforward - add a scale multiplier so users can pick the output resolution - but it taught me that "convert SVG to PNG" is really three questions: convert, what scale, and what background. This post answers each of them.

Why SVG and PNG even exist as separate things

SVG (Scalable Vector Graphics) is a vector format: the file describes shapes mathematically (this rectangle, that path, this gradient between these two points) and any renderer can produce pixels at any resolution. You can blow up a 100x100 SVG to 10,000x10,000 pixels and the edges stay perfectly crisp because there is no underlying pixel grid; the rasterizer just runs the math at higher resolution.

PNG (Portable Network Graphics) is a raster format: the file is a fixed grid of pixels. A 1000x1000 PNG has exactly one million pixels, and that is all the information there is. Scaling it up means inventing pixels (interpolating), and scaling it up too far makes the original pixel grid visible.

The conversion from SVG to PNG is essentially asking "what resolution do you want to lock this into?" The answer depends on where the PNG will be used.

The scale picker, with concrete numbers

The SVG to PNG tool exposes a scale multiplier. The defaults map to common destinations:

  • 1x. Output at the SVG's declared dimensions. A 500x500 SVG produces a 500x500 PNG. Good for general web use on standard-density displays. Will look slightly fuzzy on retina screens.
  • 2x (recommended default). Output at double the SVG's dimensions. Looks crisp on retina screens. Standard for any use where mobile and laptop displays matter.
  • 3x. For very high-density displays and some print uses. File size grows roughly with pixel count (so 3x file size is 9x of 1x file size).
  • 5x or higher. Print-quality output. A 500x500 SVG at 5x is 2500x2500 PNG, which prints crisply at 8x8 inches at 300 DPI. Files get big at this scale.

If you do not know what you need, 2x is the right default. If your destination is print, multiply your needed print dimensions in inches by 300 (for 300 DPI) and divide by the SVG's natural pixel dimensions to get the scale factor.

The fonts-not-loaded trap

This is the surprising one. If your SVG includes text rendered with a font reference (like font-family: "Inter"), and that font is not available in the browser doing the conversion, the renderer falls back to a default font - usually a serif system font. Your branded sans-serif text comes out looking like Times New Roman.

The fix has two paths. First, you can convert the text to paths in your design tool before exporting the SVG. In Figma, this is the "Outline stroke" option. In Illustrator, it is "Create outlines." This bakes the font shapes into vector paths so the PNG renderer does not need the font installed. Second, you can ensure the font is loaded in the browser. The Toolium tool uses the page's loaded fonts when rendering, so SVGs referencing web-safe font families (Arial, Helvetica, Georgia, etc.) render correctly without extra work.

For SVGs that reference custom fonts, the safest approach is to convert text to paths in the source tool. The file gets larger, but the rendering is consistent everywhere.

The transparent-background question

SVGs are transparent by default - the canvas is "no background" rather than white. PNG supports transparency, so the conversion preserves this. If you want a solid background, you have two options. Add a background rectangle to the SVG before converting (the rect element with the canvas dimensions, filled with your background color). Or composite the resulting transparent PNG over a colored background in another tool.

For most uses, transparent PNGs are what you want - they can be placed on any background and look natural. The only common case for opaque PNGs is when the destination cannot handle transparency, which is rare in 2026.

How the conversion works internally

The browser does the heavy lifting. The SVG content is parsed, rendered to an in-memory canvas at the requested scale, and then exported as PNG via canvas.toBlob('image/png'). Everything happens locally - no upload, no server, no third party seeing your design assets.

The rendering uses the browser's native SVG rendering pipeline, which is the same pipeline used to display SVG on any web page. This means whatever you see in the preview is what you get in the PNG. No mystery transformations, no surprises in the output.

The current limits

The tool clamps the output dimensions at around 10,000 pixels per side, because larger canvas operations can exceed browser memory or hit canvas-size limits. For most uses this is plenty. If you need print-quality output at huge dimensions, a desktop tool like Inkscape's command line (inkscape --export-type=png --export-dpi=300 input.svg) can handle larger.

The tool does not yet support batch conversion. Each SVG is converted individually. For many SVGs at once, Inkscape's command line works on a folder; or sharp on Node.js can batch convert via a short script.

Try the tool mentioned in this article

Open tool