Warning: Trying to access array offset on value of type bool in /var/www/vhosts/xogdjphu.host248.checkdomain.de/ps.de/wp-content/themes/Divi/epanel/custom_functions.php on line 629
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.
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.
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 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
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:
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.
Neueste Kommentare