# QR — Examples

> Concrete QR walk-throughs: URL with logo, WiFi login, vCard contact card, styled code with a gradient, transparent SVG export, and text from a file.

Source: https://www.jpkc.com/db/en/tools/qr/examples/

Back to overview: [QR](https://www.jpkc.com/db/en/tools/qr/) · Open the live tool: [www.jpkc.com/tools/qr/](https://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](https://www.jpkc.com/db/en/tools/qr/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](https://www.jpkc.com/db/en/tools/qr/tips/#always-test-on-a-real-device)).

## 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](https://www.jpkc.com/db/en/tools/qr/tips/#contrast-decides-whether-it-scans).

## 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](https://www.jpkc.com/db/en/tools/qr/manual/), strategic notes and pitfalls in the [tips & tricks](https://www.jpkc.com/db/en/tools/qr/tips/). To get started right away, use the [tool](https://www.jpkc.com/tools/qr/).