Vektorgrafiken

Lernziele

• Sie können den Unterschied zwischen Rastergrafiken und Vektorgrafiken erklären.
• Sie wissen, dass SVG das verbreitetste Format für skalierbare Vektorgrafiken ist.
• Sie verstehen, was Bézier-Kurven sind und können die Begriffe Pfadpunkt und Handle (Griff) erklären.
• Sie können die Vor- und Nachteile beider Grafiktypen vergleichen, insbesondere bezüglich Auflösung, Verwendungszwecken und Dateigrössen.

Wir haben bislang von Rastergrafiken gesprochen, die ein Bild in Pixel aufteilen. Der andere Haupttyp von Grafiken sind die sogenannten Vektorgrafiken.

Anders als Rastergrafiken beschreiben Vektorgrafiken die Inhalte mathematisch als geometrische Formen. Ein Beispiel eines Kreises, bei dem eine Rastergrafik denkbar schlecht wegkommt:

Das verbreitetste Format für solche skalierbaren Vektorgrafiken heisst "Scalable Vector Graphic", oder kurz: SVG.

Editieren Sie eine SVG-Grafik

Gehen Sie zu svgviewer.dev. Dort sehen Sie standardmässig dieses Logo, das vom SVG-Code links kreiert wird.

Versuchen Sie folgende Veränderungen selbst vorzunehmen.

1. Vergrössern Sie den Kreis.
2. Geben Sie dem Kreis ein passendes Gelb oder Hellorange.
3. Verschieben Sie den Kreis weiter rechts.
4. Fügen Sie einen zweiten, grünen Kreis hinzu.
5. Machen Sie das gerundete Quadrat im Hintergrund blau.
6. Können Sie sich einen Sinn darauf reimen, wie die Form des weissen, gerundeten Dreiecks gespeichert ist?

Installieren Sie das Open-Source-Programm Inkscape.
7. Speichern Sie sich Ihr SVG von svgviewer.dev mit "Download".
9. Öffnen Sie die svg-Datei in Inkscape. Jetzt können Sie die Vektorgrafik visuell bearbeiten!
10. Nochmal: Wie wird die Form des gerundeten Quadrats gespeichert? (Tipp: Doppelklick auf die Figur.)

Bézier-Kurven

In SVG sind die Grundelemente wie Rechtecke und Kreise relativ einfach verständlich. Aber wir haben auch Pfade gesehen, die im Code von SVG schwer zu verstehen sind - wie z.B. das abgerundete, weisse Dreieck links unten auf svgviewer.dev.

<path d="M19.375 36.7818V100.625C19.375 102.834 21.1659 104.625 23.375 104.625H87.2181C90.7818 104.625 92.5664 100.316 90.0466 97.7966L26.2034 33.9534C23.6836 31.4336 19.375 33.2182 19.375 36.7818Z" fill="white"></path>

Was sind das? Das ist eine Serie von sogenannten Bézier-Kurven, die zu einem Pfad verknüpft sind. Diese Kurven wurden nach dem französischen Ingenieur Pierre Bézier benannt, der sie in den 1960er Jahren in der Automobil-Designindustrie popularisierte (bei Renault).

Eine Bézier-Kurve wird durch einen Satz von Kontrollpunkten definiert.

• Eine lineare Bézier-Kurve hat zwei Punkte und ist gerade.
• Eine quadratische Bézier-Kurve hat drei Punkte und ist eine Kurve zwischen zwei Punkten.
• Eine kubische Bézier-Kurve hat vier Punkte und ist eine Kurve zwischen den beiden Punkten. Diese Art von Kurve wird bei SVG und in Vektorgrafikprogrammen am meisten verwendet.

Grad einer Bézier-Kurve

Bei Vektorgrafik-Programmen wie Inkscape wird das meist pro Pfadpunkt und etwas benutzerfreundlicher dargestellt:

• Ein Pfadpunkt (oder Eckpunkt), durch den die Linie der Figur geht.
• Pfadpunkte können bis zu zwei "Handles" (Griffe) haben, mit denen die Krümmung der Kurve vor und nach dem Punkt bestimmt wird.

Wir haben das SVG von Svgviewer.dev in Inkscape geöffnet und editiert. Das sah dann so aus:

Diskutieren Sie

Was sind wohl die Vor- und Nachteile der beiden Grafiktypen? Hier einige Bilder als Inspiration:

Mögliche Gedanken zur Diskussion

Auflösung

