Vectorization / digitization of Municipal & City Coat of Arms (blazon)

In this blog post we would like to present two projects in which existing coats of arms, which were only available in a pixel version as graphics, were re-illustrated by hand in order to obtain them as vector files in an improved and loss-free scalable version. The advantage of a vectorized blazon is that it can be infinitely enlarged without loss of quality. They are nevertheless very small in terms of file size compared to pixel-based graphics, because everything is based on mathematically calculable paths. And logos are also optimally integrated into websites as vector files.

Vectorization of the coat of arms of the island municipality of Juist

The mayor's office contacted us because the existing municipal coat of arms is to be vectorized on the one hand. On the other hand, the blue should also be edited in a less saturated and lighter variant.

We set to work on the template and vectorized all elements of the coat of arms. Admittedly, this digitization of the coat of arms involved relatively simple shapes. Finished is the municipal coat of arms in the vectorized form:

In addition, black and white variants of the municipal coat of arms were also needed. So we vectorized the coat of arms for the island municipality and created it in a variety of file variants (in lossless scalable vector variants EPS, AI, SVG, PDF and also in high-resolution pixel variants as PNG and JPG) in color and black and white. Thus the municipality is well prepared for the future and can use the coat of arms as SVG in websites and just as well as e-mail attachments or in print media.

Pryluky coat of arms with bull's head with shading and gradients

The following example shows that it can be done in a more sophisticated way. The task was to illustrate the pixel-based city coat of arms. Here the shading and gradients had to be created in Adobe Illustrator. Although there were only two color tones that make up the coat of arms, the task was much more demanding compared to the municipal coat of arms. Here is a before and after comparison:

Here are some detail shots, so you can see how the gradients and shading turned out in the illustration. And that's what was most challenging about vectorizing the stephead.

Lots of paths, lots of vectors. But in the result a great work of our illustrator Alex, who has already vectorized the city arms of Stavenhagen. Now the city is future-proofed with its city coat of arms and can use the city coat of arms optimally for digital as well as print purposes.

Difference between pixel graphics and vector graphics

Pixel graphics and vector graphics are two basic types of digital graphics that use different approaches to represent images and graphics. Here are the main differences between the two so you can understand why logos and coats of arms should ideally be vector graphics, even though they were often designed as pixel graphics in the past - or drawn analogously in the case of heraldic motifs.

Definition:

A pixel graphic (also called a raster graphic) is a representation of images or graphics that consists of a rasterization of tiny pixels, called pixels. Each pixel has a specific color information that makes up the overall image. A vector graphic uses geometric shapes, such as lines, curves, circles, and polygons, defined by mathematical relationships. These shapes are represented by vectors (mathematical descriptions) that define their position, shape, color, and other properties. This is particularly well seen above with the bull's head.

Scalability:

Because pixel graphics consist of a fixed number of pixels, they cannot be enlarged arbitrarily without losing quality. When a pixel graphic is enlarged, the individual pixels become visible, resulting in a degradation of image quality. Vector graphics are scalable because they are defined by mathematical formulas and do not have a fixed number of pixels. They can be enlarged or reduced in size as desired without degrading image quality.

File size:

The file size of pixel graphics can be relatively large, especially at higher resolutions, because each pixel is defined individually. Vector graphics typically have smaller file sizes because they contain only the mathematical descriptions of the shapes and do not need to store each pixel individually. Today, since smaller files help website performance, logos, icons, and crests are mainly included as vector files in SVG format.

Editing:

Editing pixel graphics involves changing pixels one at a time, which can make them less suitable for complex changes to graphics. Vector graphics are good for editing because you can easily adjust the shapes and properties by changing the underlying mathematical descriptions.

Application areas:

Pixel graphics are often used for photographs, detailed images, and photo-realistic renderings. Vector graphics are ideal for logos, illustrations, technical drawings, infographics, and other graphics like crests where scalability and precision are important. Overall, pixel and vector graphics have their respective strengths and weaknesses and are chosen based on the needs of the project.

Is vectorization of your coat of arms interesting for you?

We vectorize, improve and revise heraldic motifs in great detail and are able to make even lost details visible again. In doing so, we pay close attention to historical accuracy. Just send us a photo or a scan of your coat of arms and you will promptly receive a quote for the vectorization/digitization of your coat of arms.