SVG vs PNG QR Codes: Which Format Should You Download?

Vector versus raster in one minute

A PNG stores a QR code as a grid of pixels. If the image is 512 pixels wide and the code has 29 modules across, each module is about 17 pixels. Enlarge it to a poster and those pixels are stretched and smoothed, so the crisp square edges turn into soft grey ramps. Shrink it and modules start to merge. The information the scanner needs is still there at moderate scales, but it degrades every time the image is resampled.

An SVG stores the same code as geometry: a description of shapes and their coordinates. Nothing is fixed to a pixel grid, so the file can be rendered at 20 mm on a business card or 2 metres on a trade show wall from the exact same bytes, and the edges are perfectly sharp at every size. This is why print designers, sign makers and anyone working in Illustrator, Figma or InDesign ask for vector files, and why SVG is the flagship export on [qrsvg.app](/).

Neither format is universally better. The question is where the code is going to live, and the sections below give a direct answer for each destination.

Why SVG is the best format for print, logos and design tools

Print is unforgiving. A 300 dpi flyer needs a 2 cm code to be at least 236 pixels wide, a 10 cm poster code needs 1181 pixels, and a 1 metre banner needs 11,811 pixels, which is far beyond what most PNG exports offer. With SVG the print shop rasterises at whatever resolution their RIP uses, and the result is the same clean geometry you saw on screen. There is no exported-too-small conversation.

Styled codes benefit even more. Rounded modules, dots, classy corners, leaf-shaped eyes and gradients are all curves, and curves are exactly what raster formats smear at low resolution. In SVG they stay mathematically smooth. A logo placed in the middle of the code with a knockout area also keeps its own vector edges, so a brand mark stays crisp instead of becoming a soft blob next to sharp modules. See the QR code with logo guide for how the knockout and error correction interact.

Design tools treat SVG as native objects, not pictures. You can recolor the modules to a Pantone swatch, align the code to a grid, apply a blend mode, or convert it to outlines for a cutting plotter or embroidery. That workflow simply does not exist with a PNG.

What a clean SVG QR code means

Not every SVG is equally useful. Many generators emit one rect element per module, so a version 10 code becomes more than 3,000 separate objects, each with its own attributes and sometimes its own inline style. That file is technically correct but painful: selecting the code in Illustrator grabs thousands of items, recoloring means editing thousands of fills, and some tools slow to a crawl. Others wrap the code in nested groups with auto-generated ids that collide when you paste several codes into the same document.

A clean SVG avoids all of that. The export from qrsvg.app is a single merged path for the modules (plus separate paths only where a different fill is genuinely needed, such as the eyes or a gradient), a viewBox sized in modules rather than arbitrary pixels, no inline style attributes, and no ids or defs elements unless a gradient or logo requires them. The practical result is a file you can open in Illustrator, Figma, Inkscape, Affinity Designer, Sketch or a browser, select once, and recolor once.

• Single merged path: one object for all modules, so a click selects the whole code.
• Module-based viewBox: a 29 module code with a 2 module quiet zone has a viewBox of 33 by 33 units, which makes scaling and alignment predictable.
• No inline styles or ids: fills are plain attributes, so nothing collides when several codes share a document and nothing overrides your tool's color controls.
• Small file: usually a few kilobytes even for large versions, because the path data is compact.
• Optional transparent background: leave the background off to drop the code straight onto a colored layout.

When PNG is the right choice

PNG wins wherever the receiving system does not understand vectors or actively blocks them. Email clients are the biggest case: most of them do not render SVG at all, and the ones that do often strip it for security reasons. A PNG embedded in the message or used as a hosted image works everywhere. Social networks and messaging apps convert everything you upload to raster anyway, so an SVG buys you nothing there and may be rejected at upload.

Many content management systems refuse SVG uploads by default because an SVG can contain scripts. WordPress blocks it unless a plugin or a filter is added, Shopify and Squarespace accept it only in specific places, and most e-commerce product image fields want JPEG or PNG. Office documents are another common destination: Word, PowerPoint and Google Docs handle PNG reliably, and while newer Office versions import SVG, the result is sometimes converted to a low resolution bitmap on export to PDF.

PNG also supports transparency, so it is the right raster choice when you need the code to sit on a colored background on a web page. For photographs behind a code, avoid it entirely; a QR code needs a plain, high contrast area regardless of format.

File size, resolution and what to export

