Aufgaben zur Informationsdarstellung mit Grafikdokumenten

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>

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
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 👇

Vertiefung zu Vektorgrafiken

Das svg-Dokument

Der Inhalt des Dokuments

Erstes Element des Bildes: Rechteck

Zweites Element des Bildes: Kreis

Drittes Element des Bildes: Rechteck

Hast du eine Frage oder Feedback?

Hast du eine Frage oder Feedback?