QR-код в SVG: векторный формат для печати и дизайна

QR-код в SVG решает одну проблему, на которой регулярно горят дизайнеры и типографии: один и тот же код нужно поставить и на визитку 50×90 мм, и на баннер 6×3 метра, без размытых краёв. PNG для этого не годится — растровая картинка при увеличении превращается в лесенку, и сканер на большом носителе спотыкается о рваные модули. SVG хранит код не как сетку точек, а как математические кривые: контур каждого чёрного квадрата задан формулой, поэтому при любом масштабе он остаётся резким, а файл весит копейки — 2–6 КБ против сотен килобайт у PNG высокого разрешения. Разберём, что такое вектор простыми словами, чем SVG-QR отличается от PNG, как скачать его в QRkoder, открыть и перекрасить в Illustrator, CorelDRAW, Inkscape или Figma и какой формат отдавать в печать.

Что такое SVG и вектор простыми словами

Любое изображение хранится одним из двух способов: как набор точек или как набор формул. В этом и разница растра и вектора.

Растр (PNG, JPG) — сетка цветных пикселей, как мозаика. Картинка 300×300 точек хранит ровно 90 000 квадратиков. В исходном размере всё чётко, но растяните вдвое — и каждый пиксель станет квадратом 2×2, края «зубчатые», а при сглаживании появляется размытие: пиксели уже зафиксированы, лишнего взять неоткуда.

Вектор (SVG, EPS, PDF) хранит не точки, а описание фигур: «нарисуй прямоугольник от X1,Y1 до X2,Y2, залей чёрным». Это формула, а не картинка. При увеличении программа пересчитывает координаты под новый размер и заново рисует чёткие контуры — хоть в спичечный коробок, хоть на стену дома. Качество не теряется: геометрия считается заново под любой размер.

SVG (Scalable Vector Graphics) — открытый формат векторной графики на основе XML, по сути текстовый файл, который браузер и графические редакторы понимают напрямую. Подробнее про устройство формата — в термине «SVG-формат». Для QR-кода вектор подходит идеально: код состоит из строго прямоугольных модулей, а прямоугольник — простейшая геометрия для векторного описания, поэтому QR в SVG получается компактным и резким на любом носителе.

Чем SVG-QR отличается от PNG: масштабирование без потери качества

Главное отличие — что происходит при изменении размера; у растра и вектора оно противоположное. У вас PNG QR-кода 500×500 пикселей. На визитке (20×20 мм при 300 DPI) этого впритык хватает, но дизайнер ставит тот же файл на афишу А1, где код должен быть 200×200 мм. Программа растягивает 500 пикселей на площадь в десять раз больше — каждый пиксель превращается в размытый квадрат, границы модулей «плывут», и часть сканеров код не берёт. Чтобы PNG был резким на афише, его пришлось бы заранее сгенерировать в 2400×2400 пикселей — файл на сотни килобайт, и под каждый носитель свой.

SVG этой проблемы лишён в принципе. Один и тот же векторный файл ставится и на визитку, и на афишу, и на баннер — программа пересчитывает кривые под физический размер, и края всегда резкие. Один SVG закрывает весь диапазон от иконки 16×16 пикселей до вывески на фасаде. Плюс вес — векторный QR мал (2–6 КБ) при любом размере, тогда как растровый в высоком разрешении весит 200–400 КБ.

Почему для печати и больших носителей нужен именно вектор

В печати всё упирается в разрешение — количество точек на дюйм, DPI. Стандарт качественной полиграфии — 300 DPI. Чтобы растровый QR был резким, в нём должно быть достаточно пикселей под физический размер по формуле «размер в дюймах × 300». Про связь размера и читаемости — в термине «размер печати QR». Посчитаем для PNG при 300 DPI:

• QR на визитке 20×20 мм — 0,79 дюйма, нужно 236×236 пикселей. PNG 500×500 справляется с запасом.
• QR на листовке А5, 40×40 мм — 1,57 дюйма, нужно 472×472 пикселя. Тот же PNG 500×500 уже на пределе.
• QR на плакате А1, 200×200 мм — 7,87 дюйма, нужно 2362×2362 пикселя. PNG 500×500 даст мыло.
• QR на баннере 1×1 метр — печать идёт на 72–150 DPI из-за расстояния просмотра, но даже при 100 DPI это 3937×3937 пикселей и растр весит мегабайты.

С вектором эта арифметика не нужна. У SVG нет «разрешения» и фиксированного числа пикселей: когда RIP-процессор печатной машины или плоттер выводят SVG-код на носитель, они рассчитывают кривые под физический размер прямо в момент печати. Один файл одинаково годится и для визитки, и для шестиметрового баннера на фасаде — поэтому типографии и наружная реклама просят макеты в векторе.

Как скачать QR в SVG в QRkoder: пошагово

Генератор QR кодов в SVG в QRkoder работает в браузере, регистрация для базового экспорта не нужна, весь путь — пара минут.

