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.
"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.

Dieses Werk steht unter der freien Lizenz
CC BY-SA 4.0 → Was bedeutet das? serlo.org

Aufgaben zur Informationsdarstellung mit Grafikdokumenten

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