Vektorgrafiken – Bilder mit Formeln

lock
Bevorstehend

Sie lernen, wie Vektorgrafiken im Gegensatz zu Rasterbildern aufgebaut sind. Anhand eines Online-Editors erstellen Sie eigene Formen und erkennen, dass Vektoren nicht aus Pixeln bestehen, sondern aus mathematisch beschriebenen Linien und Flächen.

Ziele dieses Moduls
Keine Ziele hinterlegt.

Im Gegensatz zur Rastergrafik (Pixelgrafik) werden Vektorgrafiken nicht punktweise gespeichert, sondern als mathematische Beschreibungen von Linien, Kreisen und Flächen.
Das macht sie beliebig skalierbar, da der Computer beim Vergrössern einfach die Form neu berechnet, statt Pixel zu dehnen.
Vektorgrafiken werden für Logos, Symbole, Icons oder technische Zeichnungen verwendet.

🟦 Einführung: Was ist eine Vektorgrafik?

Eine Vektorgrafik beschreibt geometrische Formen mit mathematischen Parametern:

  • Eine Linie: von Punkt (x₁, y₁) nach (x₂, y₂)

  • Ein Kreis: Mittelpunkt + Radius

  • Eine Fläche: Umriss aus Pfaden

Beim Vergrössern wird das Bild neu berechnet – deshalb bleibt es immer scharf.

Typische Anwendungen: Logos, Icons, Schriftzüge, technische Pläne, Diagramme

🎨 Praxisübung – Erstellen Sie Ihre eigene Vektorgrafik

🔗 Online-Tool:

👉 FreeSVGEditor.com – Online SVG Editor

👉 Boxy SVG

 

Aufgabe:

  1. Öffnen Sie den Editor über den obigen Link.

  2. Erstellen Sie folgende Formen:

    • Ein Kreis, ein Rechteck und eine Linie

    • Färben Sie die Formen unterschiedlich ein.

  3. Vergrössern Sie das Bild stark:

    • Bleiben die Kanten scharf?

    • Vergleichen Sie das Verhalten mit einem Pixelbild.

  4. Exportieren Sie Ihre Zeichnung als SVG-Datei.
    Öffnen Sie die Datei in einem Texteditor und betrachten Sie den Code.
    Sie finden darin z. B.:

    <circle cx="50" cy="50" r="20" fill="red" />

  5. (Optional) Zeichnen Sie ein eigenes kleines Logo oder Icon mit 2–3 Formen.

🔍 Vergleich Raster vs. Vektor

Merkmal Rastergrafik Vektorgrafik
Aufbau Pixel Formen (Linien, Pfade)
Skalierbarkeit Qualitätsverlust beim Vergrössern verlustfrei
Dateigrösse abhängig von Auflösung abhängig von Anzahl Objekte
Formate JPG, PNG, GIF SVG, PDF, EPS
Einsatz Fotos, Scans Logos, Icons, Diagramme

💬 Reflexion

  • Wann würden Sie Rastergrafiken verwenden, wann Vektorgrafiken?

  • Warum bleiben Vektorgrafiken beim Zoomen scharf?

  • Welche Gemeinsamkeit haben SVG-Dateien mit Programmcode?

📎 Visualisierungstipp

Zeigen Sie zwei identische Grafiken nebeneinander:

  • Ein SVG (Vektor) und

  • Dasselbe als PNG (Raster)

Zoomen Sie hinein oder lassen Sie die Schüler:innen vergleichen:

Warum bleibt das eine klar und das andere wird „klötzchenartig“?