PNG vs SVG

Both formats are first-class outputs. The right choice depends entirely on how the QR will be displayed.

At a glance

When to pick PNG

• Sharing the QR by email, SMS, social media
• Embedding in PowerPoint, Word, Pages, Keynote
• Sending to a print shop without graphic-design experience
• Posting to Instagram, Facebook, etc.
• Anywhere you would attach a "regular image"

{
 "data": "https://yourbrand.com",
 "size_inches": 4,
 "format": "png"
}

When to pick SVG

• Embedding in your website (<img src>, <object>, inline)
• Web app where users can zoom (e.g. a "View QR" modal)
• Print preview tools that resize on the fly
• Print shops with vector workflows (Illustrator, InDesign)
• Need the smallest possible file (5 to 10x smaller than PNG)

{
 "data": "https://yourbrand.com",
 "size_inches": 4,
 "format": "svg"
}

File size comparison

A 4 in x 300 DPI QR with no logo:

PNG (basic) ~50 KB
PNG (with logo) ~80 KB
SVG (basic) ~25 KB
SVG (with embedded base64 logo) ~70 KB

For 8 in at 300 DPI (2 400 x 2 400 px):

PNG (basic) ~150 KB
PNG (with logo) ~250 KB
SVG (basic) ~25 KB (unchanged: vector)
SVG (with logo) ~70 KB (unchanged: vector)

This is the killer SVG advantage: file size does not grow with print size. A 15 in QR at 300 DPI is the same SVG file as a 4 in one. Only the embedded logo's base64 contributes weight.

Inline SVG in HTML

Paste SVG straight into your page for zero HTTP requests:

<div class="qr-container">
 <!-- API response body, paste verbatim -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33" width="300" height="300">
 ...
 </svg>

Now CSS can style it (fill, stroke), animate it (transform), or respond to clicks. With PNG you would need a full re-render every state change.

Caveat: SVG and PDF print

If your end target is a PDF for the printer, SVG inside PDF is well supported by Adobe tools (InDesign, Illustrator) but flaky in everyday tools (Word, Pages). When in doubt, request PNG at the right DPI.

Decision tree

flowchart TD
 A{Where will the QR show?} --> B[Email, social, IM]
 A --> C[My website]
 A --> D[Printed product]

 B --> b1[PNG]

 C --> c1{Will users zoom?}
 c1 -->|Yes| c2[SVG]
 c1 -->|No| c3[Either, SVG smaller]

 D --> d1{Print shop tooling?}
 d1 -->|Adobe pro| d2[SVG]
 d1 -->|Office, basic, unknown| d3[PNG]

What is next

• Print quality guide
• API reference