QR Code File Formats: PNG vs SVG for Print & Web

The QR code file format you choose determines whether your code stays sharp at any size or turns into a pixelated mess when scaled up. PNG and SVG are the two formats you'll encounter, and they work fundamentally differently — one is a grid of fixed pixels, the other is a mathematical description that scales infinitely. Picking the wrong one means either blurry prints or unnecessarily large files.

This guide explains when to use each format, why it matters, and how to get the best results for both print and digital applications.

PNG: Raster Format for Digital Use

PNG (Portable Network Graphics) is a raster format — it stores the QR code as a grid of individual pixels at a fixed resolution. A 400 x 400 pixel PNG QR code contains exactly 160,000 pixels, and that number never changes.

Strengths of PNG for QR codes:

• Universal support — every browser, app, and device renders PNG
• Lossless compression — no quality degradation from the original render
• Simple to use — drop it into an email, website, or social post
• Small file size at typical digital display resolutions

The limitation: PNG doesn't scale. If you generate a 400 x 400 px QR code and then need to print it at 10 cm wide, the printer has to upscale those pixels, and the edges of each module become soft and blurry. A blurry QR code is an unscannable QR code.

When to use PNG: Websites, email signatures, social media posts, digital displays, app screens — anywhere the code is displayed on a screen at a known size.

SVG: Vector Format for Print at Any Size

SVG (Scalable Vector Graphics) is a vector format — it stores the QR code as mathematical shapes (rectangles for each module) rather than pixels. The file contains instructions like "draw a 2 x 2 unit black square at position (15, 20)" and the rendering device — whether a phone screen or a printing press — draws it at whatever size you specify.

Strengths of SVG for QR codes:

• Infinite scalability — the same file works for a business card and a billboard
• Perfectly sharp edges at any size — no pixelation, no blur
• Small file size — the math is more compact than a high-resolution pixel grid
• Editable — you can modify colors and shapes in a text editor or design tool

The limitation: Some older systems and basic image viewers don't render SVG. Most modern browsers and design tools (Illustrator, Figma, InDesign, Canva) handle it perfectly, but if you're handing the file to a non-technical stakeholder, PNG may be more practical.

When to use SVG: Print materials of any kind — business cards, flyers, posters, packaging, billboards, signage. Any situation where the code might be resized or printed at high resolution.

PNG vs SVG: Visual Comparison

<svg viewBox="0 0 800 380" xmlns="http://www.w3.org/2000/svg" style="width:100%;max-width:800px;margin:24px auto;display:block">
  <rect x="0" y="0" width="800" height="380" fill="#f8fafc" rx="12"/>
  <text x="400" y="35" fill="#1e293b" font-size="17" font-family="sans-serif" text-anchor="middle" font-weight="bold">PNG vs SVG: What Happens When You Scale Up</text>

  <text x="200" y="70" fill="#3b82f6" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">PNG (Raster) — Scaled 3x</text>
  <g transform="translate(120, 85)">
    <rect x="0" y="0" width="160" height="160" fill="white" stroke="#cbd5e1" stroke-width="1"/>
    <rect x="0" y="0" width="53" height="53" fill="#1e293b"/>
    <rect x="107" y="0" width="53" height="53" fill="#1e293b"/>
    <rect x="0" y="107" width="53" height="53" fill="#1e293b"/>
    <rect x="20" y="20" width="13" height="13" fill="white"/>
    <rect x="127" y="20" width="13" height="13" fill="white"/>
    <rect x="20" y="127" width="13" height="13" fill="white"/>
    <rect x="60" y="60" width="27" height="27" fill="#1e293b"/>
    <rect x="100" y="70" width="20" height="20" fill="#1e293b"/>
    <rect x="70" y="100" width="20" height="20" fill="#1e293b"/>
    <text x="80" y="185" fill="#ef4444" font-size="12" font-family="sans-serif" text-anchor="middle">Pixelated edges — may not scan</text>
  </g>

  <text x="600" y="70" fill="#10b981" font-size="14" font-family="sans-serif" text-anchor="middle" font-weight="bold">SVG (Vector) — Scaled 3x</text>
  <g transform="translate(520, 85)">
    <rect x="0" y="0" width="160" height="160" fill="white" stroke="#cbd5e1" stroke-width="1"/>
    <rect x="0" y="0" width="53" height="53" fill="#1e293b"/>
    <rect x="107" y="0" width="53" height="53" fill="#1e293b"/>
    <rect x="0" y="107" width="53" height="53" fill="#1e293b"/>
    <rect x="20" y="20" width="13" height="13" fill="white"/>
    <rect x="127" y="20" width="13" height="13" fill="white"/>
    <rect x="20" y="127" width="13" height="13" fill="white"/>
    <rect x="60" y="60" width="27" height="27" fill="#1e293b"/>
    <rect x="100" y="70" width="20" height="20" fill="#1e293b"/>
    <rect x="70" y="100" width="20" height="20" fill="#1e293b"/>
    <text x="80" y="185" fill="#10b981" font-size="12" font-family="sans-serif" text-anchor="middle">Crisp edges — scans perfectly</text>
  </g>

  <rect x="40" y="290" width="720" height="70" fill="#eff6ff" stroke="#3b82f6" stroke-width="1" rx="6"/>
  <text x="400" y="315" fill="#1e40af" font-size="13" font-family="sans-serif" text-anchor="middle" font-weight="bold">Rule of thumb</text>
  <text x="400" y="338" fill="#64748b" font-size="12" font-family="sans-serif" text-anchor="middle">PNG for screens at known sizes. SVG for anything that will be printed or resized.</text>
