SVG to PNG at the exact size you need

Export at the size the image occupies on screen multiplied by the pixel ratio of the densest display you care about, which in practice means ×2 for a laptop and ×3 for a phone. A 48 px icon shipped at 48 px looks soft on every device made since 2014; the same icon at 144 px looks correct everywhere and still costs a few kilobytes. Where the slot is fixed rather than fluid — an email header, an app-store screenshot, an Open Graph card — use the exact box mode and type the two numbers the specification gives you.

Because an SVG rendered through an image element cannot fetch a font. The renderer has no network access at all in that mode, so an @font-face rule pointing at a .woff2 file silently fails and the text falls back to a generic system family, usually with different metrics that shift the layout as well as the shapes. The fix is to convert the type to outlines before exporting: Type › Create Outlines in Illustrator, Flatten in Figma, Path › Object to Path in Inkscape. Embedding the font as a base64 data URI inside the SVG also works and costs 30-60 kB per weight.

It takes the viewBox as its aspect ratio and this page shows you which rule was used for each file. A viewBox of 0 0 24 24 gives a 24 × 24 natural size, so a ×10 factor writes 240 × 240. When both the attributes and the viewBox are missing there is no ratio to work from, and the fallback is the 300 × 150 default that CSS gives any replaced element without intrinsic dimensions — pick the exact box mode in that case rather than trusting the number.

An image element pointing at a URL is the usual culprit: the sandbox has no network, so the bitmap never arrives, the renderer draws everything else and reports no error at all. Inlining that asset as a base64 data URI fixes it, because a data URI is not a fetch and does render. The related failure is louder — a file containing a foreignObject taints the canvas in Chrome and Safari even when the content inside it is local, and the export stops with a security error rather than a hole in the picture. Both cases are worth checking before you conclude the converter is at fault: open the file and search it for href="http and for foreignObject.

Because the input almost always has transparency and JPEG has no alpha channel at all. PNG written by a canvas is 8 bits per channel with a full alpha channel, lossless, and non-interlaced; the quality argument that JPEG and WebP accept is ignored for it entirely. When you do need an opaque file — an email client that paints alpha as black, a print workflow that rejects transparency — flatten onto a background color here first, and the result composites correctly instead of leaving grey fringes around the edges.

Yes — drop up to 20 files at once and each is measured and rendered on its own natural size. In scale mode a 24 px icon and a 512 px illustration both come out at their own dimensions times the factor, which is what you want for an icon set; in width mode they are all normalized to the same width instead. The 20-file ceiling is there because every render holds a full-size canvas in memory for a moment, and a batch of 8192 px exports would otherwise exhaust the tab.

No — the values in the SVG are written into the PNG unchanged, since both are interpreted as sRGB and no color management step runs in between. What can shift is anything the file expected the page around it to supply: currentColor resolves to black, a CSS custom property defined outside the file resolves to nothing, and a class styled by your stylesheet is unstyled here. An SVG loaded as an image is a self-contained document, so every value it uses has to be inside it.