Генератор QR-кодів онлайн (SVG)

Де це потрібно

QR-код - це місток між екраном і телефоном: посилання на подію, адреса профілю, Wi-Fi у офісі, реквізити для оплати. Для розробника найчастіший випадок - згенерувати код у листі, на квитку або в PDF.

Результат тут - SVG, а не PNG. Векторна графіка масштабується без розмиття: той самий файл однаково добре виглядає і в листі, і на банері.

Формати вмісту

QR-код зберігає просто текст, але телефони розпізнають кілька усталених форматів:

https://laravelukraine.com          → відкриє посилання
mailto:hello@example.com            → лист
tel:+380441234567                   → дзвінок
WIFI:T:WPA;S:МояМережа;P:пароль;;   → підключення до Wi-Fi
BEGIN:VCARD...END:VCARD             → контакт

Скільки даних вміщується

Максимум - 2953 байти при мінімальному рівні корекції помилок. Але це теоретична межа: код на дві тисячі символів стає настільки щільним, що телефон його не прочитає з екрана.

Практичне правило: чим коротший вміст, тим надійніше сканується. Довге посилання з UTM-мітками краще спершу скоротити.

Окремо про українську: рахуються байти, а не символи. Кирилична літера в UTF-8 займає два байти, тож 100 символів українською - це 200 байтів. Цей інструмент кодує в UTF-8 явно, тому кирилиця працює; бібліотеки за замовчуванням часто беруть ISO-8859-1 і падають на першій же літері «і».

Корекція помилок

QR-код містить надлишкові дані, тому читається, навіть коли частину пошкоджено. Рівнів чотири - від 7% до 30% відновлюваних втрат.

Це та сама властивість, завдяки якій у центр коду можна покласти логотип: він затуляє частину модулів, а корекція їх відновлює. Ціна - розмір: чим вищий рівень, тим щільніша сітка при тому самому вмісті.

У Laravel

composer require bacon/bacon-qr-code

use BaconQrCode\Renderer\ImageRenderer;
use BaconQrCode\Renderer\Image\SvgImageBackEnd;
use BaconQrCode\Renderer\RendererStyle\RendererStyle;
use BaconQrCode\Writer;

$writer = new Writer(new ImageRenderer(new RendererStyle(300), new SvgImageBackEnd));

// UTF-8 обов'язково: без нього кирилиця кине виняток
$svg = $writer->writeString('https://laravelukraine.com', 'UTF-8');

// У листі: вбудувати SVG як data URI, бо зовнішні картинки
// поштові клієнти часто блокують
$dataUri = 'data:image/svg+xml;base64,' . base64_encode($svg);

Для PNG знадобиться Imagick або GD - SVG обходиться без розширень взагалі, і це ще одна причина віддавати саме його.

Щоб вбудувати готовий SVG у лист чи CSS, його треба перевести в data URI.

QR-код

Поділитись