Vektorgrafiken

Rastergrafiken kennen Sie nun. Ein Bild wird dabei wie eine Art «Mosaik» aus einzelnen Bildpunkten zusammengesetzt.

Einen anderen Ansatz finden wir bei sogenannten Vektorgrafiken: Hierbei werden Bilder aus geomtrischen Elementen, wie Linien, Kreisen, Rechtecken, etc. zusammenzusetzen. Im Unterschied zu Rastergrafiken lassen sich Vektorgrafiken damit beliebig vergrössert, 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, etc. eingesetzt werden, nicht aber für Fotos.

Scalable Vector Graphics (SVG)

SVG ist eine sogenannte Auszeichnungssprache (also eine formale Sprache), mit der mit man Vektorgrafiken definieren kann.

Der Aufgbau einer SVG

Vektorgrafik ausprobieren

Kopieren Sie den folgenden SVG-Code in den Code-Bereich dieser 👉 SVG Viewer Seite und klicken Sie auf die Lupe, um das Bild anzeigen zu lassen.

<svg width="400" height="600">
    <rect x="50" y="50" width="100" height="200" fill="blue"/>
    <rect x="150" y="50" width="100" height="200" fill="yellow"/>
    <rect x="250" y="50" width="100" height="200" fill="red"/>
</svg>

Bearbeiten Sie anschliessend folgende Aufträge und Fragen und halten Sie Ihre Antworten unten im Textfeld fest:

1. Setzen Sie in der ersten Zeile die Werte für width auf 320 und für height auf 150. Klicken Sie erneut auf die Lupe. Was verändert sich?
2. Verkleinern Sie der Reihe nach die Werte für x, y, width und height in der zweiten und dritten Zeile. Beobachten Sie jeweils, wie sich das Bild verändert. Wozu dienen x, y, width und height?
3. Verändern Sie jetzt den Wert für fill in der vierten Zeile. Verwenden Sie dabei einen 👉 Hex-Farbcode.
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.

Koiperen Sie die folgenden SVG-Beispiele auf die 👉 SVG Viewer Seite und analysieren Sie, was die neuen Befehle und die Ergänzungen der bereits bekannten Befehlen bewirken.

<svg width="400" height="600">
    <rect
        x="50" y="50"
        width="300" height="200"
        stroke="black" stroke-width="5"
        fill="white"/>
    <circle
        cx="200" cy="150" r="60"
        fill="red"/>
</svg>

<svg width="400" height="600">
    <rect
        x="50", y="50"
        width="300" height="200"
        fill="red"/>
    <line
        x1="50" y1="150" x2="350" y2="150"
        stroke="white" stroke-width="30"/>
    <line
        x1="150" y1="50" x2="150" y2="250"
        stroke="white" stroke-width="30"/> 
</svg>

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.

Schreiben Sie anschliessend auf der 👉 SVG Viewer Seite den entsprechenden SVG-Code für diese Grafik. Überprüfen Sie, ob Ihr Code stimmt, indem Sie die Grafik mit einem Klick auf die Lupe anzeigen.

Kopieren Sie Ihren Code am Schluss hierhin:

Laden...

---