How to Convert SVG to PNG for Print and Web
Why Convert SVG to PNG at All?
SVG (Scalable Vector Graphics) should be the perfect format. It stores shapes as mathematical paths, not pixels, so a logo can scale from a tiny favicon to a massive billboard without losing a single sharp edge. So why are we even talking about converting it? Because in the real world, many platforms just don't support it. Try uploading an SVG to a default WordPress media library and you'll hit a security block. Most print-on-demand services like Printful and Redbubble demand raster formats—PNG or JPEG—because their industrial-grade printing software (the RIP, or Raster Image Processor) needs pixels, not XML. Even email clients and older Microsoft Office versions will either render SVGs inconsistently or just throw up their hands. This is where PNG comes in. PNG provides the critical alpha-transparency channel, keeping your logo's background transparent instead of slapping a white box behind it. It also uses lossless compression, so you don't lose quality every time you save the file. The catch? PNG is resolution-dependent. Once you export it at 300 pixels wide, you can't stretch it to 3000 pixels without a pixelated mess. This is the fundamental trade-off, and it means that getting the export dimensions right from the start is the most important step in the entire process.
Understanding Resolution: PPI, DPI, and What Numbers to Use
Let's clear this up first: resolution is the most confusing part of this whole process. People throw around DPI (dots per inch) and PPI (pixels per inch) as if they're the same, but they aren't. PPI is what you control. It's the pixel density of the digital image you're creating. DPI is what a physical printer does—how many tiny dots of ink it puts on paper. When you export an SVG to PNG, you are setting the PPI. For web graphics, let's just get this out of the way: the old '72 PPI for web' rule is a fossil. It's meaningless. What matters are the absolute pixel dimensions. Export your graphics at the exact size they will be displayed. If your hero image slot is 1200 × 600 pixels, export a 1200 × 600 pixel PNG. For modern retina and HiDPI screens, you'll also need a '2x' version—in this case, 2400 × 1200 pixels—to keep things sharp. Print is where the numbers really matter. The industry standard is 300 PPI calculated at the final physical size. If you're designing a standard 3.5 × 2 inch business card, your PNG needs to be at least 1050 × 600 pixels (that's 3.5 × 300 and 2 × 300). For a big A4 poster, you'll need a 2480 × 3508 pixel image to hit that 300 PPI target. The only exception is for large-format prints viewed from far away, like banners, where you can often get away with 150 PPI or even 96 PPI because distance makes the pixels blend together. This flexibility is the whole point. Your original SVG is resolution-independent. You can generate a PNG for a tiny icon and another for a giant poster from the exact same source file, without ever touching the original. That's a power you just don't have when starting with a low-res JPEG.
How to Convert SVG to PNG Using CocoConvert
Since CocoConvert works in your browser, you don't need to have Illustrator or Inkscape installed. The conversion is handled on our servers. The process is simple, but don't just mash the 'Convert' button without checking the settings first. The magic is in the details. 1. Head over to the [SVG to PNG converter](/convert/svg-to-png) page. 2. Drag your SVG file onto the upload area, or use the 'Choose File' button. The 50 MB file limit is generous; most SVGs are tiny, often under 1 MB. 3. This is the crucial step. Before converting, open the 'Output Settings' panel. This is where you set the target width in pixels. Use the numbers you worked out earlier—for instance, 2480 px for that A4 print job at 300 PPI. CocoConvert automatically maintains the original aspect ratio. Only use the 'Custom dimensions' checkbox if you need to force a specific height and potentially distort the image. 4. The background defaults to transparent, preserving the alpha channel. This is usually what you want. If you need a solid background (say, for a workflow that only accepts JPEGs later), you can set a color here instead of fixing it in Photoshop later. 5. Click Convert and grab your new PNG. A quick heads-up on fonts: CocoConvert renders SVGs using a standard browser engine. This means if your SVG uses a special font via a CSS `@font-face` rule, it might not show up correctly unless that font is embedded within the SVG file itself. Anyone who's fought with font rendering on the web knows this particular headache. The universal fix is to convert your text to outlines (or paths) in your vector editor before you export the SVG. In Illustrator, it's Type > Create Outlines. In Inkscape, it's Path > Object to Path. This turns text into shapes and guarantees it will look identical everywhere, which is a good practice for logos anyway.
Batch Converting Multiple SVG Files
If you're dealing with an icon library, a UI kit, or a folder of brand assets, converting files one-by-one is a non-starter. CocoConvert lets you batch convert. Just select all your SVG files at once in the file picker (hold Shift or Ctrl/Cmd) and they will all be processed with the same output settings. Your converted PNGs will arrive in a single, neat ZIP archive. There are a couple of behaviors to understand when running a batch job. The width setting you choose applies to every file in the batch, but the aspect ratio for each individual file is preserved. For example, if you have a square 24 × 24 px icon and a wide 1200 × 300 px banner in the same batch, and you set the output width to 512 px, the icon will become a 512 × 512 px PNG, and the banner will become a 512 × 128 px PNG. This is almost always what you want for mixed-size batches, but it's good to be aware of it before you process a huge folder. Also, pay attention to your input filenames. The output ZIP will mirror them, just swapping the extension to .png. If your source files are well-named like `icon-home.svg` and `icon-cart.svg`, your output will be just as organized. If they're named `download(1).svg`, you'll have a mess. Clean up your filenames before you upload. Let's be clear about the right tool for the job. CocoConvert is built for convenience, perfect for converting dozens or even a couple hundred files. If you're looking at a folder with 500+ files for a massive automation pipeline, you'll be better served by a command-line tool like Inkscape or ImageMagick. Use the tool that fits the scale of your task.
Preparing SVGs Before Conversion: Common Pitfalls
Your final PNG is only as good as the source SVG. It's the classic 'garbage in, garbage out' problem. If your conversion isn't looking right, the issue is almost always lurking inside the SVG code itself. Here are the most common culprits to investigate. Missing pieces or weird white boxes? This often points to broken clipping paths or masks. SVGs can use one shape to mask another, but if the reference between the mask and the shape gets broken (often by exporting from one app and editing in another), the renderer gets confused. If you see this, open the SVG in a text editor and search for `clipPath` or `mask` elements with bad ID references. Wrong size output? The culprit is likely a missing `viewBox` attribute. A well-formed SVG needs a `viewBox` (like `viewBox='0 0 100 100'`) to define its internal coordinate system and allow it to scale properly. Some tools export SVGs with only `width` and `height` attributes, which can cause renderers to ignore your requested output size and just use the file's literal pixel dimensions. The fix is to edit the SVG and add a `viewBox` that matches the document's dimensions. Pixelated sections in a vector file? Your SVG might contain an embedded raster image. Yes, SVGs can have JPEGs or PNGs hidden inside `<image>` tags. If a logo has a photographic texture, for example, that texture will only ever be as sharp as the original embedded image. Scaling the whole file to 4000 pixels wide won't magically de-pixelate that one part. Wrong colors for print? Remember that SVG and PNG are both RGB formats, living in the sRGB color space by default. PNG cannot store CMYK color data. If your printer absolutely requires a CMYK file, you can't get there by converting to PNG. You'll need to go back to your vector editor and export a CMYK-native format like TIFF or a properly configured PDF.
Optimizing the PNG After Conversion
Don't be shocked if the beautiful, high-resolution PNG you just created is enormous. A print-ready PNG from a complex SVG, like a 2480 × 3508 px file with gradients, can easily top 15–25 MB. For the web, that's a non-starter. For print, size is less of a concern, but many print services have upload limits, so it's good practice to keep files under 10 MB if possible. For web delivery, optimization is not optional. You must run your PNGs through a lossless optimizer. Tools like the browser-based Squoosh, the command-line utility `pngquant`, or the web service TinyPNG can slash file sizes by 40–70% without any visible change in quality. They work by intelligently reducing the color palette and applying more efficient compression. A 2 MB PNG can often shrink to under 300 KB using `pngquant --quality=65-80 yourfile.png`. You should also ask if PNG is even the best final format for the web. If your image doesn't need transparency, converting it to WebP is a smart move. WebP enjoys universal support in modern browsers and typically produces files that are 25–35% smaller than a comparable PNG. For web-only assets, you can go straight from SVG to WebP with CocoConvert and skip the intermediate PNG step entirely. For print, do the exact opposite: do not optimize. Send the full-resolution, uncompressed PNG you downloaded directly to your print service. Some services, like Printful, specifically warn against uploading compressed PNGs. Lossy compression artifacts that are completely invisible on your screen can become glaringly obvious when printed.
Quick Reference: Settings by Use Case
You shouldn't have to do math every time you convert a file. Bookmark this section or keep it handy as a cheat sheet for the most common export settings. Favicon (web): Export at 512 × 512 px. Modern favicon generators will take this one large PNG and create all the smaller sizes (16, 32, 180, 192 px) for you. Social media profile picture: Use 800 × 800 px as your minimum. Even though platforms like Twitter/X and Facebook display them smaller, uploading a larger source file feeds their compression algorithms better data, resulting in a much sharper final image. Open Graph / social share image: 1200 × 630 px. This is the standard aspect ratio recommended by Facebook and now used by almost everyone. Business card (print, 3.5 × 2 in @ 300 PPI): 1050 × 600 px. If your printer requires bleed, add 0.125 inches to each side, making your document 1125 × 675 px (an extra 75 pixels total for each dimension). A4 poster (print, 300 PPI): 2480 × 3508 px. Letter poster (print, 300 PPI): 2550 × 3300 px. T-shirt print area (12 × 14 in @ 300 PPI): A common size is 3600 × 4200 px. Retina web graphic (2x): Double the dimensions defined in your CSS. An image styled to be 600 × 400 px needs a 1200 × 800 px source PNG. All of these pixel values can be typed directly into the width field on the [SVG to PNG converter](/convert/svg-to-png) page. For non-square images where you need to define both dimensions, just use the custom dimensions toggle. While this list is a great starting point, the ultimate source of truth is always the specific print service's guidelines. Redbubble, Printful, Gooten, and others all publish detailed pixel and DPI requirements for every product they sell. Always check their specs before a big print run.