QRcrisp

SVG QR Code Generator: Why SVG and When to Use It

Most QR code generators offer PNG. Some also offer SVG. If you're doing anything with print, design tools, or large-format output, SVG is the one you want. Here's why, and how to use it.

What makes SVG different from PNG

PNG (Portable Network Graphics) is a raster format. It stores the image as a grid of pixels, one colour value per pixel. A 500x500 PNG QR code has 250,000 pixels, each with a fixed value. If you scale it up to 5,000 pixels, the software has to guess what the extra pixels should look like. The result is blurring or pixellation.

SVG (Scalable Vector Graphics) is a vector format. It stores the image as a set of mathematical instructions. "Draw a black square at position (x, y) with width w and height h." Scale the SVG to any size and those instructions are recalculated at the new dimensions. The result is always perfectly sharp, at any scale, with no guessing involved.

A QR code is geometrically perfect for SVG treatment. It's made entirely of squares. Every module (the individual black-and-white units that make up the pattern) is a rectangle, and rectangles are trivial to describe in SVG. The resulting file is often smaller than a comparable PNG, and infinitely more flexible.

When to use SVG

Print materials

Any time a QR code is going to a printer, SVG (or PDF) is the right format. Commercial printers work at 300 DPI, sometimes 600 DPI for fine work. A PNG generated for screen use at 72-150 DPI will look terrible when printed at these resolutions. An SVG renders perfectly at 10,000 DPI if that's what the printer needs.

This matters for business cards, flyers, posters, menus, event programmes, banners, and packaging. If it's going to a print shop, use SVG.

Design tools

Figma, Sketch, Adobe Illustrator, Affinity Designer, and Inkscape all import SVG natively. Once imported, the QR code can be scaled, coloured, and placed precisely within a layout without any quality degradation. Some of these tools will even let you edit the individual path elements of the SVG, though for QR codes you generally want to leave the paths alone and just scale the whole thing.

Canva supports SVG import too (on paid plans, as of 2024). InDesign handles SVG placement well, making it the workflow of choice for professional print layouts.

Large-format output

A QR code on a billboard, exhibition stand, or shop front sign might need to be 50cm or 1 metre across. PNG simply doesn't work at those sizes. SVG does. One SVG file, generated on QRcrisp, can be used for both a 3cm business card code and a 100cm exhibition banner.

Ready to make yours? Open the free generator → No signup, no tracking, code works forever.

When PNG is fine

Not everything needs SVG. PNG works perfectly for:

How to use SVG QR codes in common tools

Figma

Drag the .svg file directly onto the canvas. Figma imports it as a vector element. You can scale it with the selection tool (hold Shift to maintain proportions) to any size without quality loss. To change the colour of the modules, select the SVG, enter the component, and change the fill of the path elements.

Canva (Pro)

Use "Uploads" to upload the SVG file, then drag it into your design. Canva Pro supports SVG upload. If you're on Canva Free, upload a high-resolution PNG instead (generate at 2000px wide on QRcrisp for best results).

Inkscape

Open directly (File > Open). Inkscape is free and open-source and handles SVG natively. You can modify the code's colours, add a border, or combine it with other vector elements. Inkscape can then export to PDF for print.

Adobe Illustrator

File > Place, then select the SVG. It imports as a live vector. Scale freely. If you need to modify individual elements, use Object > Expand to convert the SVG to native Illustrator paths.

File size note

SVG QR codes are generally small files. A typical URL QR code at Error Correction Level M might be 5-15 KB as an SVG. The file size relates to the number of path elements (which relates to the amount of data in the code and the error correction level), not the display size. A Version 10 code at Error Correction H might be 20-40 KB. These are trivial file sizes for any purpose.

Using SVG when adding a logo

If you're adding a logo to your QR code (see the full guide on adding a logo to a QR code), starting with the SVG version is strongly recommended. You'll be compositing two vector elements in your design tool, both of which scale perfectly. The result is cleaner than trying to do the same thing with PNGs.

For everything related to QR code generation, QRcrisp offers SVG downloads for all supported code types: URL, WiFi, vCard, Email, SMS, Phone, Text, Geo, Calendar, and Crypto. No signup, no watermark. Just generate and download. The generator is on the homepage.