1. Откройте конструктор. На app.qrkoder.ru выберите тип кода — ссылка, текст, vCard, Wi-Fi, СБП. Вектор доступен для любого QR.
2. Введите данные. Вставьте ссылку или заполните поля — код в превью пересобирается сразу, это уже вектор.
3. Настройте дизайн. Выберите цвет модулей и фона, форму точек, добавьте логотип в центр — настройки сохранятся в SVG отдельными элементами и потом правятся в редакторе.
4. Выставьте уровень коррекции ошибок. Для печати и кода с логотипом ставьте H (30%): код остаётся читаемым, даже если часть закрыта логотипом. Уровень зашит в структуру модулей.
5. Нажмите «Скачать» и выберите формат SVG. В списке рядом с PNG будет SVG, файл скачается за секунду и весит 2–6 КБ.
6. Проверьте файл. Перетащите SVG в окно Chrome — код должен отображаться чётко. Отсканируйте его телефоном до отправки в печать.

Динамический QR тоже экспортируется в SVG — вектор кодирует короткий редирект, а куда он ведёт, вы меняете в кабинете, не трогая напечатанный файл. Удобно, когда ссылка может смениться после печати тиража.

Как открыть и редактировать SVG-QR: Illustrator, CorelDRAW, Inkscape, Figma

SVG открывается в любом векторном редакторе. Ходовых у дизайнеров и типографий четыре.

Adobe Illustrator — стандарт дизайна и допечатки. SVG открывается через «Файл → Открыть» или перетаскиванием, каждый модуль — отдельный объект: выделяете все чёрные квадраты и перекрашиваете разом. Illustrator с версии CC 2018 корректно читает SVG и экспортирует для типографии в EPS или PDF. CorelDRAW популярен в российских рекламно-производственных типографиях: SVG импортируется через «Файл → Импорт» (стабильно с версии 2017), код становится набором кривых, которые Corel печатает на плоттерах и пересохраняет в родной CDR.

Inkscape (бесплатно) — векторный редактор с открытым кодом, для которого SVG родной формат. Лучший вариант без платного софта: открыли, перекрасили, добавили логотип, экспортировали в EPS или PDF без рубля за лицензию. Figma — онлайн-инструмент: SVG-QR перетаскивается на холст и становится векторным фреймом, модули перекрашиваются, размер меняется без потери качества. Для допечатки она не предназначена (нет CMYK и меток реза), но для цифровых макетов, баннеров и прототипов удобна.

Перекрасить модули, добавить логотип и сохранить коррекцию ошибок

Раз QR в SVG — набор векторных контуров, его легко править под фирменный стиль. Но есть правила, без которых код легко сделать нечитаемым.

Перекраска модулей. В Illustrator или Inkscape выделяете все тёмные элементы (в Illustrator удобно через «Выделение → По общему признаку → Цвет заливки») и задаёте новый цвет. Критичное правило одно: высокий контраст между модулями и фоном. Тёмные модули на светлом фоне работают; светлый код на тёмном рискован — многие сканеры ждут именно тёмное на светлом. Коэффициент контраста держите не ниже 4:1, лучше 7:1.

Добавление логотипа. Логотип ставится в центр поверх модулей, безопасная зона — не больше 25–30% площади при уровне H. Импортируете логотип (лучше в SVG, чтобы весь файл остался вектором), масштабируете под центр, при необходимости подкладываете белую плашку. Он закрывает часть модулей — отсюда требование высокого уровня коррекции.

Сохранение коррекции ошибок (ECC). Частая ловушка. Уровень коррекции — это избыточность, зашитая в сами модули ещё на этапе генерации: L восстанавливает до 7% повреждений, M — 15%, Q — 25%, H — 30%. В редакторе ECC не «настраивается», он уже внутри геометрии — зато можно случайно сломать: удалив или перекрасив «в тон фона» часть модулей, вы съедаете запас избыточности. Поэтому правило: генерируйте код сразу с нужным уровнем (для печати с логотипом — H), а в редакторе перекрашивайте только целиком, не трогая отдельные модули, и всегда сканируйте результат перед печатью.

«Самая частая причина, по которой принесённый клиентом QR не сканируется в печати, — дизайнер в Illustrator вручную поудалял "лишние" чёрные квадратики по краям, приняв их за мусор. Это служебные модули и зона коррекции. Берём исходный SVG из генератора, перекрашиваем целиком — и код читается с первого раза», — препресс-специалист типографии, Москва.

SVG vs EPS vs PDF: какой вектор отдавать в типографию

Все три векторные, и QR-код в любом из них будет резким, но у типографий есть предпочтения — важно отдать формат, который примут без вопросов.

SVG — формат веба и современных редакторов, идеален для экрана и как универсальный мастер-исходник. Часть типографий принимает его напрямую, но консервативные допечатные процессы заточены под форматы Adobe, поэтому SVG лучше держать как исходник для EPS или PDF.

