How to Convert SVG to PNG for Print and Web
Why Convert SVG to PNG at All?
SVG (Scalable Vector Graphics) is a remarkable format. It stores shapes as mathematical paths rather than pixels, so a logo can scale from a business card to a billboard without losing a single edge. But that strength is also a limitation in practice. Many platforms simply do not accept SVG files. WordPress media libraries block them by default for security reasons. Most print-on-demand services like Printful and Redbubble require raster formats — typically PNG or JPEG — because their RIP (Raster Image Processor) software expects pixel data, not XML-encoded paths. Email clients render SVG inconsistently or not at all, and older versions of Microsoft Office treat SVG as an unknown object. PNG fills that gap. It supports a full alpha-transparency channel, which means your logo's background stays transparent rather than going white, and it uses lossless compression so there is no quality degradation from saving and re-saving the file. The trade-off is that PNG is resolution-dependent. Once you export at 300 px wide, you cannot blow it up to 3000 px without visible pixelation. That is why choosing the right export dimensions before you convert matters more than anything else in this process.
Understanding Resolution: PPI, DPI, and What Numbers to Use
Resolution is the most misunderstood part of converting vector art to raster. The terms DPI (dots per inch) and PPI (pixels per inch) are often used interchangeably, but they describe different things. PPI describes screen pixel density; DPI describes how many ink dots a printer lays down per inch. When you export an SVG to PNG, you are choosing PPI — the pixel density of the resulting file. For web use, 72 PPI is the historical standard, though modern retina and HiDPI screens effectively display at 144 PPI or higher. A practical rule: export web graphics at exactly the pixel dimensions they will appear on screen, then supply a 2x version for retina displays. If a hero image slot on your website is 1200 × 600 px, export at 1200 × 600 for standard screens and 2400 × 1200 for retina. For print, the industry standard is 300 PPI at the final printed size. A business card is 3.5 × 2 inches, so a print-ready PNG should be at least 1050 × 600 pixels (3.5 × 300 and 2 × 300). A full-bleed A4 poster at 300 PPI requires 2480 × 3508 pixels. Large-format banners viewed from a distance can often use 150 PPI or even 96 PPI without visible quality loss, because the viewing distance compensates for lower pixel density. Because SVG is resolution-independent, you can export it at any of these sizes without touching the original file. That is the entire point of converting from SVG rather than from a low-resolution JPEG.
How to Convert SVG to PNG Using CocoConvert
CocoConvert handles the conversion server-side, which means you do not need Illustrator, Inkscape, or any other software installed locally. The process is straightforward, but a few settings deserve attention. 1. Go to the [SVG to PNG converter](/convert/svg-to-png) page. 2. Click 'Choose File' or drag your SVG directly onto the upload area. Files up to 50 MB are supported; most SVG logos and icons are well under 1 MB, so this limit is rarely an issue. 3. Before clicking Convert, open the 'Output Settings' panel. Here you can set the target width in pixels. Enter the width you calculated based on the resolution guidance above — for example, 2480 px for an A4 print document at 300 PPI. CocoConvert will maintain the SVG's original aspect ratio automatically unless you check 'Custom dimensions' and enter both width and height manually. 4. The background color option defaults to transparent (alpha channel preserved). If you need a white background — common for JPEG-only print workflows — select white here rather than adding it later in Photoshop. 5. Click Convert, then download your PNG. One honest limitation worth stating: CocoConvert renders SVGs using a standard browser-based engine. SVG files that rely on external fonts loaded via @font-face CSS rules may not render those fonts correctly if the font files are not embedded in the SVG itself. If your SVG contains text with a custom typeface, convert the text to outlines in your vector editor first (in Illustrator: Type > Create Outlines; in Inkscape: Path > Object to Path). This is not a CocoConvert-specific issue — it affects any server-side SVG renderer that does not have your system fonts installed.
Batch Converting Multiple SVG Files
Icon libraries, UI kits, and brand asset packages routinely contain dozens or hundreds of SVG files. Converting them one at a time is not a realistic workflow. CocoConvert supports batch uploads: select multiple SVG files in the file picker (hold Shift or Ctrl/Cmd to select several at once) and all of them will convert using the same output settings you have configured. The resulting PNGs download as a single ZIP archive. A few things to keep in mind for batch jobs. First, all files in a batch share the same width setting. If your icon set contains both square icons (24 × 24 px viewBox) and wide banner SVGs (1200 × 300 px viewBox), the width you enter will be applied to each file independently while the aspect ratio is maintained per file. A 24 × 24 icon exported at 512 px wide will come out at 512 × 512 px; a 1200 × 300 banner exported at the same 512 px width will come out at 512 × 128 px. That is usually the correct behavior for mixed-size batches, but worth verifying before you run a large job. Second, file naming in the ZIP mirrors the original SVG filenames with the extension swapped to .png. If your SVGs are named systematically (icon-home.svg, icon-cart.svg, etc.), the output will be equally organized. If they have generic names like download(1).svg, rename them before uploading. For very large batches — say, 500+ files — a desktop tool like Inkscape's command-line interface or ImageMagick may be more efficient. CocoConvert is optimized for convenience, not for enterprise-scale automation pipelines.
Preparing SVGs Before Conversion: Common Pitfalls
The quality of your PNG output depends heavily on the quality of the source SVG. Several issues in SVG files consistently cause problems during rasterization. Clipping paths and masks: SVG supports complex clipping regions that crop shapes to arbitrary paths. Most renderers handle these correctly, but occasionally a clip-path that references an element by ID fails if the SVG was exported from one tool and edited in another, leaving orphaned references. If your converted PNG shows unexpected white rectangles or missing sections, open the SVG in a text editor and look for clipPath or mask elements with broken href references. ViewBox vs. width/height attributes: An SVG file should have a viewBox attribute (e.g., viewBox='0 0 100 100') that defines the coordinate space. Some SVG files have explicit width and height attributes set in pixels but no viewBox, which can cause renderers to export at the literal pixel size specified in the file rather than scaling to your requested output dimensions. If CocoConvert produces a PNG at an unexpected size, open the SVG in a text editor and check whether a viewBox is present. Adding one that matches the width and height values usually resolves the issue. Embedded raster images: SVGs can contain base64-encoded raster images inside image tags. A logo SVG with an embedded JPEG texture, for example, will only look as sharp as that embedded JPEG — converting to PNG at 4000 px wide will not improve the quality of the embedded raster portion. Check your SVG source if output quality looks inconsistent across different parts of the image. Color profiles: SVG uses sRGB by default. If your print workflow requires CMYK, PNG cannot carry CMYK color data — it is an RGB-only format. For CMYK print jobs, export to TIFF or PDF from your vector editor instead.
Optimizing the PNG After Conversion
A freshly converted PNG from a large SVG can be surprisingly large. A 2480 × 3508 px PNG with complex gradients might weigh 15–25 MB unoptimized. For web use, that is unusable. For print, file size matters less, but staying under 10 MB is generally good practice for upload limits on print services. For web delivery, run the PNG through a lossless optimizer. Tools like Squoosh (browser-based, free), pngquant (command-line), or TinyPNG reduce file sizes by 40–70% with no visible quality loss by reducing the PNG color palette and applying better compression. A 2 MB icon PNG often compresses to under 300 KB with pngquant's default settings (pngquant --quality=65-80 yourfile.png). Also consider whether PNG is even the right final format for web use. If the image has no transparency requirement, convert it further to WebP — modern browsers support it universally and WebP files are typically 25–35% smaller than equivalent PNGs at the same visual quality. CocoConvert offers SVG to WebP conversion as well if you want to skip the PNG intermediate step entirely for web-only assets. For print, avoid further compression. Send the full unoptimized PNG to the print service. Some services like Printful explicitly warn against using compressed PNGs because lossy compression artifacts can appear in print even when invisible on screen.
Quick Reference: Settings by Use Case
Rather than recalculating dimensions every time, keep this reference handy for the most common conversion scenarios. Favicon (web): Export at 512 × 512 px. Most favicon generators accept a single 512 px PNG and produce all required sizes (16, 32, 180, 192 px) automatically. Social media profile picture: 800 × 800 px minimum. LinkedIn, Twitter/X, and Facebook all display at 400 px or smaller, but uploading at 800 px gives their compression algorithms more to work with and results in sharper output. Open Graph / social share image: 1200 × 630 px. This is the canonical size recommended by Facebook and adopted by most other platforms. Business card (print, 3.5 × 2 in at 300 PPI): 1050 × 600 px, plus 0.125-inch bleed on each side if required by your printer (add 75 px to each dimension: 1125 × 675 px). A4 poster (print, 300 PPI): 2480 × 3508 px. Letter poster (print, 300 PPI): 2550 × 3300 px. T-shirt print area (typical 12 × 14 in at 300 PPI): 3600 × 4200 px. Retina web graphic (2x): Export at double the CSS pixel dimensions. A 600 × 400 CSS image needs a 1200 × 800 px PNG source file. All of these can be entered directly into the width field on the [SVG to PNG converter](/convert/svg-to-png) page. For non-square outputs where you need exact height control, use the custom dimensions toggle and enter both values. When in doubt about a specific print service's requirements, check their artwork guidelines page — Redbubble, Printful, Gooten, and most others publish exact pixel and DPI requirements for every product type.