Einer der Hauptunterschiede zwischen Raster- und Vektordateien ist deren Auflösung. Die Auflösung einer Rasterdatei wird in DPI (dots per inch) oder PPI (pixels per inch) angegeben. Wenn man in eine Rastergrafik hineinzoomt oder ihre Grösse vergrössert, beginnt man, die einzelnen Pixel zu erkennen.

Rasterdateien nutzen meist mehr Farben, ermöglichen eine umfangreichere Farbbearbeitung und zeigen feinere Licht- und Schatteneffekte als Vektoren - verlieren jedoch an Bildqualität, wenn sie in der Grösse verändert werden. Ein einfacher Weg, um festzustellen, ob ein Bild eine Raster- oder Vektorgrafik ist, besteht darin, es zu vergrössern. Wenn das Bild unscharf oder pixelig wird, handelt es sich wahrscheinlich um eine Rasterdatei.

Für Vektorbilder ist die Auflösung kein Problem. Man kann Vektoren unendlich skalieren, umformen und anpassen, ohne an Bildqualität zu verlieren. Vektordateien sind beliebt für Bilder, die in einer Vielzahl von Grössen erscheinen müssen, wie z.B. ein Logo, das sowohl auf einer Visitenkarte als auch auf einem Plakat passen muss.

Verwendungszwecke

Digitale Fotos sind Rasterdateien. Viele Digitalkameras schiessen automatisch Fotos und speichern sie als Rasterdateien - und die Bilder, die man online sieht, sind oft auch Rastergrafiken. Rasterdateien werden auch häufig für die Bearbeitung von Bildern, Fotos und Grafiken verwendet.

Vektordateien eignen sich besser für digitale Illustrationen, komplexe Grafiken und Logos. Das liegt daran, dass die Auflösung von Vektoren beim Skalieren gleich bleibt, was sie für eine Vielzahl von Druckformaten geeignet macht. Das Vektorformat SVG ist ein etablierter Web-Standard und wird auf Webseiten oft gebraucht, um kleine Symbole zu animieren (z.B. der Play-Knopf auf Youtube).

Manche Dateitypen können sowohl Raster- als auch Vektorbilder kombinieren - allen voran PDFs und Word-Dateien. Zum Beispiel könnte eine Broschüre Vektorgrafiken für das Firmenlogo und den Text verwenden, aber Rasterdateien für die Fotografie.

Dateigrössen

Rasterdateien sind im Allgemeinen grösser als Vektordateien. Sie können Millionen von Pixeln und unglaublich hohe Detailstufen enthalten. Ihre Grösse kann den Speicherplatz von Geräten beeinträchtigen und das Laden von Seiten im Web verlangsamen. Allerdings kann man Rasterdateien komprimieren, um sie für die Speicherung und Web-Optimierung zu optimieren, oder um das Teilen schneller und einfacher zu machen.

Vektordateien brauchen weniger Speicherplatz als Rasterdateien und enthalten nur die mathematischen Formeln, die das Design bestimmen.

Kompatibilität und Konvertierung

Rasterdateien können in vielen verschiedenen Apps und Webbrowsern geöffnet werden, was sie leicht zu betrachten, bearbeiten und teilen macht. Bis auf SVG sind viele andere Vektordateien nicht so zugänglich. PDF, AI oder EPS erfordern spezialisierte Software, um die Dateien zu öffnen und zu bearbeiten.

Datei- und Erweiterungstypen

Die verwendete Software bestimmt in der Regel den Dateityp, ob Raster oder Vektor. Es gibt mehrere Typen und Erweiterungen von sowohl Raster- als auch Vektordateien, jede mit ihren eigenen Merkmalen.

Dateityp	Format	Verwendung	Besonderheiten
Raster	JPEG	Fotos, Web	Hohe Kompression, Verlust an Bildqualität
Raster	PNG	Web, Transparenz	Unterstützt Transparenz, verlustfreie Kompression
Raster	GIF	Animationen, Web	Einfache Animationen, begrenzte Farbpalette
Raster	BMP	Unkomprimierte Bilder	Keine Kompression, grosse Dateigrösse
Raster	WebP	Web, fortschrittliche Nutzung	Modernes Bildformat, unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Animationen
Vektor	SVG	Web, Druck	Skalierbar ohne Qualitätsverlust, Webstandard
Vektor	AI	Grafikdesign	Adobe Illustrator Format, vielseitige Bearbeitungsoptionen
Vektor	EPS	Druck, Design	Weit verbreitet für Druckgrafiken, kompatibel mit vielen Programmen
Vektor	PDF	Universelle Dokumente	Hauptsächlich vektorbasiert, kann aber auch Rastergrafiken enthalten