</svg>

Resolution Requirements for PNG

If you must use PNG for print (some workflows require it), you need a high enough resolution that the pixels are invisible at the final print size. The standard is 300 DPI (dots per inch) at the physical size you'll print.

For example, a QR code printed at 5 x 5 cm (about 2 x 2 inches) needs:

• 2 inches x 300 DPI = 600 pixels wide
• So generate a 600 x 600 px PNG minimum

For a 10 x 10 cm code: 1,200 x 1,200 px. For a poster at 20 x 20 cm: 2,400 x 2,400 px. The math is simple, but getting it wrong means a blurry code that won't scan.

With SVG, you skip this calculation entirely — the file scales to any size without resolution loss. This is why SVG is the recommended format for print.

File Size Comparison

SVG files are typically smaller than high-resolution PNGs for QR codes because the vector description is compact. A QR code with 50 x 50 modules needs to describe 2,500 rectangles — that's a few kilobytes of SVG. The same code as a 1,200 x 1,200 px PNG is around 50-100 KB.

For web use at small display sizes, a 400 x 400 px PNG (5-15 KB) is perfectly adequate and more universally supported. The file size difference is negligible at digital display resolutions.

When to Use Each Format: Quick Reference

Use Case	Recommended Format	Why
Business cards	SVG	Prints sharp at small size
Flyers and brochures	SVG	Scales to any print size
Product packaging	SVG	High-resolution print requirement
Billboards and signage	SVG	Massive scale without pixelation
Website landing page	PNG	Fixed display size, universal support
Email signature	PNG	Email clients render PNG reliably
Social media posts	PNG	Platforms optimize PNG for display
App screens	PNG	Known pixel dimensions
Presentation slides	SVG or PNG	SVG if the slide may be projected large

Getting the Best of Both

Many workflows benefit from generating both formats. Use SVG as your master file for print production, and export a PNG at the exact pixel dimensions needed for each digital placement. This ensures you always have the right format without re-generating the code.

If you're adding a logo to your QR code, SVG is especially important — the logo stays sharp at any size alongside the code modules. See our QR code generator with logo guide for branded code setup, and our QR code size guide for print and digital for dimension calculations.

Generate your QR code in both PNG and SVG formats with our QR code generator — just create your code and download in whichever format your project needs.

Common Format Mistakes

• Using a low-res PNG for print — the code blurs and won't scan
• Using SVG in an email — many email clients don't render SVG inline
• Generating PNG at screen resolution then printing large — always calculate 300 DPI at final print size
• Converting SVG to PNG via screenshot — introduces compression artifacts; export properly instead
• Assuming "higher resolution is always better" — for digital, match the display size to avoid unnecessary file weight

For the technical specifications behind these formats, the W3C SVG specification defines the vector standard, and the PNG specification (W3C) covers raster encoding details relevant to QR code rendering.