QRsvg

How to Create a QR Code: Step-by-Step Guide for Beginners

Learn how to create a QR code in minutes: pick a content type, enter your data, style it, download SVG or PNG, and test it on real phones before printing.

9 min readUpdated

What a QR code actually contains

A QR code is a picture of text. The scanner reads the black and white modules, decodes them into a string of characters, and then the phone decides what to do with that string. If it starts with https:// the phone offers to open a browser; if it starts with WIFI: it offers to join a network; if it starts with BEGIN:VCARD it offers to save a contact. Everything else about a QR code (colors, shapes, a logo in the middle) is decoration on top of that string.

That is why the first decision is not how the code looks but what it stores. The free generator at [qrsvg.app](/) supports eleven content types: URL, plain text, Wi-Fi, vCard, email, SMS, phone number, WhatsApp, geo location, calendar event, and crypto address. Each one produces a differently formatted string, and picking the right one is what makes the phone show the right action instead of a wall of text.

One more thing worth knowing before you start: the longer the string, the denser the code. A 30-character link fits in a 25 by 25 module grid (QR version 2). A 300-character vCard needs roughly 57 by 57 (version 10) or more. Denser codes need to be printed larger and scanned from closer, so keep the payload short whenever you can.

Step 1: Choose the content type

Open the generator and pick the tab that matches your goal. For most people that is URL: a link to a website, a menu, a form, a video, or a PDF. If you want the phone to do something other than open a link, choose the dedicated type instead of pasting text and hoping the phone recognizes it.

  • URL: opens a web page. Use for websites, landing pages, PDFs, app store links, forms, and payment pages.
  • Wi-Fi: joins a network without typing the password. See the Wi-Fi QR code guide.
  • vCard: saves a contact card with name, phone, email, and address. See the vCard business card guide.
  • Email, SMS, phone, WhatsApp: pre-fills a message or starts a call to a number you choose.
  • Geo location: opens the map app at a set of coordinates, useful for event venues and parking.
  • Calendar event: adds an event with title, start, end, and location to the phone's calendar.
  • Text: shows raw text on screen. Use only when none of the above fits, such as a serial number or a coupon code.

Step 2: Enter the data and keep it short

