Icons oder Logos dienen als Eye-Catcher mit hohem Wiedererkennungswert. Als Vektorgrafiken werden sie auf Webseiten oft als visuelle Erläuterung von Headlines, Call-To-Action-Elementen oder als Hintergrundgrafiken eingesetzt und können weit mehr sein, als kleine Symbole aus vorgefertigten Icon-Sammlungen.
Vorteile von Vektorgrafiken für Logos, Icons und Symbole
Logos, Icons und Symbole können genau passend zum Corporate Design und als Vektorgrafik erstellt werden und unterstreichen damit das Gesamtdesign einer Website statt als Fremdkörper darin platziert zu sein. Insbesondere die Gestaltung als Vektorgrafik (statt als PNG), eröffnet – neben der pixelgenauen Darstellungsschärfe in jeder Größe – neue interaktive Funktionalitäten und eine besondere User-Experience auf Ihrer Website.
Was ist eine Vektorgrafik?
Vektorgrafiken sind, anders als Bitmapgrafiken, keine pixelbeschreibenden Bilddateien, sondern reine Textdateien. Sie definieren in einer festgelegten Syntax (Dateiformat .svg) über mathematische Vektoren die Inhalte der Grafik.
SVG = Scalable Vector Graphics ist die vom World Wide Web Consortium empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken.
Beispiel: Eine gerade Linie kann durch ihren Anfangs- und Endpunkt, eine bestimmte Stärke und ggf. eine bestimmte Farbe definiert werden. Diese Vektordefinition wird als Text in eine .svg Datei geschrieben.
Diese Textdatei liest und interpretiert der Browser beim Laden der Website und gibt sie als Grafik aus. Im Fall unserer geraden Linie enthält die resultierende Textdatei (.svg) eine Zeile Text und ist kleiner als 1 kb. Entsprechend schnell ist die Ladezeit der Grafik. Solche einfachen Vektorgrafiken laden genauso schnell wie Schriften.
Der Inhalt der lediglich 177 Byte großen .svg Datei dafür kann z.B. so aussehen:
<?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>Daraus erzeugt Ihr Browser die Darstellung dieser schwarzen Gerade:
Vergleichende Darstellung von visueller Qualität und Dateigröße der Dateiformate [.svg] [.png] [.jpg]:
JPG kennt keine Transparenz, daher ist der Hintergrund weiß.
Einschränkungen / Nachteile von Vektorgrafiken
Geometrische Formen lassen sich mathematisch sehr einfach als Vektoren beschreiben. Anders sieht es aus, will man komplexere Formen als Vektoren darstellen. Eine handgeschriebene Wellenlinie z.B. muss als Vektor schon deutlich komplexer definiert werden, als unsere Gerade. Jede Richtungsänderung muss beschrieben werden – und unsere Wellenlinie hat davon einige. Das Ergebnis ist eine deutlich größere .svg Datei. Im Extrem würde man eine Fotografie als Vektordatei darstellen wollen: diese wäre durch ihre vielen Details, die jedes als Vektor beschrieben werden müssen, sehr viel größer, als die ursprüngliche Bitmapdatei (z.B. .jpg), mit entsprechend längerer Ladezeit. Hierfür sind Vektordateien nicht geeignet.
Vektorgrafiken im Webdesign
Besonders im Webdesign sind einfache grafische Formen für viele Einsatzzwecke willkommene Hilfsmittel zur ansprechenden, inhaltlichen Präsentation eines Themas. Gerade Symbole sind für die schnelle Erkennbarkeit und Wiedererkennbarkeit wertvoll. Und genau für diese Zwecke sind Vektorgrafiken den Bitmapformaten wie .jpg oder .png weit überlegen.
Vektorgrafiken können fast an jeder Stelle einer Website platziert werden. Beispielsweise wie oben als grafische Unterstützung einer Überschrift. Ebenso können Vektorgrafiken in Buttons eingesetzt werden, um den Fokus auf dieses Call-To-Action Element zu setzen.
Als Hintergrundgrafik bieten Vektorgrafiken ebenfalls große Vorteile gegenüber Bitmapgrafiken. Hauptvorteil ist hierbei wiederum ihre geringe Größe bei gleichzeitig möglicher verlustfreier Skalierung z.B. auf die gesamte Seitenbreite. Ein Beispiel sind die hellen Hintergrundlinien auf dieser Website. Die Vektordatei .svg hat eine Größe von weniger als 1 kb, kann beliebig groß skaliert werden und bleibt dabei immer knackig scharf. Die Vektorgrafiken können aber auch beliebig eingefärbt oder in Darstellungsebenen vor oder hinter den Inhalt platziert werden.
Im Hintergrund dieses Textes ein Beispiel zum Thema Windpower.
Als grafisch unterstützende Elemente können so beliebige Inhalte eingesetzt werden. Sie werden individuell erstellt und passen exakt zum Corporate Design Ihres Unternehmens.
