Scalable Vector Graphics - Versionsgeschichte

Kowa am 15. Mai 2019 um 14:00 Uhr

2019-05-15T14:00:15Z

← Nächstältere Version		Version vom 15. Mai 2019, 14:00 Uhr
Zeile 3:		Zeile 3:
	}}		}}

	=Definition=		==Definition==
	Scalable Vector Graphics (SVG) ist eine XML-basierte, textorientierte Auszeichnungssprache. Mit ihr lassen sich zweidimensionale skalierbare Grafiken beschreiben. Erlaubt sind innerhalb von SVG-Dateien auch Bilder und Text als grafische Objekte. SVG wurde im September 2001 vom W3C als Standard veröffentlicht. Auch unterstützen die meisten Webbrowser, die sich an den W3C-Standard halten dieses Format. Eine Ausnahme bildet jedoch der Internet Explorer. In ihm lassen sich SVG-Inhalte jedoch mittels eines Plugins von Adobe darstellen. Ebenso unterstützen etablierte Vektorgrafikprogramme wie [[Illustrator\|Adobe Illustrator]] dieses Format.		Scalable Vector Graphics (SVG) ist eine XML-basierte, textorientierte Auszeichnungssprache. Mit ihr lassen sich zweidimensionale skalierbare Grafiken beschreiben. Erlaubt sind innerhalb von SVG-Dateien auch Bilder und Text als grafische Objekte. SVG wurde im September 2001 vom W3C als Standard veröffentlicht. Auch unterstützen die meisten Webbrowser, die sich an den W3C-Standard halten dieses Format. Eine Ausnahme bildet jedoch der Internet Explorer. In ihm lassen sich SVG-Inhalte jedoch mittels eines Plugins von Adobe darstellen. Ebenso unterstützen etablierte Vektorgrafikprogramme wie [[Illustrator\|Adobe Illustrator]] dieses Format.

	=Merkmale=		==Merkmale==
	SVG ist eine auf XML basierte Auszeichnungssprache. Sie ist ein offizieller Standard des W3C. SVG Grafiken besehen aus ASCII-Code und können somit mit jedem beliebigen Texteditor erstellt werden. Wie alle Vektorgrafikformate sind auch SVG-Grafiken ohne Qualitätsverlust skalierbar. SVG unterstützt Stylesprachen wie [[CSS\|CSS]] und Scriptsprachen wie [[JavaScript\|JavaScript]].		SVG ist eine auf XML basierte Auszeichnungssprache. Sie ist ein offizieller Standard des W3C. SVG Grafiken besehen aus ASCII-Code und können somit mit jedem beliebigen Texteditor erstellt werden. Wie alle Vektorgrafikformate sind auch SVG-Grafiken ohne Qualitätsverlust skalierbar. SVG unterstützt Stylesprachen wie [[CSS\|CSS]] und Scriptsprachen wie [[JavaScript\|JavaScript]].

	=Struktur=		==Struktur==
	SVG erfüllt den XML-Standard und nutzt deshalb die selbe Syntax. Somit ist die Grafik in einer Baumstruktur definiert, die aus einzelnen Elementen besteht, welchen Attribute zugewiesen werden.		SVG erfüllt den XML-Standard und nutzt deshalb die selbe Syntax. Somit ist die Grafik in einer Baumstruktur definiert, die aus einzelnen Elementen besteht, welchen Attribute zugewiesen werden.

Zeile 23:		Zeile 23:
	</svg>		</svg>

	=Elemente=		==Elemente==
	==Pfad==		===Pfad===
	Der Pfad ist das Basis-Element für SVG. Aus ihm leiten sich alle anderen Grundformen ab.		Der Pfad ist das Basis-Element für SVG. Aus ihm leiten sich alle anderen Grundformen ab.

