Штрих-код в векторе: SVG из генератора и что с ним делать

Дизайнер или типография просят штрих-код в векторе. Для EAN-13 и Code128 это значит, что штрихи описаны контурами, а не пикселями, и файл остается резким при любом размере. Такой файл отдает наш генератор штрих-кодов SVG: откройте генератор штрих-кодов EAN-13, вставьте номера, выберите «SVG по одному» или «SVG листами» и скачайте. Артикулы с буквами и дефисами делает генератор Code128 той же формы.

В типографию SVG из генератора уходит почти готовым. Почти, потому что цифры под штрихами записаны текстом, и перед сдачей макета их переводят в кривые. Это одна команда редактора.

Что внутри SVG из генератора штрих-кодов

Откройте скачанный файл блокнотом. SVG это текст: тег svg задает размер в сантиметрах и систему координат, за ним белый прямоугольник фона на весь файл, дальше штрихи, каждый отдельным прямоугольником, и в конце цифры. Три фрагмента из файла EAN-13 шириной 3,7 см выглядят так (в файле они записаны одной строкой, прямоугольник фона пропущен, высота сокращена до сотых).

<svg xmlns="http://www.w3.org/2000/svg" width="3.7cm" height="2.57cm" viewBox="0 0 113 78.58">
<rect x="11" y="0" width="1" height="74.24" fill="#000000"/>
<text x="35" y="78" font-family="Helvetica, Arial, sans-serif" font-size="11.5" text-anchor="middle" fill="#000000">600000</text>

Единица координат это модуль, то есть самый узкий штрих. У EAN-13 в ширину 113 модулей: 95 на штрихи и промежутки, 11 на светлое поле слева и 7 на поле справа. При ширине файла 3,7 см модуль выходит 0,327 мм. Прямоугольник штриха уже контур, трассировать его не нужно. В файле одного кода 30 прямоугольников штрихов и 3 текстовых объекта с цифрами, весит он 2,4 КБ.

Файл Code128 устроен так же, только его ширина в модулях зависит от строки. INV-000123 это 123 модуля данных и по 10 модулей светлого поля с каждой стороны, всего 143. При ширине 5 см высота выходит 2 см: генератор всегда делает высоту 40% ширины. Под штрихами один текстовый объект со значением.

«SVG листами» дает лист A4 с тем же набором: штрихи прямоугольниками, цифры и подписи под кодами текстом, метки реза одним контуром. При ширине 3,7 см на лист встает 18 кодов с подписями и 21 без подписей. Для типографии удобнее поштучные файлы, потому что макет этикетки верстают вокруг одного кода.

Цифры под штрихами остаются текстом

«В кривых» означает два условия: графика записана контурами, и текстовых объектов в файле нет. Первое штрихи выполняют сразу. Второе не выполнено, потому что цифры под EAN-13 и значение под Code128 генератор пишет текстом со шрифтом Helvetica. Если на компьютере типографии такого шрифта нет, программа подставит другой, и цифры изменят ширину и встанут не так, как в макете.

У QR-кода без подписи файл выходит в кривых целиком. Со штрих-кодом так не получится: убрать цифры в форме нельзя, галочки «без цифр» в ней нет. Перевод текста в контуры остается за вами.

В Illustrator выделите цифры и примените Create Outlines (Shift+Ctrl+O), в CorelDRAW Convert To Curves (Ctrl+Q), в бесплатном Inkscape Object to Path в меню Path. Те же команды и проверку файла мы описали в статье QR-код в кривых, для штрих-кода они не отличаются.

Проверить файл можно без редактора. Откройте SVG блокнотом и поищите «<text» вместе с угловой скобкой, так начинается каждый текстовый объект. Нашлось, значит текст еще есть. В файле из генератора он найдется всегда, в файле после редактора не должен.

PNG из генератора растровый, около 1200 точек по ширине. Его место карточка товара, в печатный макет он не годится.

Штрих-код без фона

Белый фон в SVG это первый прямоугольник на весь файл с заливкой #ffffff. Галочка «Прозрачный фон» в блоке «Тонкая настройка» под шагом 2 убирает его. В файле остаются штрихи и цифры, и код ложится на слой макета без своей подложки, на цветную этикетку или на светлый участок упаковки. Подсказка под галочкой предупреждает: «Код ляжет прямо на макет, поэтому под кодом нужен светлый фон. В PDF это цвет бумаги.»

