Как стать автором
Обновить

Сказ о том как Bash и SVG спасли от рутины

Время на прочтение 4 мин
Количество просмотров 3.8K
Есть такой замечательный формат векторной графики — Scalable Vector Graphics, SVG. Чем же он такой замечательный? Ну например:
  1. SVG это открытый формат, он не является чьей-либо собственностью.
  2. SVG является подмножеством языка XML и, соответственно, он является текстовым.
  3. Прекрасно интегрируется с HTML и XHMTL.
  4. SVG совместим с CSS, что позволяет управлять отображением элементов с помощью таблиц стилей.
  5. В SVG текст остается текстом, благодаря этому документы SVG могут индексироваться поисковыми машинами, также пользователи могут выделять и копировать текст.


Мне особенно нравится третий пункт списка. Что особенно интересно, возможно не только встраивать SVG документы в HTML, но и наоборот, встраивать в SVG целые документы HTML или отдельные теги. Это позволяет создавать очень интересные вещи, недоступные для Flash и SilverLight.
Ниже небольшой пример встраивания HTML в SVG, habrahabr.ru находящийся внутри картины остается скроллируемым и кликабелным. К сожалению, не во всех браузерах это работает одинаково хорошо, в Firefox'е проблем не обнаружено, только при прокрутке несколько притормаживает.
Я очень надеюсь, что со временем появятся сайты активно использующие SVG, как мне кажется, у такого подхода будут преимущества перед технологиями Flash и SilverLight, например, появляется возможность использования CMS предназначенных для HTML, кроме того, такие сайты будут без проблем индексироваться поисковыми системами.

image

Но сейчас не об этом, сейчас о пункте номер 2. Когда я работал дизайнером в одной маленькой фирме, нам поступил заказ на две партии дисконтных карточек, по тысячи штук в каждой партии. Тираж для фирмы небольшой, но задача сильно осложнялась необходимостью нумерации карточек, кроме того, на каждой карточке должен был присутствовать штрих-код, соответствующий номеру.
Фирма сидела на Corel DRAW x3. Средства автоматизации в нем присутствуют, и, сделать карточки с номерами — не проблема. Но вот как сделать штрих-коды по этому номеру никто из нас не знал (возможно, что есть решение средствами самого Corel'а, но найти не удалось).

Первым решение предложил директор:
Ну, ничего, сядем и настучим по-быстрому.
Но мне такое решение показалось не достаточно оптимальным, тут то я и вспомнил о формате SVG. Поскольку он является текстовым, то его можно без проблем редактировать программными средствами, например, из скрипта на bash. Я давно использую Linux в качестве основной домашней системы (а на данный момент Ubuntu единственная ОС на моем компьютере) и знаком с bash скриптами (кстати, спасибо gumanoed'у за проводимый им ликбез).

К сожалению на работе не дали ставить Linux, зато была возможность «сходить домой» по ssh. Основная графика карточек была экспортирована из Corel DRAW в формат PNG и вставлена в SVG целой картинкой, в местах, предназначенных для номера и штрих-кода было оставлено пустое место. Конечно можно было оставить в векторном формате, но по непонятным причинам при открытии .cdr в Inkscape'е (а также и при экспорте в SVG в Corel DRAW) некоторые элементы расползались. Для редактирования SVG использовался кроссплатформенный свободный векторный редактор Inkscape.
В Inkscape был подготовлен шаблон. Шаблон содержал лицевую и обратную стороны для четырех карточек, и линии разметки для удобства.

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

В местах, отведенных для номера были написаны номера 00000000001 — 00000000004 (на листе 4 карточки, поэтому 4 номера), а на месте для штрих-кода была свставлена пустая картинка. Почему пустая? Да, Inkscape умеет, генерировать штрих-коды, но опять же не известно как этот процесс автоматизировать, поэтому для генерации штрихов пришлось использовать отдельную программку — Barcode. На выходе Barcode выдает PostScript файл, который, с помощью утилиты convert (из пакета ImageMagick) конвертируется в PNG и вставляется в конечный SVG документ.
Для того, чтобы из всего этого наконец-то получить 1000 визиток был написан небольшой скрипт, который я привожу в первоначальном виде (да, я знаю, что можно оптимизировать).

for n in `seq 100000000001 4 100000001000`
do
echo $n
nn=$n
fn=new-$n.svg
cp 6.svg $fn
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/01bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000001/$nn/g" $fn

let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/02bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000002/$nn/g" $fn

let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/03bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000003/$nn/g" $fn

let "nn=$nn+1"
barcode -b $nn -e EAN -u mm -g 31x17+0+0 -m 0 -E | convert -density 600x600 -trim - bcs/$nn-bc.png
sed -i "s/04bc.png/bcs\/$nn-bc.png/g" $fn
sed -i "s/100000000004/$nn/g" $fn
done


Скрипт достаточно простой, но поясню что тут происходит. В цикле от 100000000001 до 100000001000 (наличие 10000000 объясняется заданием, т. е. именно такие нужны были номера) и с шагом 4 копируется исходный файл шаблона (строка 6). Как уже говорилось выше, каждый файл содержит 4 карточки, поэтому для каждого файла генерируется 4 штрих-кода, 4 раза заменяется номер и 4 раза заменяется название файла со штрих кодом. Штрих код нужного размера в формате PostScript отдается программе convert, которая отрезает лишние белые поля и сохраняет результат в PNG формате, в отдельной папке (строка 7). Номера и имена файлов заменяются с помощью потокового редактора sed.

В результате работы скрипта в папке получилось 250 файлов готовых к печати. Это была первая партия. Вторая партия отличалась только картинкой, положения номера и штрих-кода не изменилось, поэтому для получения еще 1000 дисконток достаточно было заменить файл с картинкой, повторный запуск скрипта при этом не требовался.

Вот пример SVG файла, получаемого «на выходе»:
image

P.S. Чтобы внести ясность… По заданию штрих-коды требовались в формате EAN13.
Теги:
Хабы:
+47
Комментарии 19
Комментарии Комментарии 19

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн