Einführung in Vektorgrafiken

Als Fotograf arbeitetet man ja naturgemäß mit sogenannten Rastergrafiken, bei denen jeder Bildpunkt ein oder mehrere Werte zu gewiesen ist. Wer nichts anderes kennt, wird sich jetzt fragen: Wie gehts denn sonst?
Die Antwort lautet: keine Pixel speichern, sondern Informationen. Genauso funktioniert auch die Darstellung von Websiten im Internet. Diese Webseite wird nicht als Pixelgrafik vom Webserver geliefert, sondern nur die Informationen à la Mach den Hintergrund in grau, und platzier dort oben das Logo, die Schrift ist so und so und da ist ein Strich mit der Farbe. Ansonsten müssten alle die gleiche Bildschirmauflösung haben. Aber mal alles von vorn.

Vergleich des Speicherformates anhand eines Buchstaben

Das Linke Bild zeigt das Prinzipp einer Vektorgrafik: Um den Buchstaben “A” darzustellen, werden die Pixel eines Rasters eingefärbt, sodass sie der Betrachter als Buchstaben erkennen kann.

Im rechten Bild ist eine Vektorgrafik zu sehen, im Hintergrund deren Darstellung als Rastergrafik. In der Vektorgrafik stehen nicht die Informationen für jedes Pixel, sondern die Formen: Eine Linie geht von (0, 5) bis (2, 0). Wird die Grafik nun gerastert, wird sie umgewandelt in eine Rastergrafik (was für jede Darstellung nötig ist, da alle modernen Darstellungsmedien rasterorientiert arbeiten), was bedeutet, dass alle Pixel, die auf der Linie liegen gefärbt werden.

Skalierungsproblem der Pixelgrafiken; Wenn das Bild nicht angezeigt wird, aktualisiere bitte deinen Browser!

Der große Vorteil der Vektorgrafik ist, dass sie beliebig skalierbar sind, es geht beim verkleinern keine Information verloren und beim vergrößern stellt sich heraus, dass sie unendlich genau sind. Hört sich nach Geometrie an? Ist es auch! Denn in der Geometrie wird ein Kreis durch 2 Informationen beschrieben: den Mittelpunkt und den Radius. Bei Vektorgrafiken gibt es weiters noch die Linienstärke sowie die Füll- und Linienfarbe. Bei einer Rastergrafik sind, je nach Auflösung und Größe des Kreises, erheblich mehr Informationen nötig: Für jeden Punkt, der auf dem Umfang liegt, wird eine Information benögt. Bei rein digital erstellten Grafiken lässt sich also auch einiges an Speicherplatz sparen.

Pfade

Nun kommt endlich ein Thema das auch für Fotographen interessant wird: Jedes Bildbearbeitungsprogramm bietet die Funktion der Pfade an. Pfade sind bekannterweise einfach Linien, die dazu dienen Auswahlen zu speichern. Diese Pfade werden allerdings nicht rasterorientiert gespeichert, sondern als Vektoren. Jede .psd oder .xcf-Datei ist somit ein Hybrid aus den bekannten Rastergrafiken und Vektorgrafiken.[1]

Die Pfade in diesen Programmen (mit GIMP getestet) lassen sich als SVG (Scalable Vector Graphics) importieren und exportieren. SVG ist das einzige Dateiformat für Vektorgrafiken. Es gibt sehr viele Möglichkeiten zur Bildgestaltung in SVG, aber Pfade sind der Grundbaustein. Vektoren lassen sich (wie schon die Abkürzung zeigt) skalieren, beliebig genau. Jede Schrift, jedes Objekt wie ein Rechteck oder ein Kreis, jede beliebige Form kann man als Pfad sehen. Die obige Abbildung mit dem S deutete es bereits an: Es wird nicht die Position der Pixel des Buchstaben gespeichert, sondern die Kontur. Und diese Kontur lässt sich beliebig verändern: skalieren, dehnen, stauchen, deformieren. Das bedeutet nicht, dass jeder text automatisch zu einem Pfad wird, ansonsten könnte man keinen Text in einer SVG-Datei bearbeiten, sondern dass sie grundsätzlich konvertierbar sind. Das ist dann praktisch, wenn ein Schriftzug eben als Pfad verändert werden soll, um einen Effekt abzubilden.

Pfade sind das Grundprinzip von Vektorgrafiken!

deformierter Text und eine runde Bézierkurve mit Anfasspunkten

deformierter Text und eine Bézierkurve

In der Abbildung rechts habe ich das versucht zu verdeutlichen. Der Text ‘test’ wurde in einen Pfad umgewandelt, somit lassen sich die Konturen der einzelnen Buchstaben frei verändern. Ein Punkt, der die Kontur des ‘e’ oben beschreibt wurde versetzt und somit ist der Buchstabe (besser gesagt nur die obige Linie) dicker. Gleich daneben habe ich einen einfacheren Pfad gezeichnet, aber mit den Anfasspunkten, die zur Deformierung verwendet werden. Die Quadrate zeigen Punkte an, auf denen die Pfade liegen. Die Kreise bestimmen den Verlauf, dabei wird die Richtung beieinflusst, sowie die Stärke der Deformierung durch den Abstand der Kreise vom Quadrat. Diese Art von Linien wird als Bézierkurve bezeichnet und finden in der Bildbearbeitung überall Verwendung, da sie die geeignetste Form sind, Kurven (also nicht-gerade Linien) mathematisch zu beschreiben.

Effekte

Bild mit und ohne Unschärfe-Filter

Filter

Was wären Grafiken ohne tolle Filter? Die Filter funktionieren wie die Filter in bekannten Pixelgrafik-Bearbeitungsprogrammen. Die Arten von Effekten sind im Grunde auch sehr ähnlich wie in diesen Programmen, so gibt es Unschärfefilter, Verzerrungsfilter, verschiedenste Farbfilter, Körnungen, Lichter und Schattierungen, Texturen usw.

Mit der Kombination aller Möglichkeiten, eröffnet sich ein großes Gebiet von Anwendungsmöglichkeiten, da mit Vektorgrafiken fast nichts unmöglich ist, sie sind ideal für digital erstellte Grafiken. Bspw. wurde folgende Grafik mit Inkscape, einem sehr bekannten Vektorzeichenprogramm, das noch detailliert behandelt wird, erstellt:

Eine als Vektorgrafik erstellte Discokugel mit Effekten

(Quelle)

Animationen

Aber auch Animationen sind möglich, programmiert werden diese mit einfachem JavaScript, das auch für Webseiten verwendet wird. Das ermöglicht wiederum viele Anwendungen, beliebt sind hier u.a. Präsentationen. Der große Vorteil von Präsentationen mit SVG und JavaScript ist, dass nur ein einfacher Browser benötigt wird, um sie inklusiver aller Effekte darstellen zu können.

Ich hoffe dies  hier ist ein verständlicher Einstieg in Vektorgrafiken. Beim Nächsten Teil der Serie geht es um die Anwendung, also das Erstellen von Vektorgrafiken.

Links:

Quellen:

Über den Autor:

Sebastian Wagner steht als Schüler kurz vor seiner Matura. In seiner Freizeit fotografiert der netzaffine Geek gerne und befasst sich neben der Fotoausarbeitung auch mit verschiedenen Informatikthemen wie Programmierung, Linux, Verschlüsslung und Netzwerken. Außerdem ist er Österreichs viertbester Nachwuchsprogrammierer.



Dir hat mein Artikel gefallen?

Ich freue mich natürlich auch über jedes einzelne Kommentar, jede Nachricht und jeden Follower auf den Sozialen Netzwerken.
Einfach mal Danke sagen? Allergernst, ich habe einen Trinkgeld-Knopf =)

Trackbacks/Pingbacks

  1. Adobe Photoshop oder CorelDraw? Grafikprogramme für Profis - […] Lesenswert: Einführung in Vektrografiken […]
  2. Vektorisierung mit Potrace (Inkscape) mit Algorithmus - [...] – dem Rendering (engl. Darstellung) ist ja nicht besonders spannend und wurde auch schon im ersten Teil angesprochen, es passiert…
  3. Vektorgrafiken mit Inkscape - [...] Dieser Artikel ist Teil 2 von insgesamt 2 Teilen in dieser Artikelserie: VektorgrafikenNachdem es im ersten Teil…

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

;-) ;) :p :o :D :/ :-) :-( :) :(

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du dich damit einverstanden.

Schließen