1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
title: SVG
slug: Web/SVG
translation_of: Web/SVG
---
<div class="callout-box">
<strong><a href="/de/docs/SVG/Tutorial" title="SVG/Tutorial">Einführung</a></strong><br>
Dieses Tutorial soll den Einstieg in SVG erleichtern.</div>
<div>
<strong>Scalable Vector Graphics (SVG)</strong> ist eine <a href="/de/docs/XML" title="XML">XML</a>-Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken. Im Grunde ist SVG für Grafiken das, was XHTML für Texte ist.
<p>SVG ähnelt etwas der proprietären Flash-Technologie. Aber was SVG von Flash unterscheidet, ist, dass es ein <a class="external" href="http://www.w3.org/Graphics/SVG/">W3C Standard</a> ist und im Gegensatz zu einem geschlossenem Binärformat auf XML basiert. Es wurde geschaffen, um mit anderen Standards des <a class="external" href="http://www.w3.org/">W3C</a> zusammenzuarbeiten, wie zum Beispiel <a href="/de/docs/CSS" title="CSS">CSS</a>, <a href="/de/docs/DOM" title="DOM">DOM</a> und <a class="external" href="http://www.w3.org/AudioVideo/">SMIL</a>.</p>
</div>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Dokumentation">Dokumentation</h2>
<dl>
<dt>
<a href="/de/docs/SVG/Element" title="SVG/Element">SVG Elementreferenz</a></dt>
<dd>
Detaillierte Informationen über die von Gecko unterstützen SVG Elemente.</dd>
<dt>
HTML-Inhalte mit SVG aufwerten</dt>
<dd>
SVG arbeitet mit HTML, CSS und JavaScript zusammen und kann verwendet werden, um eine normale HTML-Seite oder eine Webapplikation mit Vektorgrafiken zu bereichern.</dd>
</dl>
<ul>
<li>Tutorial zur Verwendung von <a href="/de/docs/SVG_In_HTML_Introduction" title="SVG_in_HTML_einbinden">SVG in HTML</a></li>
<li>Live Beispiele: Google <a class="external" href="http://maps.google.com"> Maps</a> und <a class="external" href="http://docs.google.com">Docs</a> oder <a class="external" href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG Bubble Menü</a></li>
</ul>
<dl>
<dt>
SVG in Mozilla</dt>
<dd>
Hinweise und Informationen über die Implementierung von SVG in Mozilla.</dd>
</dl>
<ul>
<li>Derzeit <a href="/de/docs/SVG_im_Firefox" title="SVG_im_Firefox">unterstützte SVG Features</a> im Firefox</li>
<li><a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> (en)</li>
<li>Eine Übersicht zum <a href="/de/docs/Mozilla_SVG_Projekt" title="Mozilla_SVG_Projekt">Mozilla SVG Projekt</a></li>
<li><a href="/de/docs/SVG/FAQ" title="SVG/FAQ">Häufig gestellte Fragen</a> im Bezug auf SVG und Mozilla</li>
<li>Folien und Demos zu <a class="external" href="http://jwatt.org/svg-open/2009/slides.xhtml" title="http://jwatt.org/svg-open/2009/slides.xhtml">SVG und Mozilla</a> von der SVG Open 2009</li>
</ul>
<dl>
<dt>
<a href="/de/docs/SVG/SVG_Animationen_mit_SMIL" title="SVG/SVG_Animationen_mit_SMIL">SVG Animationen mit SMIL</a></dt>
<dd>
Wie SVG Animationen mittels SMIL realisiert werden können.</dd>
</dl>
<h2 class="Related_Topics" id="Beispiele">Beispiele</h2>
<dl>
<dt>
Das SVG Bildformat</dt>
<dd>
SVG ist ein Bildformat für Vektorgrafiken, welche den großen Vorteil haben, dass sie ohne Verlust der Bildqualität skaliert werden können. Bei Rastergrafiken (Bitmaps) ist dies nicht möglich.</dd>
</dl>
<ul>
<li><a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Löwe</a>, <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Schmetterling</a> & <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tiger</a></li>
<li><a class="external" href="http://plurib.us/1shot/2007/svg_gallery/">SVG Galerie</a></li>
<li>weitere Beispiele: <a class="external" href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples auf croczilla.com</a>, <a class="external" href="http://www.carto.net/papers/svg/samples/">carto.net</a></li>
</ul>
<dl>
<dt>
Animationen und Interaktionen</dt>
<dd>
Wie HTML, hat SVG ein <em>Document Model</em> (DOM) sowie Events und kann mittels JavaScript angesprochen werden. Das erlaubt Entwicklern animierte und interaktive Grafiken zu erstellen.</dd>
</dl>
<ul>
<li>Interaktive <a class="external" href="http://people.mozilla.com/~vladimir/demos/photos.svg">Foto</a> Manipulationen</li>
<li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML Transformationen</a> mittels <code>foreignObject</code></li>
</ul>
<dl>
<dt>
Karten, grafische Darstellungen, Spiele und 3D Experimente</dt>
<dd>
Hier sind einige Beispiele aufgelistet, die starken Gebrauch von SVG machen.</dd>
</dl>
<ul>
<li><a class="external" href="http://www.croczilla.com/svg/samples/svgtetris/svgtetris.svg">Tetris</a>, <a class="external" href="http://www.codedread.com/yastframe.php">Yet Another SVG Tetris</a> & <a class="external" href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li>
<li><a class="external" href="http://files.myopera.com/orinoco/svg/USStates.svg">Find the State</a></li>
<li><a class="external" href="http://www.carto.net/papers/svg/us_population/index.html">Bevölkerungskarte der USA</a> und <a class="external" href="http://www.destatis.de/jetspeed/portal/cms/Sites/destatis/Internet/EN/Content/Statistics/Bevoelkerung/VorausberechnungBevoelkerung/InteraktiveDarstellung/Content75/Bevoelkerungspyramide1W1,templateId=renderSVG.psml">deutsche Bevölkerungspyramide</a></li>
<li><a class="external" href="http://www.treebuilder.de/default.asp?file=441875.xml">3D Box</a> & <a class="external" href="http://www.treebuilder.de/default.asp?file=206524.xml">3D Boxen</a></li>
<li><a class="external" href="http://www.amaltas.org/svgapp">SVG+DOM Tool zum Zeichen</a></li>
</ul>
<p><span class="alllinks"><a href="/de/docs/tag/SVG" title="tag/SVG">Alle anzeigen...</a></span></p>
</td>
<td>
<h2 class="Community" id="Community">Community</h2>
<ul>
<li>Mozillas SVG Foren:</li>
</ul>
<p>{{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</p>
<ul>
<li><a class="external" href="http://wiki.svg.org/">SVG Wiki</a></li>
</ul>
<h2 class="Tools" id="Tools">Tools</h2>
<ul>
<li><a class="external" href="http://www.w3.org/Graphics/SVG/Test/">SVG Test Suite</a></li>
<li><a class="external" href="http://jiggles.w3.org/svgvalidator/">SVG Validator</a></li>
<li><a href="/de/docs/tag/SVG:Tools" title="tag/SVG:Tools">weitere...</a></li>
</ul>
<h2 class="Related_Topics" id="Verwandte_Themen">Verwandte Themen</h2>
<ul>
<li><a href="/de/docs/XML" title="XML">XML</a>, <a href="/de/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<div>
{{HTML5ArticleTOC}}</div>
|
