Vektorgrafiken - Grundlagen und Technik

1 | 32582 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Vektorgrafiken - Grundlagen und Technik" mit Ihrem Wissen!

Anzeige Hier werben

Bilder und Formen können über Vektoren beschrieben werden. Gegenüber dem üblicheren Fall, dem Aufbau eines Bildes über ein Raster aus Pixeln, bieten Vektorgrafiken einige Vorteile und Eigenheiten: eine Vektorgrafik kann ohne Qualitätsverlust skaliert und verlustfrei manipuliert werden.

Eine Vektorgrafik ist also das Gegenstück zur Rastergrafik (auch Bitmap oder Pixelgrafik) und wird nicht wie diese durch einzelne Pixel sondern durch geometrische Primitive wie Linien, Ellipsen, etc. definiert. Für Vektorgrafiken gibt es verschiedene etablierte Dateiformate wie SVG (Scalable Vector Graphics), EPS (Encapsulated Postscript) oder AI (Adobe Illustrator Document).

Screencast

Wie is' das eigentlich mit Bitmap und Vektor?

SVG: Vektorgrafiken in XML-Form

Ein immer populärer werdendes Vektorgrafik-Format ist SVG, das ein vom W3C entwickelter XML-Dialekt ist.

Wie der SVG-XML-Code für einen schwarz gefüllten Kreis aussieht, ist hier zu sehen:

Bild zu Vektorgrafiken - Grundlagen und Technik
XML-Editor im Vektorgrafikprogramm Inkscape
Ein schwarz gefüllter Kreis in SVG  
Text
1
2
3
4
5
6
7
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="210mm" height="297mm">
    <defs id="defs4" />
    <g id="layer1">
        <path d="M 442.85715,395.21933 A 94.285713,94.285713 0 1 1 254.28573,395.21933 A 94.285713,94.285713 0 1 1 442.85715,395.21933 z" id="path3155" style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    </g>
</svg> 

Aber keine Angst: Um eine Vektorgrafik zu erstellen, muss man i.d.R. nicht auf die Codebasis zurückgreifen, sondern kann über ein Vektorprogramm die Vektoren (Splines) zeichnen. Der Code wird im Hintergrund automatisch angelegt und kann zum Beispiel im Browser über die Code-Ansicht betrachtet werden.

Der Vorteil von Vektorgrafiken liegt auf der Hand: Einfache Grafiken sind ohne Verlust bearbeitbar, skalierbar und druckbar. Eine derartige Druckschärfe wie sie eine Vektorgrafik mitbringt ist mit einer Pixelgrafik selbst bei hohem DPI-Wert nur schwer möglich.

Wie diese Handhabung möglich ist lässt sich so erklären:

Das Prinzip

Eine Vektorgrafik besitzt im Gegensatz zur Rastergrafik mathematische Werte (siehe Screencast): Im vorherigen Beispiel des schwarzen Kreises Radius und Mittelpunkt. Dazu kommen beispielsweise hier noch Farbwerte. Aus diesen Werten "fügt" sich das Bild zusammen. Eine Rastergrafik besteht nur aus eben diesem Raster - Formen und Objekte sind nur subjektiv visuell erkennbar - für den Computer sind das nur ein "Haufen Pixel", die sich nur mithilfe von Algorithmen näherungsweise ermitteln lassen (was Verpixelungen, etc. in Bitmap-Software wie Photoshop hervorruft).

Wird nun die Grafik skaliert, müssen keine komplexen Pixelberechnungen laufen um den Verlust möglichst gering zu halten, sondern die Angaben bleiben gleich. Sie werden lediglich auf die neue Größe angepasst, also skaliert.

Folgende Grafik soll den Unterschied zwischen Vektor und Bitmap veranschaulichen. Sie sind stark vergrößert. Die erste Form ist eine Bitmap-, die andere eine Vektorgrafik:

Bild zu Vektorgrafiken - Grundlagen und Technik
Gezoomt: 1. Bitmap / 2. Vektor

Erklärung

Wie zu sehen ist, ist die zweite Grafik um einiges schärfer. Das liegt daran, dass die Informationen für die Form vorliegen, der Computer also "weis", was das für ein Objekt ist.

Aber wie alles hat auch die Vektorgrafik einen Nachteil: Es viel schwerer Details in so eine Grafik einzubinden, wie bei Rastergrafiken. Das liegt daran, dass nicht alles Pixel für Pixel erstellt wird und erst am Ende durch die optische Erfahrung dem Betrachter als Grafik mit Formen, Farben, etc. vorgelegt wird, sondern die Grafik bereits im Vornherein aus Polygonen (Rechtecken, Ellipsen, ...) und Linien (sog. Splines) besteht. Dadurch ist es nicht oder nur sehr schwer möglich ein derart detailreiches Bild zu erstellen, wie man es bei Fotos beispielsweise hat.

Wie wir aber gleich sehen werden, kann dies sogar von Nutzen sein.

Kompatibilität

Firefox2Unterstützt3Unterstützt3.5Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
Reindarstellung von SVG
Firefox2Nein3Unterstützt3.5Unbekannt
IE6Nein7Nein8Nein
Opera9.5Unterstützt10Unbekannt
Safari3Unterstützt4Unterstützt
Unterstützung des SVG-Formats in CSS-Eigenschaften

Obwohl es Vektorgrafiken schon sehr lange gibt (früher gab es auch Computerspiele, die Vektoren verwendeten) ist die Darstellungskompatibilität noch sehr dürftig. Erst in letzter Zeit steigt die Zahl der Browser, die die Darstellung von SVG-Grafiken unterstützen. Die Verwendung in Websites mittels CSS steckt aber immer noch in den Kinderschuhen.

Einsatz im Printdesign

Aufgrund der eben dargelegten Eigenschaften eignet sich Vektor optimal für den Einsatz im Printdesign und Logodesign.

Worauf es bei einem Logo ankommt:

  • klare Formen
  • wenige Details
  • großes Anwendungsspektrum

Klare Formen sind gegeben und können optimal angewendet werden. Zu viele Details würden ein Logo überladen und entfremden. Auch dafür sind Vektoren wie geschaffen. Letztendlich das Wichtigste für das Logodesign ist die Abdeckung verschiedenster Anwendungen und Medien: Plakate, Wände, Dokumentköpfe, Websites, etc. Auch dafür ist Vektor die beste Wahl. Selbst wenn Vorlagen z.B. für Plakate auch 5m groß werden müssen, kann optimal scharf geplottet werden - wie gesagt ohne Verlust.

Umsetzung: Splines

Bild zu Vektorgrafiken - Grundlagen und Technik

Splines sind die Essenz einer Vektorgrafik. Aus ihnen entstehen die Formen und werden über diese definiert. Das Prinzip ist eng mit mathem. Relationen verwandt.

Splines sind Linien, die Punkte (Knoten) miteinander verbinden. Und zwar auf dem kürzest möglichen Weg. Mit Tangenten-Strecken werden gekrümmte und glatte Splines erreicht. Was Vektoren betrifft, wird diese Definition ausgeweitet, sodass auch modifizierte Kanten und Ecken möglich sind, sowie das bessere Anpassen von Formen. Die Tangenten sind nicht wie in der Mathematik Geraden (also mit offenen Enden) sondern Strecken. Die Länge der Streckenabschnitte links und rechts von einem Knoten beeinflussen die Krümmung des Splines.

Mit diesen Tangenten-Strecken (Relationen: Tangentengeraden), die bei Bedarf "geknickt" (nicht differenzierbar) werden können, werden die Splinekurven so genauer angepasst. Sind "Knicke" in den Tangenten-Strecken bekommen diese Ecken. Je länger die Tangentenstrecke ist, desto "bauchiger" wird der Spline.

Auf diesem Weg lässt sich jede erdenkliche Linie nachzeichnen.

Vektorprogramme


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 6 Personen an der Seite "Vektorgrafiken - Grundlagen und Technik" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Vektorgrafiken - Grundlagen und Technik" hier bearbeiten.