Guide

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

After a QR matrix exists, you still have to pick a file. Matrix & Mark offers two local exports: PNG and SVG. Both contain the same modules, colors, and quiet zone. They differ in how those modules are stored and how programs rasterize them later. Neither format adds a watermark, tracker, or website chrome.

Raster and vector graphics

A raster image stores a grid of pixels. Enlarge it far beyond its pixel count and edges soften or stair-step. A vector image stores shapes. An SVG QR code stores each dark module as a square in a viewBox that matches the matrix plus quiet zone. A layout program can scale that file to a poster without inventing new module geometry, provided it respects crisp edges.

PNG format on this site

Download PNG uses the canvas API in your browser. You choose 256 × 256, 512 × 512, 1024 × 1024, or 2048 × 2048 pixels. Default is 1024. The square includes the quiet zone. Modules are aligned to integer pixels. If the pixel count is not a multiple of (modules + 2 × quiet zone), leftover pixels become extra background padding around a sharp grid rather than stretching each cell by a fraction of a pixel.

Filenames follow matrix-mark-{type}-{size}.png, for example matrix-mark-url-1024.png. They never include Wi-Fi passwords or other payload text.

SVG format on this site

Download SVG serializes the matrix as rectangles. The viewBox is square. Fill colors come from the validated foreground and background hex values, escaped for XML. There are no embedded rasters, scripts, or remote references. User input never becomes markup. The file name example is matrix-mark-url.svg.

An SVG remains scannable when rendered at an appropriate size with nearest-neighbor or crisp-edge behavior. If a program blurs the export, flatten to a sufficiently large PNG before print. Blur is a rendering problem, not a sign that the encoded URL or vCard has changed.

Resolution and sharp module edges

Scanners look for sudden dark/light transitions. Soft interpolation is the enemy. That is why this generator disables smoothing on canvas and draws 1×1 module squares in SVG. If you place a 256-pixel PNG on a 200 mm poster, the printer must invent pixels and the finder patterns may collapse. Prefer SVG or a 2048-pixel PNG for large paper, then keep physical module size large enough to see as a grid.

Scaling and print quality

For office labels, a 1024-pixel PNG printed at 70 mm is usually enough if contrast is high and the quiet zone is intact. For a vector page layout, drop in the SVG, set the frame to the intended millimetres, and disable “scale to fit” in the print dialog. Printers can still apply their own gain. Always scan paper. There is no guaranteed scan distance.

File compatibility

PNG opens in nearly every image viewer, CMS, and office suite. SVG support is broad in browsers and design tools, weaker in some older word processors. If a colleague cannot open SVG, send PNG at 1024 or 2048. If a print shop asks for vector, send SVG and mention that modules must stay square.

Quiet zones

Both exports keep at least four light modules around the matrix in the background color. Do not crop the PNG in an editor until the finders touch the frame. Do not set an SVG clip that trims the viewBox. The size guide explains how export pixels include that margin. If a layout grid is tight, shrink surrounding text rather than stealing modules from the quiet zone.

Practical export example A

You need a website code for a handout. In the URL generator, encode https://example.com/events, keep default colors, error correction M, quiet zone 4, export size 1024. Download PNG. Place the file in a document at about 70 mm. Print one page at 100% scale and scan it. If it fails, try 2048 or the medium print layout from the studio rather than stretching the 256-pixel option.

Practical export example B

You need a contact badge that a designer will place in a multi-page layout. Use the contact generator with the fictional name Jordan Lee. Download SVG. In the layout program, size the graphic to 32 mm for a small label or 70 mm for a card. Keep a white or solid field behind it. Export the badge PDF without downsampling the vector to a tiny raster.

Choosing a format

Email a code to a phone user: PNG 512 or 1024.
Website article thumbnail: PNG 256 or 512, but remember on-screen size is not print size.
Ink-on-paper run: SVG or PNG 1024/2048, plus a proof scan.
Laser-cut or vinyl workflows: SVG, then confirm the cutter does not round corners.

FAQ

Is SVG always better than PNG?

No. SVG is better for scaling. PNG is better when the next program only accepts raster files.

Does a larger PNG encode more data?

No. Payload and version are independent of export pixels. Larger PNG files only enlarge the same modules.

Can I make the quiet zone transparent?

This studio uses a solid background. Transparency behind a QR code is a common scan problem.

Export from the QR code generator after the preview shows a valid matrix.