Written by Jamie Park — UI/UX Designer. I design interfaces and convert a lot of SVGs. More about me →
Last Thursday a client emailed me at 11pm: "Jamie, the developer needs all 62 icons as PNGs at 3x resolution for the iOS build — can you get them over by morning?" I had designed everything as SVGs, which is exactly how you should design. But Xcode asset catalogs don't read SVG. So I had 62 vector icons that needed to become 62 pixel-perfect PNGs at 75×75px each. I finished in under three minutes and got to bed by midnight.
I've been converting SVG to PNG almost daily for six years now, and I've made every mistake there is: wrong resolution, white backgrounds where transparency should be, blurry edges because I used the wrong tool. Here's the workflow I actually use now.
Here's what tripped me up for years: SVG has no intrinsic resolution. It's math — paths and curves — so a 100×100 SVG and a 1000×1000 SVG are the same file with a different viewBox. When you convert SVG to PNG, you have to decide the output resolution. Get it wrong and your icons are either blurry (too small) or bloated (too large).
Apple's HIG specifies that tab bar icons should render at 25×25 points, which means you need 25px, 50px, and 75px PNG files for @1x, @2x, and @3x respectively. Android's material design guidelines use dp instead of pt, but the math is the same — mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi. I used to export each size one at a time in Sketch. Then I discovered I could set the target resolution in a browser-based SVG to PNG converter and batch all 62 icons in one go.
Sketch and Figma can export to PNG, sure. But they're slow for batch work. Illustrator's "Export for Screens" dialog makes me want to throw my monitor out the window — it resets my folder selection every single time. And none of them handle bulk SVG to PNG conversion well when you're dealing with 50+ files from different artboards.
What I do now: design everything as SVG, review at 100% scale in the browser, then drop all the SVGs into a free SVG to PNG converter that runs entirely in the browser. No upload means my client's unreleased branding never touches a server. I set the width to 75px (for 3x), hit convert, and download a ZIP. The whole thing takes less time than Illustrator's export dialog takes to open.
I once sent a developer 48 "converted" PNG icons from a tool that silently filled all transparent areas with white. The icons looked fine in the email preview but broke completely on the app's dark mode screens. I didn't catch it because I was testing everything in light mode. Now I always check: if the original SVG has an alpha channel and the output PNG shows a white background, the converter is broken. I use SVG to transparent PNG conversion that preserves every pixel of alpha — including partial transparency on drop shadows and glass effects.
Written by Jamie Park — UI/UX Designer. I design interfaces and convert a lot of SVGs. More about me →