Под кодом нужен светлый фон: сервер при прозрачном фоне проверяет контраст цвета штрихов с белым, то есть рассчитывает на белую или близкую к ней подложку. Цвет штрихов оставьте черным или темным и в редакторе не перекрашивайте, потому что лазерный сканер не видит красный, оранжевый и желтый.

Галочка общая на все три формата. В PDF подложки под кодом тоже не будет, в PNG прозрачность записана в самом файле.

Минимальный размер штрих-кода EAN-13 для кассы

Для кассы делайте EAN-13 не уже 3 см по ширине файла вместе со светлыми полями. GS1, организация, которая ведет стандарт товарных штрих-кодов, задает номинал: узкий штрих 0,330 мм, символ 37,29 мм в ширину и 22,85 мм в высоту штрихов. Уменьшать его разрешено до 80%, это 29,83 мм. Тот же номинал 0,330 мм и 22,85 мм стоит в ГОСТ на EAN, его цитирует инструкция Wildberries для продавцов.

В форме ширина EAN-13 задается от 2,9 до 7,5 см, по умолчанию 3,7 см. Высоту генератор считает сам и штрихи не укорачивает. Вот что получается при разной ширине:

Ширина 2,9 см в форме тоже есть, но это 78% номинала: годится для внутренних номеров на складе, где сканер настраиваете вы. Для розницы берите от 3 см. Ширина по умолчанию 3,7 см это 99,2% номинала, менять ее незачем. Wildberries требует узкий штрих не тоньше 0,330 мм, под это условие ширина 3,8 см. Остальные требования площадки собраны в статье штрих-код для Wildberries.

Высоту штрихов не режьте под низкую этикетку. GS1 не советует укорачивать штрихи без крайней нужды, потому что укороченный код хуже читается. Генератор держит пропорцию сам. Если масштабируете файл в редакторе, тяните за угол с сохранением пропорций и сверьте, что высота изменилась во столько же раз, во сколько ширина.

Светлые поля входят в файл: при 3,7 см слева 3,6 мм, справа 2,3 мм. Не обрезайте файл по штрихам и не придвигайте к нему рамку этикетки вплотную, поле это часть кода.

Code128: ширина зависит от длины строки

У EAN-13 всегда 13 цифр и 113 модулей. У Code128 число модулей растет с каждым знаком, и при одной ширине файла модуль получается тоньше. Генератор не выпускает модуль тоньше 0,25 мм: если строка не помещается, форма откажет и назовет строку и ширину, до которой ее надо увеличить. INV-000123 при 5 см дает модуль 0,350 мм, минимальная ширина для него 3,6 см. Строке из 30 цифр нужно не меньше 5,5 см. Чтобы держать у нее модуль 0,33 мм, как у EAN-13 на кассе, ширину придется поднять до 7,3 см.

Кириллицы в Code128 нет, в строку идут латиница, цифры и знаки. Русское название пишите подписью после «|»: на листе она напечатается под кодом текстом, а в поштучном файле уйдет в имя файла, например code128-0001 Стол складской.svg. Такие коды собирает генератор Code128 листами на A4.

Что проверить перед сдачей в типографию

• Откройте SVG в редакторе и выделите все. В списке объектов не должно остаться текста, только контуры. При проверке блокнотом «<text» не должно найтись.
• Масштабируйте код целиком и с сохранением пропорций. Ширину штрихов и промежутков по отдельности не меняйте.
• Светлые поля слева и справа на месте, рамка и текст этикетки к ним не прижаты.
• Штрихи черные или темные, подложка под кодом светлая и ровная, без градиента и фото.
• Попросите пробный оттиск и прочитайте его сканером кассы или приложением на телефоне. У товарного номера сравните цифры под штрихами с карточкой товара.

Если типография просит EPS или PDF вместо SVG, пересохраните файл в редакторе, геометрия штрихов при этом не меняется. Как собрать лист для офисного принтера и напечатать его в масштабе 100%, мы описали в статье как распечатать штрих-код онлайн. Требования к макетам наклеек и ценников собраны в базе знаний.

FAQ

Следующий шаг

Скачайте один код в режиме «SVG по одному» и откройте его блокнотом. Найдите «<text»: это цифры под штрихами. Переведите текст в контуры в Inkscape или Illustrator, сохраните и поищите «<text» снова. Если не нашлось, цифры в контурах, и первый пункт проверки перед сдачей закрыт. Если нашлось, текст был выделен не весь, повторите команду на оставшемся объекте.

Скачайте EAN-13 в SVG в генераторе штрих-кодов EAN-13: поштучно или листами, бесплатно и без регистрации.