Zeile 51:		Zeile 51:
	<path d="M 20 20 l -2 2 c 6 6 -4 3 -8 18 q 10 5 5.33 20" />		<path d="M 20 20 l -2 2 c 6 6 -4 3 -8 18 q 10 5 5.33 20" />

	==Kreis==		===Kreis===
	Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:		Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:
	<circle cx="100" cy="100" r="50" />		<circle cx="100" cy="100" r="50" />

	==Ellipse==		===Ellipse===
	Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:		Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:
	<ellipse cx="100" cy="100" rx="50" ry="20" />		<ellipse cx="100" cy="100" rx="50" ry="20" />

	==Rechteck==		===Rechteck===
	Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:		Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:
	<rect x="100" y="100" width="100" height="200" />		<rect x="100" y="100" width="100" height="200" />

	==Linie==		===Linie===
	SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:		SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:
	<line x1="100" y1="100" x2="200" y2="200" />		<line x1="100" y1="100" x2="200" y2="200" />

	==Polylinie==		===Polylinie===
	Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:		Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:
	<polyline points="100 100 200 200 300 40" />		<polyline points="100 100 200 200 300 40" />

	==Polygon==		===Polygon===
	Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:		Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:
	<polygon points="100 100 100 200 150 200" />		<polygon points="100 100 100 200 150 200" />

	==Text==		===Text===
	Ein Text wird durch seine Position und seinen Inhalt beschrieben:		Ein Text wird durch seine Position und seinen Inhalt beschrieben:
	<text x="100" y="100" font-size="40px">Hallo Welt!</text>		<text x="100" y="100" font-size="40px">Hallo Welt!</text>

	=Quellen & Links=		==Quellen & Links==
	*[[http://www.w3.org/Graphics/SVG/ W3C:SVG]]		*[[http://www.w3.org/Graphics/SVG/ W3C:SVG]]
	*[[http://svg.tutorial.aptico.de/start.php SVG Tutorial]]		*[[http://svg.tutorial.aptico.de/start.php SVG Tutorial]]

Kowa am 2. September 2011 um 13:25 Uhr

2011-09-02T13:25:44Z

← Nächstältere Version		Version vom 2. September 2011, 13:25 Uhr
Zeile 1:		Zeile 1:
			{{Verbesserungswürdiger Inhalt
			\| {{SITENAME}}-Regeln = true
			}}

	=Definition=		=Definition=
	Scalable Vector Graphics (SVG) ist eine XML-basierte, textorientierte Auszeichnungssprache. Mit ihr lassen sich zweidimensionale skalierbare Grafiken beschreiben. Erlaubt sind innerhalb von SVG-Dateien auch Bilder und Text als grafische Objekte. SVG wurde im September 2001 vom W3C als Standard veröffentlicht. Auch unterstützen die meisten Webbrowser, die sich an den W3C-Standard halten dieses Format. Eine Ausnahme bildet jedoch der Internet Explorer. In ihm lassen sich SVG-Inhalte jedoch mittels eines Plugins von Adobe darstellen. Ebenso unterstützen etablierte Vektorgrafikprogramme wie [[Illustrator\|Adobe Illustrator]] dieses Format.		Scalable Vector Graphics (SVG) ist eine XML-basierte, textorientierte Auszeichnungssprache. Mit ihr lassen sich zweidimensionale skalierbare Grafiken beschreiben. Erlaubt sind innerhalb von SVG-Dateien auch Bilder und Text als grafische Objekte. SVG wurde im September 2001 vom W3C als Standard veröffentlicht. Auch unterstützen die meisten Webbrowser, die sich an den W3C-Standard halten dieses Format. Eine Ausnahme bildet jedoch der Internet Explorer. In ihm lassen sich SVG-Inhalte jedoch mittels eines Plugins von Adobe darstellen. Ebenso unterstützen etablierte Vektorgrafikprogramme wie [[Illustrator\|Adobe Illustrator]] dieses Format.
Zeile 80:		Zeile 84:
	*[[http://www.s-v-g.net/ SVG-FAQ]]		*[[http://www.s-v-g.net/ SVG-FAQ]]

	~~[[Kategorie:GlossarWiki]]~~
	[[Kategorie:Glossar]]		[[Kategorie:Glossar]]

Akibwoii: /* Quellen & Links */

2008-07-14T02:03:15Z

Quellen & Links

← Nächstältere Version		Version vom 14. Juli 2008, 02:03 Uhr
Zeile 76:		Zeile 76:

	=Quellen & Links=		=Quellen & Links=
			*[[http://www.w3.org/Graphics/SVG/ W3C:SVG]]
	*[[http://svg.tutorial.aptico.de/start.php SVG Tutorial]]		*[[http://svg.tutorial.aptico.de/start.php SVG Tutorial]]
			*[[http://www.s-v-g.net/ SVG-FAQ]]

	[[Kategorie:GlossarWiki]]		[[Kategorie:GlossarWiki]]
	[[Kategorie:Glossar]]		[[Kategorie:Glossar]]

Akibwoii am 14. Juli 2008 um 02:00 Uhr

2008-07-14T02:00:20Z

← Nächstältere Version		Version vom 14. Juli 2008, 02:00 Uhr
Zeile 49:		Zeile 49:
	==Kreis==		==Kreis==
	Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:		Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:
	<circle cx="100" cy="100" r="50" />		<circle cx="100" cy="100" r="50" />

	==Ellipse==		==Ellipse==
	Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:		Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:
	<ellipse cx="100" cy="100" rx="50" ry="20" />		<ellipse cx="100" cy="100" rx="50" ry="20" />

	==Rechteck==		==Rechteck==
	Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:		Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:
	<rect x="100" y="100" width="100" height="200" />		<rect x="100" y="100" width="100" height="200" />

	==Linie==		==Linie==
	SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:		SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:
	<line x1="100" y1="100" x2="200" y2="200" />		<line x1="100" y1="100" x2="200" y2="200" />

	==Polylinie==		==Polylinie==
	Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:		Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:
	<polyline points="100 100 200 200 300 40" />		<polyline points="100 100 200 200 300 40" />

	==Polygon==		==Polygon==
	Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:		Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:
	<polygon points="100 100 100 200 150 200" />		<polygon points="100 100 100 200 150 200" />

	==Text==		==Text==
	Ein Text wird durch seine Position und seinen Inhalt beschrieben:		Ein Text wird durch seine Position und seinen Inhalt beschrieben:
	<text x="100" y="100" font-size="40px">Hallo Welt!</text>		<text x="100" y="100" font-size="40px">Hallo Welt!</text>

	=Quellen & Links=		=Quellen & Links=

Akibwoii: /* Pfad */

2008-07-14T01:59:39Z

Pfad

← Nächstältere Version		Version vom 14. Juli 2008, 01:59 Uhr
Zeile 26:		Zeile 26:

	M/m – moveto = Stift dorthin bewegen		M/m – moveto = Stift dorthin bewegen

	L/l – lineto = mit Stift dorthin zeichnen		L/l – lineto = mit Stift dorthin zeichnen

	Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)		Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)

	C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)		C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)

	Z/z – Pfad schließen		Z/z – Pfad schließen

	H/h – horizontal line = horizontale Linie zeichnen (X-Wert)		H/h – horizontal line = horizontale Linie zeichnen (X-Wert)

	V/v – vertical line = vertikale Linie zeichnen (Y-Wert)		V/v – vertical line = vertikale Linie zeichnen (Y-Wert)

	A/a – elliptical arc = Bogenkurve		A/a – elliptical arc = Bogenkurve

Akibwoii: /* Struktur */

2008-07-14T01:59:14Z

Struktur

← Nächstältere Version		Version vom 14. Juli 2008, 01:59 Uhr
Zeile 10:		Zeile 10:
	Jede Datei beginnt mit der XML-Deklaration und der Dokumenttyp-Deklaration, wie auch bei anderen XML-basierten Sprachen üblich. Das Wurzelelement einer SVG-Datei ist <svg>.		Jede Datei beginnt mit der XML-Deklaration und der Dokumenttyp-Deklaration, wie auch bei anderen XML-basierten Sprachen üblich. Das Wurzelelement einer SVG-Datei ist <svg>.

	<?xml version="1.0" encoding="utf-8"?>		<?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">		<!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"		<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"		xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
	version="1.1" baseProfile="full"		version="1.1" baseProfile="full"
	width="800mm" height="600mm">		width="800mm" height="600mm">
	<!--Inhalt der Datei -->		<!--Inhalt der Datei -->
	</svg>		</svg>

	=Elemente=		=Elemente=

Akibwoii: /* Pfad */

2008-07-14T01:58:48Z

Pfad

← Nächstältere Version		Version vom 14. Juli 2008, 01:58 Uhr
Zeile 35:		Zeile 35:

	Absoluter Pfad:		Absoluter Pfad:
	<path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />		<path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

	Identischer relativer Pfad:		Identischer relativer Pfad:
	<path d="M 20 20 l -2 2 c 6 6 -4 3 -8 18 q 10 5 5.33 20" />		<path d="M 20 20 l -2 2 c 6 6 -4 3 -8 18 q 10 5 5.33 20" />

	==Kreis==		==Kreis==

Akibwoii: /* Pfad */

2008-07-14T01:58:05Z

Pfad

← Nächstältere Version		Version vom 14. Juli 2008, 01:58 Uhr
Zeile 25:		Zeile 25:
	Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren bilden die Anweisungen, wie der Pfad gezeichnet werden soll.		Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren bilden die Anweisungen, wie der Pfad gezeichnet werden soll.

	- M/m – moveto = Stift dorthin bewegen		M/m – moveto = Stift dorthin bewegen
	- L/l – lineto = mit Stift dorthin zeichnen		L/l – lineto = mit Stift dorthin zeichnen
	- Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)		Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
	- C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)		C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)
	- Z/z – Pfad schließen		Z/z – Pfad schließen
	- H/h – horizontal line = horizontale Linie zeichnen (X-Wert)		H/h – horizontal line = horizontale Linie zeichnen (X-Wert)
	- V/v – vertical line = vertikale Linie zeichnen (Y-Wert)		V/v – vertical line = vertikale Linie zeichnen (Y-Wert)
	- A/a – elliptical arc = Bogenkurve		A/a – elliptical arc = Bogenkurve

	Absoluter Pfad:		Absoluter Pfad:

Akibwoii: /* Pfad */

2008-07-14T01:57:34Z

Pfad

← Nächstältere Version		Version vom 14. Juli 2008, 01:57 Uhr
Zeile 25:		Zeile 25:
	Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren bilden die Anweisungen, wie der Pfad gezeichnet werden soll.		Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren bilden die Anweisungen, wie der Pfad gezeichnet werden soll.

	* M/m – moveto = Stift dorthin bewegen		- M/m – moveto = Stift dorthin bewegen
	* L/l – lineto = mit Stift dorthin zeichnen		- L/l – lineto = mit Stift dorthin zeichnen
	* Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)		- Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
	* C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)		- C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)
	* Z/z – Pfad schließen		- Z/z – Pfad schließen
	* H/h – horizontal line = horizontale Linie zeichnen (X-Wert)		- H/h – horizontal line = horizontale Linie zeichnen (X-Wert)
	* V/v – vertical line = vertikale Linie zeichnen (Y-Wert)		- V/v – vertical line = vertikale Linie zeichnen (Y-Wert)
	* A/a – elliptical arc = Bogenkurve		- A/a – elliptical arc = Bogenkurve

	Absoluter Pfad:		Absoluter Pfad:

Akibwoii: /* Elemente */

2008-07-14T01:56:31Z

Elemente

← Nächstältere Version		Version vom 14. Juli 2008, 01:56 Uhr
Zeile 20:		Zeile 20:

	=Elemente=		=Elemente=
			==Pfad==
			Der Pfad ist das Basis-Element für SVG. Aus ihm leiten sich alle anderen Grundformen ab.

			Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren bilden die Anweisungen, wie der Pfad gezeichnet werden soll.

			* M/m – moveto = Stift dorthin bewegen
			* L/l – lineto = mit Stift dorthin zeichnen
			* Q/q – quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
			* C/c – kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)
			* Z/z – Pfad schließen
			* H/h – horizontal line = horizontale Linie zeichnen (X-Wert)
			* V/v – vertical line = vertikale Linie zeichnen (Y-Wert)
			* A/a – elliptical arc = Bogenkurve

			Absoluter Pfad:
			<path d="M 20 20 L 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

			Identischer relativer Pfad:
			<path d="M 20 20 l -2 2 c 6 6 -4 3 -8 18 q 10 5 5.33 20" />

			==Kreis==
			Ein Kreis wird durch (die x- und y-Position seines Mittelpunktes und) den Radius beschrieben:
			<circle cx="100" cy="100" r="50" />

			==Ellipse==
			Eine Ellipse wird durch ihre beiden Halbachsenradien beschrieben:
			<ellipse cx="100" cy="100" rx="50" ry="20" />

			==Rechteck==
			Ein Rechteck kann durch seine Postion, Höhe und Breite beschrieben werden:
			<rect x="100" y="100" width="100" height="200" />

			==Linie==
			SVG beschreibt eine Linie durch die x- und y-Positionen ihres Anfangs- und Startpunktes:
			<line x1="100" y1="100" x2="200" y2="200" />

			==Polylinie==
			Eine Polylinie ist eine Reihung meherer aufeinander folgender Linien. Ihre Koordinatenpaare werden dabei einfach fortlaufend hinter einander geschrieben:
			<polyline points="100 100 200 200 300 40" />

			==Polygon==
			Ein Polygon (oder Vieleck) wird durch seine Punkte geschrieben. Auch hier werden die Koordinatenpaare einfach hinter einander geschrieben:
			<polygon points="100 100 100 200 150 200" />

			==Text==
			Ein Text wird durch seine Position und seinen Inhalt beschrieben:
			<text x="100" y="100" font-size="40px">Hallo Welt!</text>

	=Quellen & Links=		=Quellen & Links=