Vektorgrafiken

Rückblick: Rastergrafiken

Bei Rastergrafiken ist ein Bild bei genügend Vergrösserung eine Art «Mosaik» - zusammengesetzt aus einzelnen Bildpunkten.

Einen anderen Ansatz wird bei Vektorgrafiken angewandt: Hierbei werden Bilder aus geomtrischen Elementen, wie Linien, Kreisen, Rechtecken, etc. zusammenzusetzen. Im Unterschied zu Rastergrafiken lassen sich Vektorgrafiken damit beliebig vergrössern, ohne dass es zu einem Qualitätsverlust kommt. Das heisst, Vektorgrafiken wirken nie «verpixelt».

Der Aufbau von Vektorgrafiken aus einzelnen geometrischen Elementen bringt mit sich, dass solche Grafiken vor allem für Diagramme, Logos, digitale Zeichnungen etc. eingesetzt werden.

Fotos

Fotos erfassen eine Momentaufnahme, indem sie die Lichtstrahlen, die von den Objekten reflektiert werden, festhalten (durch einen Sensor oder einen lichtempfindlichen Fotofilm). Diese Lichtstrahlen sind nicht geometrisch und können nicht in geometrische Elemente zerlegt werden. Daher sind Fotos stets Rastergrafiken.

Scalable Vector Graphics (SVG)

Das wohl weitverbreiteteste Format für Vektorgrafiken ist SVG (Scalable Vector Graphics). SVG ist eine sogenannte Auszeichnungssprache (also eine formale Sprache), mit der mit man die geometrischen Objekte in einer Vektorgrafik beschreiben kann.

Der Aufgbau einer SVG

Vektorgrafik ausprobieren

1. Setzen Sie in der ersten Zeile die Werte für width auf 300 und für height auf 150. Was verändert sich?
   Laden...
2. Verkleinern Sie der Reihe nach die Werte für x, y, width und height in der zweiten und dritten und vierten Zeile. Beobachten Sie jeweils, wie sich das Bild verändert.
   • Versuchen Sie die Werte so anzupassen, dass die Flagge wieder korrekt dargestellt wird, aber die gesamte Bildfläche (schwarz gestrichelt eingerahmt) ausfüllt.
   • Wozu dienen x, y, width und height?
   Laden...
3. Verändern Sie jetzt den Wert für fill in der vierten Zeile durch eine andere Farbe oder auch durch einen RGB-Farbwert. Was passiert?

   RGB-Farben

   RGB

   Rot

   255

   Grün

   217

   Blau

   0

   Binär00000000

   CSS-Farbeundefinedrgb(255, 217, 0)
4. Wozu dient der rect-Befehl in einer SVG Grafik?
   Laden...

Laden...

Weitere Formen

Weitere Formen in Vektorgrafiken

In dieser Aufgabe lernen Sie einige weitere Befehle SVG kennen, die Sie in SVG Grafiken verwenden können. In der nächsten Aufgabe werden Sie damit anschliessend eine eigene Vektorgrafik entwerfen.

Sobald Sie die beiden SVG-Beispiele analysiert und den Code verstanden haben, können Sie mit der nächsten Aufgabe fortfahren.

Eigene Vektorgrafik erstellen

Sie kennen nun das grundlegende Format einer Vektorgrafik, sowie die wichtigsten Formen, die uns darin zur Verfügung stehen.

Entwerfen Sie jetzt auf einem Blatt Papier eine eigene Grafik, welche aus den Elementen besteht, die Sie kennengelernt haben.

Vektorgrafiken Zoomen

Untersuchen Sie die obige SVG-Grafik die erste Zeile, im Besonderen die viewbox-Eigenschaft:

1. Was passiert, wenn Sie die viewbox-Werte 50 ändern? Was wenn Sie die die 0-Werte ändern? Welche Auswirkung hat die viewbox auf das Bild?
   Laden...
2. Wählen Sie den viewbox-Wert so, dass die Lupe möglichst die gesamte Zeichnungsfläche (gestricheltes Quadrat) ausfüllt. Ändern Sie nun die width und height-Werte in der ersten Zeile. Was passiert?
   Laden...
3. ⭐ Hier wird ein neues Element path verwendet. Das d steht für data und beschreibt die einzelnen Wegpunkte des Pfades, der gezeichnet wird soll. Kopieren Sie den gesamten d-Wert und fügen Sie diesen 👉 hier im Svg-Path-Editor ein. Ändern Sie den Pfad nach belieben ab oder erstellen Sie ihren eigenen Pfad. Kopieren Sie den neuen d-Wert und ersetzen Sie den alten in der SVG-Grafik.

Laden...

---

Excalidraw

Auch 👉 Excalidraw basiert auf Vektorgrafiken, auch wenn hier das Format anders aufgebaut ist. Im Nachfolgenden Beispiel sehen Sie eine einfache Excalidraw-Grafik, die aus drei Kreisen besteht.

Laden...

Excalidraw

1. Verwenden Sie die grafische Oberfläche zum Ändern der Grafik. Was passiert im Code, wenn Sie bspw. die Farbe ändern?
   Laden...
2. In Excalidraw kann die "Sauberkeit" einer Form festgelegt werden, daher wie stark die Striche "verwackelt" gezeichnet werden. Welche Eigenschaft ändert sich im Code, wenn Sie die Sauberkeit ändern?
   Laden...
3. Was ist der Minimalwert, was der Maximalwert für die "Sauberkeit", die über Excalidraw eingestellt werden kann? Lässt sich der Wert auch im Code ändern? Probieren Sie unterschiedliche Werte aus.
   Laden...
4. Was denken Sie, was braucht mehr Speicherplatz? Eine Rastergrafik oder eine Vektorgrafik? Überlegen Sie sich, weshalb Sie zu Ihrem Entschluss kommen und halten Sie Ihre Begründung fest.
   Laden...
5. Exportieren Sie das Bild als Vektorgrafik SVG und als Rastergrafik PNG, wobei Sie beim PNG 3 Vergrösserungen (1x, 2x, 3x) herunterladen. Beantworten Sie dann die folgenden Fragen:
   1. Öffnen Sie die drei heruntergeladenen Rastergrafiken - welche ist qualitativ am ansprechendsten? Wie stark können Sie hereinzoomen, bis es unscharf/verpixelt wird? Welche dieser drei Versionen würden Sie in einer schriftlichen Arbeit einfügen?
   2. Halten Sie den Speicherbedarf der drei Versionen fest. Welche braucht am meisten, welche am wenigsten Platz?
   Laden...

Laden...