QR — Examples

Back to overview: QR · Open the live tool: www.jpkc.com/tools/qr/

This page shows the QR code generator through concrete walk-throughs. How the individual functions work in detail is covered in the manual.

Example 1: URL with a logo in the center

Goal: a scannable link to your own site, branded with a logo.

1. Set Content Type to URL and enter the address, e.g. jpkc.com (the tool adds https:// itself).
2. In the Center Image / Logo card, upload your logo (PNG or SVG). Note: once the logo is set, error correction jumps to High (H) automatically.
3. Set Image Size to about 30–40% to taste; leave Hide dots behind image on so the logo stands out cleanly.
4. Download as SVG.

Result: a branded QR code that scans reliably even with the center covered, thanks to level H. Always test with a real phone before printing (see Tips).

Example 2: A scannable WiFi login

Goal: let guests join the WiFi without typing the password.

1. Set Content Type to WiFi Network.
2. Fill in Network Name (SSID) and Password, leave Security on WPA/WPA2 (correct for most networks).
3. If the network is hidden, switch on Hidden network.
4. Set Margin to a value greater than 0 so a light border remains, and download as PNG for printing.

Result: scanning offers to connect directly on most phones. The tool encodes the format WIFI:S:…;T:WPA;P:…;H:false;; and escapes special characters in the SSID and password.

Example 3: A contact card (vCard) for a business card

Goal: encode phone, mail and website as a digital business card.

1. Set Content Type to vCard (Contact).
2. Fill in First Name, Last Name, Organization, Phone, Email and Website — empty fields are omitted.
3. Raise Error Correction to Q or H, because a vCard holds more data than a short URL and the code becomes denser.
4. Export as SVG so it scales losslessly for print.

Result: a QR code that offers to create a contact when scanned. Internally it produces a vCard 3.0 with the lines N:, FN:, ORG:, TEL:, EMAIL: and URL:.

Example 4: A styled code with a gradient and rounded dots

Goal: a code that matches your brand — not the default black-and-white.

1. Enter content as in Example 1 (e.g. a campaign URL).
2. In Dots Options, set the style to Rounded or Classy rounded.
3. Switch the dots' color block to Gradient, choose Color 1 and Color 2 in your brand colors, pick Linear and a Rotation of, say, 45°.
4. In Corners Square Options, set the style to Extra rounded — for softer corner markers.
5. Check the live preview and download.

Result: a colorful, rounded code in your brand look. With a gradient, watch the contrast against the background — more on that in the Tips.

Example 5: A transparent background for print

Goal: place a code on a colored or printed surface.

1. Enter your content.
2. In Background Options, switch on Transparent background — the background area disappears.
3. Choose a dot color that clearly contrasts with the eventual surface (dark dots on a light background).
4. Export as SVG, PNG or WebP — not JPEG, because JPEG has no transparency and fills the background.

Result: a code with a transparent background that embeds cleanly into a layout. Still plan a calm, sufficiently contrasting area around the code (quiet zone).

Example 6: Encode a long text from a file and copy it as SVG

Goal: pack a longer text from a .txt file into a code and reuse it directly.

1. Leave Content Type on Plain Text (the default).
2. Click Upload .txt and pick the text file — its content lands in the text area.
3. Optionally lower Error Correction to L if the text is long and the code would otherwise become very dense (more data = larger version).
4. Click Copy SVG to put the SVG markup straight on the clipboard.

Result: you can paste the SVG immediately into an HTML page, a design file or a document without saving a file first. For very long content, check the maximum capacity in the tool's Reference tab.

---

More on the individual functions is in the manual, strategic notes and pitfalls in the tips & tricks. To get started right away, use the tool.