Pictures say more than 1000 words. They are quicker in the mind and stay in the memory at least twice as long. Good, individual graphics such as logos or icons convey the content of your site more quickly and support your recognition value.
To ensure that such graphics do not slow down the loading of your website and also look razor-sharp on every device, it is advisable to use scalable vector graphics.
Icons or logos serve as eye-catchers with a high recognition value. As vector graphics, they are often used on websites as visual explanations of headlines, call-to-action elements or as background graphics and can be much more than small symbols from ready-made icon collections.
Advantages of scalable vector graphics for logos, icons and symbols
Logos, icons and symbols can be created to match the corporate design exactly and as vector graphics, thus emphasising the overall design of a website instead of being placed in it as a foreign body. In particular, the design as vector graphics (instead of PNG) opens up new interactive functionalities and a special user experience on your website - in addition to the pixel-perfect display sharpness in any size.
What is a vector graphic?
Vector graphics are, unlike bitmap graphics, not pixel-describing image files, but pure text files. They define the content of the graphic in a fixed syntax (file format .svg) using mathematical vectors.
SVG = Scalable Vector Graphics is the specification recommended by the World Wide Web Consortium for describing two-dimensional vector graphics.
ExampleA straight line can be defined by its start and end points, a specific thickness and, if applicable, a specific colour. This vector definition is written as text in an .svg file.
The browser reads and interprets this text file when the website is loaded and displays it as a graphic. In the case of our straight line, the resulting text file (.svg) contains one line of text and is smaller than 1 kb. The loading time of the graphic is correspondingly fast. Such simple vector graphics load just as quickly as fonts.
The content of the .svg file, which is only 177 bytes in size, can look like this, for example:
<?xml version="1.0" encoding="UTF-8"?><svg id="Ebene_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 387.07 10"><g id="Ebene_1-2"><rect width="387.07" height="10"/></g></svg>Your browser uses this to generate the display of this black straight line:
Comparative presentation of visual quality and file size of the file formats [.svg] [.png] [.jpg]:
JPG does not recognise transparency, so the background is white.
Limitations / disadvantages of vector graphics
Geometric shapes can be described mathematically very simply as vectors. The situation is different if you want to represent more complex shapes as vectors. A handwritten wavy line, for example, must be defined as a vector in a much more complex way than our straight line. Every change in direction must be described - and our wavy line has a few of these. The result is a much larger .svg file. At the extreme, you would want to display a photograph as a vector file: this would be much larger than the original bitmap file (e.g. .jpg) due to its many details, each of which must be described as a vector, with a correspondingly longer loading time. Vector files are not suitable for this.
Vector graphics in web design
In web design in particular, simple graphic forms are a welcome aid for many applications to present the content of a topic in an appealing way. Symbols in particular are valuable for quick recognition and recognisability. And it is precisely for these purposes that vector graphics are far superior to bitmap formats such as .jpg or .png.
Vector graphics can be placed almost anywhere on a website. For example, as above as graphic support for a headline. Vector graphics can also be used in buttons to place the focus on this call-to-action element.
As background graphics, vector graphics also offer great advantages over bitmap graphics. The main advantage here again is their small size with the possibility of loss-free scaling, e.g. to the entire page width. One example is the light-coloured background lines on this website. The .svg vector file has a size of less than 1 kb, can be scaled to any size and always remains crisp and sharp. The vector graphics can also be coloured as desired or placed in display layers in front of or behind the content.
In the background of this text is an example on the subject of wind power.
Any content can be used as graphically supporting elements. They are created individually and match your company's corporate design exactly.