📜 ⬆️ ⬇️

Tale of how Bash and SVG saved from routine

There is such a wonderful vector graphics format - Scalable Vector Graphics, SVG. What is he so wonderful? Well, for example:
  1. SVG is an open format, it is not owned by anyone.
  2. SVG is a subset of the XML language and, accordingly, it is a textual one.
  3. It integrates perfectly with HTML and XHMTL.
  4. SVG is compatible with CSS, which allows you to control the display of elements using style sheets.
  5. In SVG, the text remains text, thanks to which SVG documents can be indexed by search engines, and users can also select and copy text.

I especially like the third item on the list. What is especially interesting is that it is possible not only to embed SVG documents in HTML, but, on the contrary, embed whole HTML documents or individual tags into SVG. This allows you to create very interesting things that are not available for Flash and SilverLight.
Below is a small example of embedding HTML in SVG, habrahabr.ru inside the picture remains scrollable and clickable. Unfortunately, not all browsers work equally well, Firefox has no problems, only slows down when scrolling.
I really hope that over time, websites that actively use SVG will appear, it seems to me that this approach will have advantages over Flash and SilverLight technologies, for example, it becomes possible to use CMS designed for HTML, in addition, such sites will be easily indexed by search engines.


But now is not about that, now about point number 2. When I worked as a designer in one small company, we received an order for two lots of discount cards, thousands of pieces in each lot. The circulation for the company is small, but the task was greatly complicated by the need for card numbering, in addition, each card should have a bar code corresponding to the number.
The firm sat on Corel DRAW x3. Automation tools are present in it, and making cards with numbers is not a problem. But none of us knew how to make bar codes for this number (it is possible that there is a solution by means of Corel itself, but it was not possible to find it).
The first solution proposed by the director:
Well, nothing, we will sit down and push in a quick way.
But this solution seemed to me not optimal enough, then I remembered about the SVG format. Since it is a text one, it can be edited without problems using software, for example, from a bash script. I have been using Linux for a long time as the main home system (and at the moment Ubuntu is the only OS on my computer) and I am familiar with bash scripts (by the way, thanks to gumanoed for the educational program he runs).

Unfortunately at work they didn’t let Linux install, but there was an opportunity to “go home” via ssh. The main graphics card was exported from Corel DRAW to PNG format and inserted into the SVG as a whole picture, in the places intended for the number and bar code an empty space was left. Of course, it was possible to leave it in a vector format, but for unknown reasons, when opening a .cdr in Inkscape (as well as when exporting to SVG in Corel DRAW) some elements sprawled. SVG was edited using the Inkscape free cross-platform vector editor.
A template has been prepared in Inkscape. The template contained the front and back sides for four cards, and marking lines for convenience.

A little about those process for reference. Cards are printed on plastic (4 pieces per sheet, both sides), a sheet of plastic is cut in half, both halves are folded with an image of themselves and supplemented with sheets of laminate, after which the resulting sandwich is sent to the oven, and after readiness - into a special machine for knocking out cards (according to punching principle).

In the places reserved for the number, the numbers 00000000001 - 00000000004 were written (there are 4 cards on the sheet, therefore 4 numbers), and an empty picture was put in place for the bar code. Why empty? Yes, Inkscape is able to generate barcodes, but again it is not known how to automate this process, so it was necessary to use a separate program for generating strokes - Barcode. At the output, Barcode outputs a PostScript file, which, using the convert utility (from the ImageMagick package), is converted to PNG and inserted into the final SVG document.
In order to finally get 1000 business cards out of all this, a small script was written, which I quote in its original form (yes, I know what can be optimized).

for n in `seq 100000000001 4 100000001000`
echo $n
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

The script is quite simple, but I will explain what is happening here. In the cycle from 100000000001 to 100000001000 (the presence of 10,000,000 is explained by the task, that is, it was these numbers that were needed) and in step 4 the original template file is copied (line 6). As mentioned above, each file contains 4 cards, so for each file 4 bar codes are generated, the number is replaced 4 times and the name of the file with a bar code 4 times. The desired size barcode in PostScript format is given to the convert program, which cuts off the extra white fields and saves the result in PNG format in a separate folder (line 7). File numbers and names are replaced using the sed streaming editor.

As a result of the script in the folder turned out 250 files ready for printing. It was the first batch. The second batch differed only in the picture, the position of the number and the barcode did not change, so to get another 1000 discounts it was enough to replace the file with the picture, the re-launch of the script was not required.

Here is an example of an SVG file received “on output”:

PS To clarify ... By task, barcodes were required in EAN13 format.

Source: https://habr.com/ru/post/101007/

All Articles