EPS (Encapsulated PostScript) — ветеран допечатки и самый «безопасный» формат для любой типографии: его понимают и старые RIP-процессоры, и плоттеры. Если типография просит «вектор» без уточнений или называет EPS — отдавайте его.

PDF — универсальный формат для печати. PDF/X (печатный подвид) — фактический стандарт обмена макетами: несёт вектор, шрифты, цветовой профиль и метки реза. Для готового макета визитки или упаковки с QR внутри отдавайте PDF.

Практическое правило: храните мастер-файл QR в SVG, а в типографию отдавайте то, что она просит — чаще EPS для отдельного кода или PDF для целого макета. Конвертировать QR в SVG, EPS или PDF друг из друга — это пересохранение в любом редакторе, без потери качества.

Встроить SVG-QR в сайт: inline или img, вес и кэш

На сайте у векторного QR два способа размещения, и выбор влияет на кэш и возможность стилизовать код.

Через тег <img> — самый простой способ: <img src="qr.svg" alt="QR-код на сайт">. Браузер грузит SVG как обычную картинку, файл кэшируется отдельно — оптимально, когда один QR используется на многих страницах. Минус — из CSS страницы внутрь такого SVG не достучаться, перекрасить модули на лету нельзя.

Inline-вставка <svg> — содержимое SVG вставляется прямо в HTML-разметку, и тогда кодом можно управлять из CSS и JavaScript: перекрасить под тему, анимировать. Минус — SVG не кэшируется отдельно. Для одного-двух кодов на лендинге это незаметно (2–6 КБ), для кода на каждой странице каталога лучше <img> с отдельным кэшем.

Когда SVG не нужен: экран, соцсети, мессенджеры

Вектор — не самоцель. Есть сценарии, где SVG избыточен, а PNG надёжнее.

Соцсети и мессенджеры. ВКонтакте, Telegram, WhatsApp, Instagram в большинстве случаев не принимают SVG в постах и сторис — они ждут растр (PNG, JPG). Если выкладываете QR в пост или отправляете клиенту, экспортируйте PNG: код смотрят на экране телефона в фиксированном размере.

Экранные превью и e-mail. В письме, в PDF-презентации, на слайде PNG достаточного разрешения работает безотказно. SVG в e-mail многие клиенты не отображают из соображений безопасности, для рассылок берите PNG. Это же касается быстрых задач: скинуть код в чат, вставить в Word, распечатать лист.

Правило выбора простое: SVG — когда код масштабируют или печатают на разных носителях (визитки, упаковка, наружка, дизайн), PNG — когда код смотрят на экране в одном размере (соцсети, мессенджеры, письма).

Частые проблемы с QR в SVG и как их избежать

SVG-QR обычно беспроблемен, но три ошибки встречаются регулярно — и все ведут к тому, что «вектор» оказывается не таким, как ждали.

1. Внутри «SVG» оказался растр-подложка. Самая коварная. Некоторые генераторы вшивают в SVG растровую картинку QR (PNG внутри векторной обёртки): файл называется .svg, но при увеличении модули размываются. Проверка: откройте файл в «Блокноте» — теги <rect> или <path> с координатами означают настоящий вектор; длинная строка <image ... base64,...> — растр. QRkoder отдаёт честный вектор из rect-модулей, без подложек.

2. Шрифты не переведены в кривые. Если рядом с QR в макете есть подпись и текст оставлен текстом, а не контурами, типография может не иметь вашего шрифта — и подпись «поедет» на другой. Перед печатью переводите весь текст в кривые: в Illustrator «Текст → Преобразовать в кривые» (Shift+Ctrl+O), в CorelDRAW «Объект → Преобразовать в кривую» (Ctrl+Q), в Inkscape «Контур → Оконтурить объект». Самого QR это не касается, но касается подписей в макете.

3. Огромный путь и лишние узлы. Иногда QR в SVG сохраняется не как набор прямоугольников, а как один гигантский <path> с тысячами узлов — такой файл тяжелее, медленнее рендерится и хуже редактируется. Это бывает после сторонних конвертеров. Если файл подозрительно тяжёлый для QR (десятки-сотни КБ вместо 2–6 КБ), дело в раздутом пути.

Общий вывод: берите SVG прямо из генератора QR, а не получайте автотрассировкой из PNG — сгенерированный вектор всегда чище и легче восстановленного из растра. Если конвертируете чужой PNG в вектор, результат трассировки требует ручной чистки и проверки сканированием.

Готовы скачать QR в SVG?

Векторный QR-код — страховка от размытого кода в печати и удобный исходник для дизайна. SVG масштабируется от иконки до фасадной вывески без потери резкости, весит копейки (2–6 КБ), открывается в Illustrator, CorelDRAW, Inkscape и Figma, а в типографию из него легко сделать EPS или PDF. Генерируйте код сразу с уровнем коррекции H, держите мастер-файл в SVG, а под цифровые каналы экспортируйте PNG. Сколько миллиметров отвести коду — в смежном материале «Размер QR-кода для печати».

Частые вопросы