Aufgaben zur Informationsdarstellung mit Grafikdokumenten

1
Sollte man das Bild als Pixelgrafik oder Vektorgrafik speichern?
1. Pixelgrafik
  Vektorgrafik
  
  Für diese Aufgabe benötigst Du folgendes Grundwissen: Vektorgrafik
  Auf dem Bild siehst du das Logo der Wikimedia Commons. Da das Logo aus einfachen Formen besteht und du es in verschiedenen Größen (verschiedene Bildschirme wie zum Beispiel PC oder Handy oder auch für Plakate) verwenden können solltest, brauchst du hier eine Vektorgrafik.
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉
2. Pixelgrafik
  Vektorgrafik
  
  Für diese Aufgabe benötigst Du folgendes Grundwissen: Pixelgrafik
  Du siehst hier ein Foto der Skyline von New York. Da das Foto viele Kleinigkeiten abbildet und sehr farbenreich ist, verwendest du zur Darstellung eine Pixelgrafik.
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉
3. Pixelgrafik
  Vektorgrafik
  
  Für diese Aufgabe benötigst Du folgendes Grundwissen: Vektorgrafik
  Auf dem Bild siehst du die Flagge der Europäischen Union. Da die Flagge aus einfachen Formen besteht und du sie in verschiedenen Größen verwenden können solltest, brauchst du hier eine Vektorgrafik.
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉
2
Was sind Vorteile von Vektorgrafiken gegenüber Pixelgrafiken?
Wenn man das Bild vergrößert, bleibt es trotzdem scharf.
Die Datei verbraucht im Normalfall weniger Speicherplatz.
Man kann detailreiche Bilder leicht speichern.
Wenn das Bild auf einem Bildschirm dargestellt werden soll, muss es zuerst berechnet werden.
3
Die folgenden Vektorgrafiken bestehen nur aus den Grundformen Linie, Ellipse, Rechteck und Dreieck.
Beschreibe jeweils, wie die Grundformen kombiniert werden müssen, um diese Grafiken zu erzeugen.
Versuche sie selbst nachzubauen.
2. Für diese Aufgabe benötigst Du folgendes Grundwissen: Vektorgrafik erstellen
  Als Grundgerüst des Fahrrads zieht man einfache Linien. Als Sattel wählt man ein umgedrehtes Dreieck. Die Räder sind Kreise, welche mit Linien überdeckt werden. Die Pedale sind kleine Rechtecke. Für das Licht wurde eine Ellipse gewählt
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉
4
Das hier ist der Inhalt einer svg-Datei.
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350px" height="230px"> <rect fill="blue" x="0" y="0" width="350" height="230" /> <circle fill= "red" cx="175" cy="115" r="115" /> <rect fill="black" x="125" y="65" width="100" height="100" /> </svg>
1. Nimm ein Blatt Papier und zeichne deine Vermutung, wie das Bild aussieht, wenn der Computer es rendert.
  
  Vertiefung zu Vektorgrafiken
  Das svg-Dokument
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="350px" height="230px"> ... </svg>
  In diesem Teil wird das SVG-Dokument beschrieben. Du kannst hier erkennen, dass die Standardgröße des Bildes 350 Pixel breit und 230 Pixel hoch sein soll.
  Der Inhalt des Dokuments
  Eingeschlossen in dem <svg> und </svg> ist der Inhalt des Dokuments. Wie du an dem Code sehen kannst, ist der Inhalt bei SVG-Dateien nicht jeder einzelne Bildpunkt, sondern ganze Formen, nämlich in diesem Fall rect und circle.
  rect: Das steht für ein Rechteck (auf Englisch "rectangle").
  circle: Das ist Englisch für "Kreis".
  Erstes Element des Bildes: Rechteck
  <rect fill="blue" x="0" y="0" width="350" height="230" />
  Dieser Teil steht für ein blaues Rechteck, das an der Stelle $(0|0)$ beginnt und 350 x 230 Pixel groß ist.
  Zweites Element des Bildes: Kreis
  <circle fill= "red" cx="175" cy="115" r="115" />
  Dieser Teil steht für einen roten Kreis, der den Mittelpunkt (center-x, center-y) bei $(175|115)$ hat. Das ist genau die Mitte des Bildes, da $350 : 2 = 175$ und $230 : 2 = 115$ . Der Radius ist 115 Pixel, also geht der Kreis bis ganz nach oben und ganz nach unten im Bild.
  Drittes Element des Bildes: Rechteck
  <rect fill="black" x="125" y="65" width="100" height="100" />
  Dieser letzte Teil steht für ein schwarzes Rechteck, das bei $(125{,}65)$ beginnt und 100 x 100 Pixel groß ist. Das Rechteck liegt im Inneren des roten Kreises.
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉
  "rect" steht für ein Rechteck (auf Englisch "rectangle")
  "circle" ist Englisch für Kreis
2. Speichere den Code als eine Datei mit der Endung .svg und öffne sie - zum Beispiel in einem Browser. Überprüfe damit dein Ergebnis aus der Aufgabe a.
  
  Hast du eine Frage oder Feedback?
  Kommentiere hier 👉