... just another site around the web ...





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>

Geometrische Formen

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

Weitere Elemente

Text

<text x="200" y="125" font-size="60" text-anchor="middle" fill="white">I love SVG!</text>

Text rotieren

<text x="200" y="125" font-size="60" text-anchor="middle" fill="white" transform="rotate(30 20,40)">I love SVG!</text>

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>

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)

// Hintergrund // Stange // Gewichte links // Gewichte rechts // Unterarme // Oberarme // Körper // Kopf // Beine Oberschenkel // Beine Unterschenkel // Füße

Referenzen









Copyright © 2017

Impressum