Einleitung

SVG-Grafiken

Im Rahmen des Informatikunterrichtes der Sekundarstufe II (Klassenstufe 12) wurden im Unterricht und zum Teil auch zu Hause von den Schülern SVG-Grafiken „per Hand“ programmiert. D. h. diese Grafiken wurden nicht mit einem Vektorgrafikprogramm erzeugt sondern mit einem Texteditor geschrieben. Ein einfaches Beispiel soll das verdeutlichen:

Quelltext

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.1" baseProfile="full"
     width="1000px" height="400px">

<!-- Ein einfaches Auto -->

<!-- Die Straße -->
<line x1="0" y1="350" x2="1000" y2="350" stroke="darkgrey" stroke-width="70"/>


<!-- KAROSSERIE ANFANG -->
<rect x="100" y="170" width="600" height="130" fill="green"/>
<polygon points="170,170 200,50 450,50 550,170" fill="green"/>
<!-- Tür -->
<polygon points="350,60 440,60 540,175 540,290 350,290" fill="darkgreen"/>
<!-- Fenster -->
<polygon points="360,70 430,70 520,170 360,170" fill="silver"/>
<polygon points="210,70 340,70 340,170 190,170" fill="silver"/>
<!-- Scheinwerfer -->
<line x1="700" y1="185" x2="1000" y2="200" stroke="yellow" stroke-width="8"/>
<line x1="700" y1="190" x2="1000" y2="220" stroke="yellow" stroke-width="8"/>
<line x1="700" y1="195" x2="1000" y2="240" stroke="yellow" stroke-width="8"/>
<line x1="700" y1="200" x2="1000" y2="260" stroke="yellow" stroke-width="8"/>
<line x1="700" y1="205" x2="1000" y2="280" stroke="yellow" stroke-width="8"/>
<line x1="700" y1="210" x2="1000" y2="300" stroke="yellow" stroke-width="8"/>
<rect x="699" y="180" width="10" height="40" fill="darkgreen"/>
<!-- KAROSSERIE ENDE -->

<!-- RÄDER ANFANG -->
<circle cx="200" cy="300" r="50" fill="#222222" stroke="black" stroke-width="5"/>
<circle cx="200" cy="300" r="30" fill="silver" stroke="darksilver" stroke-width="2"/>

<circle cx="600" cy="300" r="50" fill="#222222" stroke="black" stroke-width="5"/>
<circle cx="600" cy="300" r="30" fill="silver" stroke="darksilver" stroke-width="2"/>
<!-- RÄDER ENDE -->

</svg>

Grafikausgabe

Die Grafik sieht dann im Webbrowser oder einem SVG-Betrachter so aus:

Auto