SVG
Scalable Vector Graphics — векторный XML-формат графики, масштабируемый без потерь. QR-модули описываются как <rect> или <path>; файл 2–8 КБ бесконечно масштабируется без пикселизации. Идеал для передачи QR-кода в типографию.
Что такое SVG
SVG (Scalable Vector Graphics) — открытый XML-стандарт векторной графики, рекомендованный W3C с 2001 года. В отличие от растровых форматов (PNG, JPEG), SVG описывает изображение как набор геометрических объектов: прямоугольников, путей, окружностей. Браузер или принтер строит их заново при каждом отображении — поэтому SVG выглядит чётко при любом масштабе, от 100×100 пикселей на экране до 3000×3000 на рекламном щите.
Для QR-кода SVG — идеальное техническое решение. Каждый тёмный модуль кода записывается как элемент <rect> (прямоугольник) или объединяется в единый <path>. Типичный QR v5 в SVG весит 3–6 КБ независимо от отображаемого размера — это в разы меньше PNG при крупной печати. Загрузите этот файл в Illustrator, CorelDraw, Figma или любую другую программу — и передайте в типографию без потери качества.
Технически: как SVG описывает QR
Существует два подхода к разметке QR в SVG:
- Отдельные
<rect>на каждый модуль — XML-код читается и редактируется вручную, но файл крупнее (тысячи элементов для QR v20+). - Единый
<path>— все тёмные модули объединяются в один path-элемент. Файл компактнее (2–4 КБ), но ручное редактирование затруднено.
Пример минимального SVG для QR:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25">
<rect width="25" height="25" fill="#fff"/>
<path d="M0 0h7v7H0zm1 1v5h5V1zm..." fill="#000"/>
</svg>Атрибут viewBox задаёт внутреннюю систему координат; размер SVG при этом задаётся CSS или атрибутом width/height контейнера — именно поэтому один файл подходит для любого размера.
Преимущества и ограничения SVG для QR
Преимущества:
- Масштабируется без потерь: одинаково чётко на экране ноутбука и на рекламном баннере 3×6 м.
- Мало весит: 2–8 КБ против 50–500 КБ для растрового PNG того же качества при крупной печати.
- Редактируется в Figma, Illustrator, Inkscape: можно поменять цвет модулей, добавить логотип, изменить тихую зону.
- Поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge).
Ограничения:
- Не все email-клиенты отображают SVG: Gmail блокирует inline SVG, Outlook — полностью. Для рассылок используйте PNG.
- Мессенджеры (WhatsApp, Telegram, Viber) не принимают SVG как изображение — отправляйте как вложение-файл.
- Некоторые старые принтеры и ERP-системы не поддерживают SVG напрямую — требуется конвертация в PDF.
- При добавлении сложного логотипа с растровыми элементами SVG «потяжелеет» до 50–200 КБ.
Сравнение PNG vs SVG
| Критерий | PNG | SVG |
|---|---|---|
| Тип | Растровый | Векторный |
| Масштабирование | Пикселизация при увеличении | Без потерь, любой масштаб |
| Размер файла (QR 400 px) | 3–6 КБ | 3–6 КБ (аналогично) |
| Размер файла (QR для печати A1) | 5–25 МБ | 3–6 КБ (не меняется) |
| Email / мессенджеры | Везде | Ограниченно |
| Типография | Нужно высокое разрешение | Оптимально |
| Редактирование | Пиксельный редактор | Figma, Illustrator, Inkscape |
Практическое правило: скачивайте PNG для цифрового использования (сайт, мессенджеры, почта), SVG — когда передаёте QR дизайнеру или в типографию для печати.
Частые вопросы
Можно ли добавить логотип в SVG-версии QR?
Да, именно для этого SVG удобен: откройте файл в Figma или Inkscape, добавьте растровый или векторный логотип поверх центральной зоны кода. Размер логотипа — не более 20% площади QR. Обязательно используйте ECL-H или ECL-Q при генерации: они обеспечивают коррекцию ошибок до 25–30%, компенсируя перекрытые логотипом модули. После добавления логотипа обязательно протестируйте код на 5–7 разных сканерах.
Как уменьшить размер SVG-файла QR?
Основной способ — объединить все тёмные модули в единый <path> вместо тысяч отдельных <rect>. Это уменьшает файл с 30–100 КБ до 3–6 КБ. QRkoder делает это автоматически при экспорте в SVG. Если получили SVG от другого сервиса — прогоните через SVGO (онлайн или CLI): обычно даёт ещё 20–40% экономии без потери качества.
Поддерживают ли все браузеры SVG-изображения QR?
Все современные браузеры — Chrome 4+, Firefox 3+, Safari 3.2+, Edge — поддерживают SVG полностью. Internet Explorer 9+ поддерживает частично. Проблем с отображением QR в браузере через тег <img src="qr.svg"> или напрямую нет. Исключение: email-клиенты (особенно Gmail и Outlook) блокируют SVG в письмах по соображениям безопасности. Для email используйте PNG.
Можно ли открыть SVG в Inkscape и отредактировать цвет QR?
Да. Откройте SVG в Inkscape, выделите <path> с модулями QR (обычно один объект чёрного цвета) и поменяйте заливку на любой цвет. Аналогично — в Adobe Illustrator и Figma. Следите за контрастом: тёмные модули на светлом фоне должны иметь соотношение яркости не менее 4:1. Зелёный на белом — читается, светло-серый на белом — нет. После изменения цвета протестируйте код сканером.
Принимают ли типографии SVG напрямую?
Большинство современных типографий принимают SVG без проблем: Adobe InDesign, CorelDraw, Illustrator импортируют его нативно. Некоторые устаревшие системы (в особенности RIP-процессоры офсетной печати старше 2010 года) требуют конвертацию в PDF или EPS. Уточняйте у менеджера типографии. Универсальный вариант для передачи — экспортировать SVG в PDF через Illustrator: вектор сохраняется, совместимость максимальная.