File size is rarely the deciding factor, but the numbers are worth knowing. A clean SVG of a version 3 code (29 by 29) is typically 2 to 5 KB, and even a version 15 code (77 by 77) is usually under 20 KB because the path data is text that compresses well. A two-color PNG at 512 pixels is around 2 to 6 KB; at 2048 pixels it grows to roughly 10 to 40 KB depending on shapes and gradients. WebP is smaller than PNG for gradient-heavy codes and is supported by every current browser, but not by many email clients or design tools. JPEG is the wrong format for a plain code because its compression adds noise around every sharp edge; use it only when a platform accepts nothing else.

For PNG exports the rule is to render at the final pixel size or larger, never smaller. On screen, export at 2 times the displayed size so it stays sharp on high density displays. For print, work back from the physical size at 300 dpi: 20 mm needs 236 pixels, 50 mm needs 591, 100 mm needs 1181. If you are not sure of the final size, export at 2048 pixels; it is still a small file and covers everything up to about 17 cm at 300 dpi. The size and print guidelines cover the physical side in detail.

Gotchas: SVG in email, Word and WordPress

Because SVG is both an image and a document, it runs into problems in places that expect one or the other. These are the situations that generate the most support questions, and each has a simple workaround.

• Email newsletters: SVG does not render in Gmail, Outlook or most webmail. Export PNG at 2 times the displayed width and host it like any other image.
• WordPress media library: uploads of .svg are blocked by default for security. Either enable SVG support through a trusted plugin that sanitises files, or upload a PNG.
• Microsoft Word and PowerPoint: recent versions import SVG, but older versions and some PDF export paths rasterise it. If the document will be printed, paste a high resolution PNG or use the PDF export.
• Google Docs and Slides: no SVG support at all; use PNG.
• Canva and similar web editors: SVG import works on paid tiers and may recolor the file; check the result before exporting.
• Print shops asking for PDF: export the PDF directly from the generator rather than converting a PNG, so the code stays vector inside the PDF.
• Viewing an SVG in a browser: it will look fine, but right-click and save as image often gives you a PNG, not the original vector. Download the SVG file itself.

The other exports: JPEG, WebP and PDF

qrsvg.app exports five formats, and the two you have not met yet fill specific gaps. PDF is a vector container, so a PDF export keeps the same sharpness as SVG while being accepted by print shops, Office applications and email attachments without the security concerns of raw SVG. It is the format to send when someone asks for a print-ready file and you are not sure what software they use. WebP is a modern raster format that is smaller than PNG for the same quality; it is a good choice for web pages where page weight matters and you control the markup, but it is not yet accepted by most email tools or older CMS uploaders.

If you generate codes programmatically, the public API currently returns SVG for requests like GET https://qrsvg.app/api/qr?data=https://example.com&format=svg&size=512&ecl=M, with PNG output coming soon. Because the response is a clean SVG it can be inlined in HTML, cached at the edge, or converted to raster on your server. The API guide for developers walks through the parameters.

Quick decision guide

When in doubt, download both: the SVG as the master file you keep, and a PNG for whatever channel needs a raster right now. Here is the short version by destination.

• Business cards, flyers, posters, packaging, signage: SVG (or PDF if the printer prefers it).
• Illustrator, Figma, Inkscape, Affinity, InDesign: SVG.
• Website or app where you control the HTML: SVG inline or as an image; PNG or WebP if the CMS will not accept SVG.
• Email, newsletters, Google Docs, older Office files: PNG at 2 times the display size.
• Social media, WhatsApp, messaging: PNG.
• Print shop that wants a single file: PDF.
• Bulk output for hundreds of codes from a CSV at /bulk: SVG for print runs, PNG for web use.

Frequently asked questions

Is SVG or PNG better for a QR code?

SVG for print and design work because it stays sharp at any size and can be recolored in vector tools. PNG for email, social media, Office documents and CMS platforms that do not accept SVG uploads.

Do all phones scan an SVG QR code?

Phones scan whatever is displayed or printed, not the file. An SVG rendered on screen or printed scans exactly like a PNG of the same code, and usually better because the edges are sharper.

What resolution should a PNG QR code be for print?

Work back from the physical size at 300 dpi: about 236 pixels for 20 mm, 591 for 50 mm and 1181 for 100 mm. If unsure, export at 2048 pixels or use SVG instead.

Why is the SVG from some generators huge and hard to edit?

Because they output one rectangle per module, often with inline styles and ids. A clean SVG merges all modules into a single path with a module-based viewBox, which is what qrsvg.app exports.

Can I put an SVG QR code in an email?

Not reliably. Most email clients do not render SVG. Export a PNG at twice the displayed width and use that instead.