Type or paste the content into the form. For a URL, include the full scheme (https://) so every phone treats it as a link rather than text. Check for typos twice: a QR code is static, so if the link is wrong you will have to reprint everything. Trailing spaces and smart quotes copied from a document are the most common causes of a code that scans but leads nowhere.

Shorter data is better for two reasons. First, density: at the default error correction level M, QR version 3 (29 by 29 modules) holds up to 53 bytes, version 4 (33 by 33) holds 78, and version 10 (57 by 57) holds 213. A long tracking URL with UTM parameters can easily push you from version 3 to version 6 or 7, which is harder to scan from a poster or a small label. Second, editability: if you think the destination might change, a dynamic QR code that redirects through a short link keeps the printed code small and lets you change where it points later.

The preview updates as you type, so you can watch the grid grow as you add characters. If the code looks noticeably busier than a typical one, trim the data before moving on.

Step 3: Style it without breaking scannability

Styling is where QR codes become part of a brand instead of a black square stuck onto a design. On qrsvg.app you can change the module shape (square, rounded, dots, classy, classy-rounded, diamond, star, fluid), the three corner eyes (frame shapes like square, rounded, circle, leaf, shield and ball shapes like square, rounded, circle, leaf, diamond), and the fill (solid color, linear gradient, or radial gradient), with an optional transparent background. Design presets give you a coherent starting point in one click.

The rules that keep a styled code readable are simple. Keep strong contrast between modules and background; dark modules on a light background is what every scanner is tuned for, and a light code on a dark background works but is less reliable on older phones. Avoid gradients that fade to a color close to the background at one end. Keep the quiet zone, the empty border around the code, at the default of 2 modules or more; the QR specification asks for 4, and 0 is only safe when the code sits on a plain background with nothing nearby.

If you add a logo, the generator raises error correction to at least level Q (25% of the code can be damaged and still decode) and lets you set the logo between 10% and 35% of the width, with an optional knockout that removes the modules behind it and adds padding. Stay under about 25% for a code you plan to print small. The full details are in the QR code with logo guide and in error correction explained.

Step 4: Download the right format

The export step is where many otherwise good codes go wrong. Download SVG whenever the code is going to be printed or placed in a design tool: it is a vector, so it stays sharp at any size, and the SVG from qrsvg.app is a single merged path with no inline styles or ids, which opens cleanly in Illustrator, Figma, Inkscape, Affinity, and InDesign. Download PNG when the destination is a website, an email, a social post, or a CMS that does not accept SVG uploads. JPEG, WebP, and PDF are also available; PDF is handy when a print shop asks for a print-ready file and does not want a loose SVG.

For PNG, export at least 1024 pixels for anything that will be printed and at least 2 times the display size for screens. A blurry, upscaled PNG is the single most common reason a code that worked on your monitor fails on a flyer. The trade-offs are covered in depth in SVG vs PNG QR codes and the physical sizing rules in the size and print guidelines.

Step 5: Test with several phones before you print

Scan the code on your own screen first, then print a test page at the final size and scan that. Use at least two different phones, ideally one iPhone and one Android, since their camera apps decode slightly differently. The native iOS Camera app (iOS 11 and later) and the native Android camera (Android 9 or 10 and later depending on the manufacturer) are what most people will use; Google Lens is a good third check.

Test from the distance a real user will stand at. A rule of thumb is that the code should be at least one tenth of the scanning distance: a code scanned from 1 metre should be at least 10 cm wide, and a business card scanned from 20 cm needs about 2 cm. Test under the lighting where the code will live, including glare from glossy lamination and dim restaurant tables. Finally, open the destination and confirm it is the right page on mobile, not only that the code decodes.

Mistakes that make QR codes fail

Most failures come from a handful of avoidable causes. Check this list before sending anything to print.

  • Inverting colors (light modules on dark background) on a code that will also be small or printed on textured paper.
  • Cropping away the quiet zone or placing text and borders right against the edge of the code.
  • Stretching the code to a non-square aspect ratio in a layout tool.
  • A logo that covers more than 30% of the code, or a logo on a code that uses level L (7%) error correction.
  • Printing a PNG that was exported at screen size, then scaled up for a poster.
  • Linking to a page that is not mobile friendly, requires login, or is behind a firewall your visitors cannot reach.
  • Forgetting to add a short human-readable line next to the code (for example the SSID or the URL) as a fallback.

Beyond a single code

Once you have one working code, the same process scales. If you need hundreds of codes, for example one per table, product, or asset tag, the bulk generator takes a CSV and returns a ZIP of files. If you want to generate codes from your own software, the public API returns an SVG for a request like GET https://qrsvg.app/api/qr?data=https://example.com&format=svg&size=512, rate limited to 60 requests per minute per IP; see the API docs and the developer guide. A free account is optional and adds saved codes plus dynamic QR codes with scan analytics by time, country, city, device, OS, and browser. Nothing in the basic flow above requires signing up.

How to create a QR code

  1. 1

    Pick the content type

    Open qrsvg.app and select the tab that matches what the phone should do: URL, text, Wi-Fi, vCard, email, SMS, phone, WhatsApp, geo, event, or crypto.

  2. 2

    Enter the data

    Type or paste the content. For links include https:// and remove tracking parameters you do not need so the code stays small.

  3. 3

    Style the code

    Choose module and eye shapes, a color or gradient, and optionally a logo. Keep high contrast and a quiet zone of at least 2 modules.

  4. 4

    Set error correction

    Leave level M for plain codes; use Q or H when adding a logo or when the code will be printed on rough surfaces.

  5. 5

    Download the right format

    Export SVG for print and design tools, PNG at 1024 px or more for web, email and social, or PDF for print shops.

  6. 6

    Test on real phones

    Scan the screen and a printed proof at final size with at least an iPhone and an Android phone, from the real distance and lighting.

Frequently asked questions

Is it free to create a QR code on qrsvg.app?
Yes. Generating and downloading QR codes in SVG, PNG, JPEG, WebP, or PDF is free and does not require an account. An optional free account adds saved codes and dynamic QR codes with analytics.
Do QR codes expire?
A static QR code never expires because the data is stored in the image itself. A dynamic code keeps working as long as the redirect service behind it is running.
What is the best file format for a QR code?
SVG for anything printed or placed in a design tool, because it stays sharp at any size. PNG for websites, email, and social media where SVG is not accepted.
How small can I print a QR code?
About 2 cm (20 mm) is a safe minimum for a short URL scanned from hand distance. Denser codes with long content or a logo need more; see the size and print guidelines.
Can I change the link after printing?
Only if you used a dynamic QR code, which points to a short redirect link whose destination you can edit. A static code stores the final URL and cannot be changed.

Free, no signup

Make this QR code now

Clean SVG, PNG or PDF in seconds. Style it, add a logo, download.

Create your QR code now