Logo des digitalen Schulbuchs inf-schule.de. Schriftzug in Zustandsübergangsdiagramm eines endlichen Automaten.

Exkurs - SVG

Grundgerüst eines SVG-Dokuments

Ein SVG-Dokument hat das folgende Grundgerüst. 

<?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" width="..." height="...">
...
</svg>

Auf die Bedeutung der Angaben im Vorspann wird in XML-Dokumenttypen noch genauer eingegangen.

Rechteck

Ein Rechteck wird mit dem rect-Element beschrieben. Der folgende Quellcode zeigt die Verwendung dieses Elements sowie einige seiner Attribute 

<?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" width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="yellow" stroke="orange"></rect> 
<rect x="25" y="25" width="50" height="50" fill="#33cc33" stroke="none"></rect> 
<rect x="48" y="48" width="4" height="4" fill="none" stroke="rgb(255,255,255)"></rect> 
</svg>

Rechtecke

Kreis

Ein Kreis wird mit dem circle-Element beschrieben. Der folgende Quellcode zeigt die Verwendung dieses Elements sowie einige seiner Attribute 

<?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" width="100" height="100">
<rect x="0" y="0" width="100" height="100" fill="none" stroke="orange"></rect> 
<circle cx="50" cy="25" r="10" fill="red" stroke="black"></circle> 
<circle cx="50" cy="50" r="10" fill="yellow" stroke="black"></circle> 
<circle cx="50" cy="75" r="10" fill="green" stroke="black"></circle> 
</svg>

Kreise

Linie

Eine Linie wird mit dem line-Element beschrieben. Der folgende Quellcode zeigt die Verwendung dieses Elements sowie einige seiner Attribute 

<?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" width="100" height="100">
<line x1="20" y1="0" x2="100" y2="20" stroke="red" stroke-width="2px"></line> 
<line x1="100" y1="20" x2="80" y2="100" stroke="yellow" stroke-width="2px"></line> 
<line x1="80" y1="100" x2="0" y2="80" stroke="green" stroke-width="2px"></line> 
<line x1="0" y1="80" x2="20" y2="0" stroke="blue" stroke-width="2px"></line> 
</svg>

Linien

Polygon

Eine Polygon wird mit dem polygon-Element beschrieben. Der folgende Quellcode zeigt die Verwendung dieses Elements sowie einige seiner Attribute 

<?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" width="100" height="100">
<polygon points="0 0 100 0 100 100 0 100" fill="none" stroke="black"></polygon>
<polygon points="20 0 100 20 80 100 0 80" fill="orange" stroke="red"></polygon>
</svg>

Polygon

Text

Ein Text wird mit dem text-Element beschrieben. Der folgende Quellcode zeigt die Verwendung dieses Elements sowie einige seiner Attribute 

<?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" width="100" height="100">
<rect x="0" y="0" width="100" height="100" stroke="red" fill="none"></rect>
<text x="18" y="55" font-family="verdana" font-size="20px" font-weight="bold" 
fill="blue">
   Hallo!
</text>
</svg>

Text

←Fachkonzept - Vektorgrafik Übungen→
X

Fehler melden

X

Suche