ReLast - Klassik

JavaScript ist deaktiviert.
Möglicherweise haben Sie JavaScript in Ihrem Browser deaktiviert oder Ihr Browser hat aktive Inhalte automatisch gefiltert. JavaScript ist für einige Bereiche auf dieser Webseite notwendig um alle Funktionen anbieten zu können.
Die Informationen dieser Webseite werden aber trotzdem zur Verfügung stehen.

SVG

SVG, Scalable Vector Graphics. Ein Grafikformat das in XML notiert wird. Das bedeutet die Bilddateien werden in Textform abgelegt. Somit kann nicht nur jedes Bild mit einem Texteditor bearbeitet werden, sondern wir können die Bilder auch direkt in HTML-Dokumente einbinden. Ganz nebenbei sind sie vollständig durchsuchbar, ist ja alles Text.

Hallo Welt in SVG

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
	<rect width="100%" height="100%" fill="red" />
	<text x="200" y="125" font-size="60" text-anchor="middle" fill="white">Hallo Welt!</text>
</svg>

Grundlagen

Einbinden als Bilddatei

<img src="bilddatei.svg" >

Einbinden in HTML

<!DOCTYPE html>
<html lang="de">
	<head>
		...
	</head>
	<body>
		...
		<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
			...
		</svg>
		...
	</body>
</html>

Title-Tag

Jede Grafik kann einen Titel enthalten.

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
	<title>Titel des Bildes</title>
	...
</svg>

Description-Tag

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
	<title>Titel des Bildes</title>
	<desc>Beschreibung des Bildes</desc>
	...
</svg>

Elemente

Linie

<line x1="0" y1="0" x2="300" y2="300" stroke-width="3" stroke="blue" />

Linien mit gerundeten Enden

<line x1="0" y1="0" x2="300" y2="300" stroke-width="10" stroke="blue" stroke-linecap="round" />

Rechteck

<rect x="50" y="50" width="200" height="200" stroke-width="3" stroke="black" fill="blue" />

Rechteck mit gerundeten Ecken

<rect x="50" y="50" rx="8" ry="8" width="200" height="200" stroke-width="3" stroke="black" fill="blue" />

Kreis

<circle cx="150" cy="150" r="40" stroke-width="3" stroke="black" fill="white" />

Ellipse

<ellipse cx="200" cy="100" rx="40" ry="60" stroke-width="3" stroke="black" fill="white" />

Polygon

<polygon points="10,10 50,50 10,90" stroke-width="3" stroke="black" fill="white" />

Polyline

<polyline points="10,10 50,50 100,10 120,80 270,100 140,130" stroke-width="3" stroke="silver" stroke-linecap="round" fill="none" />

Text

<text x="200" y="125" font-size="60" text-anchor="middle" stroke-width="1" stroke="black" >I love SVG!</text>

text-anchor="left"
text-anchor="middle"
text-anchor="right"

Link

Verweise werden ähnlich wie in HTML angegeben. Inhalt des Verweises kann ein beliebiges Element sein, Text ebenso wie bspw. ein Kreis.

<a xlink:href="...">
	<text ...
</a>

<a xlink:href="...">
	<circle ...
</a>

Bilder

Es können auch andere Bilder eingebunden und somit in SVG "verschachtelt" werden.

<image xlink:href="..." x="..." y="..." width="..." height="..." />

Gruppierungen

Wenn mehrere Elemente die gleichen Eigenschaften haben sollen, kann man diese gruppieren. Alle Elemente innerhalb der Gruppe übernehmen die Eigenschaften der Gruppe.

<g fill="none" stroke="black">
	<line ...
	<rect ...
<g>

Attribute

fill

fill="..." - definiert die Farbe der Füllung (none, white, black, red, green, blue, ..., #FFFFFF, #EEEEEE, #666666, ...)
fill-opacity="..." - definiert die Deckkraft der Farbe durch eine Prozentuale Angabe zwischen 0 und 1 (0, 0.5, 1, ...)

stroke

stroke="..." - definiert die Farbe des Striches (Farbangabe)
stroke-width="..." - definiert die Stärke des Striches (in Pixel)
stroke-linecap="..." - definiert den Abschluss des Striches (butt, round, square)
stroke-dasharray="..." - definiert gepunktete Linienführung durch Prozentuale Verteilung (in Pixel)

transform

Jedes Element kann transformiert werden, die Transformation bezieht sich dabei auf Position und Rotation.

transform="translate(x,y)" - Angabe für X und Y in Pixeln (+X | -X , +Y | -Y)
transform="rotate(grad)" - Angabe zur Rotation in Grad (-360..0..360)
transform="translate(x,y) rotate(grad)" - kombinierte Angabe

transform="translate(100,100) rotate(45)"

<text x="100" y="100" font-size="16" text-anchor="middle" stroke-width="1" stroke="black" transform="translate(100,100) rotate(45)">I love SVG!</text>

Besondere Bedeutung erhalten Transformationen im Zusammenhang mit Gruppierungen. So kann der Startpunkt einer Gruppe verschoben werden. Alle Elemente innerhalb der Gruppe bestimmen ihre Position relativ zur Gruppe. Auf diese Weise lassen sich auch komplexe Figuren einmalig definiert in beliebig verschobener und gedrehter Position verwenden.

<text x="100" y="100" font-size="16" text-anchor="middle" stroke-width="1" stroke="black" >I love SVG!</text>
<g transform="translate(100,100) rotate(90)">
	<text x="100" y="100" font-size="16" text-anchor="middle" stroke-width="1" stroke="black" >I love SVG!</text>
<g>

Responsive

SVG-Grafiken eignen sich wegen ihrer Art (saklierbar) für den responsiven Einsatz. Erreicht wird das am einfachsten mit der prozentualen Angabe "100%" für Breite und Höhe. Der Bildausschnitt der betrachtet werden soll wird dann mit dem "viewport" festgelegt.

Wir nehmen die bisherigen Beispiele, ein Bild mit 300 Pixel Breite und 300 Pixel Höhe, und machen es responsive.

<!DOCTYPE html>
<html lang="de">
	<head>
		<style>
			.svgbox { width: 50%; }
		</style>
	</head>
	<body>
		<div class="svgbox">
			<svg width="100%" height="100%" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
				...
			</svg>
		</div>
	</body>
</html>

Das Bild nimmt immer den gesamten Platz seines umschließenden Elements ein, in diesem Fall ein DIV. Das DIV wiederum nimmt die Hälfte der Bildschirmbreite ein. Wie hoch das Bild sein soll wird anhand der verfügbaren Breite automatisch errechnet. Verringert sich die Breite, verkleinert sich das Bild.

Um das ganze deutlicher zeigen zu können, hier ein Beispiel mit einem Männchen das eine Hantelstange hebt.

<!DOCTYPE html>
<html lang="de">
	<head>
		<style>
			.svgbox { width: 100%; }
		</style>
	</head>
	<body>
		<div class="svgbox">
			<svg width="100%" height="100%" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
				// Hintergrund
				<rect width="100%" height="100%" fill="white" />
				// Gruppierung
				<g stroke="darkblue" stroke-width="10" stroke-linecap="round">
					// Stange
					<line x1="10" y1="40" x2="290" y2="40" />
					// Gewichte links
					<line x1="20" y1="30" x2="20" y2="50" />
					<line x1="30" y1="20" x2="30" y2="60" />
					<line x1="40" y1="10" x2="40" y2="70" />
					// Gewichte rechts
					<line x1="260" y1="10" x2="260" y2="70" />
					<line x1="270" y1="20" x2="270" y2="60" />
					<line x1="280" y1="30" x2="280" y2="50" />
					// Unterarme
					<line x1="60" y1="40" x2="90" y2="90" />
					<line x1="240" y1="40" x2="220" y2="90" />
					// Oberarme
					<line x1="90" y1="90" x2="150" y2="120" />
					<line x1="220" y1="90" x2="150" y2="120" />
					// Körper
					<line x1="150" y1="100" x2="150" y2="175" />
					// Kopf
					<circle cx="150" cy="80" r="20" fill="white" />
					// Beine Oberschenkel
					<line x1="150" y1="175" x2="115" y2="220" />
					<line x1="150" y1="175" x2="170" y2="220" />
					// Beine Unterschenkel
					<line x1="115" y1="220" x2="110" y2="275" />
					<line x1="170" y1="220" x2="170" y2="275" />
					// Füße
					<line x1="110" y1="275" x2="90" y2="290" />
					<line x1="170" y1="275" x2="180" y2="290" />
				</g>
			</svg>
		</div>
	</body>
</html>

Das ganze sieht dann so aus: (spielt ruhig etwas mit dem Browser-Fenster)

Referenzen

Datenschutz | Impressum