Wenn ein Browser SVG-Grafiken darstellen kann,
zeigt er die .svg-Dateien direkt im Browserfenster an.
SVG-Quelltexte können aber auch in HTML/XHTML-Dokumente eingebettet werden.
Nachfolgend alle Möglichkeiten SVG-Grafiken in Webseiten zu verwenden und
anschließend zu jeder Möglichkeit ein Beispiel.
Achtung: Zur Zeit - Ende 2002 - werden noch nicht alle
Möglichkeiten von den darstellenden Anwendungen (Browser und SVG Viewer) unterstützt.
- Eine alleinstehende SVG Grafik (können alle Browser).
- Durch einen Verweis in ein HTML/XHTML Dokument einbetten (kann nur IE)
- Intern in ein XHTML Dokument einbetten (kann noch kein Browser)
- Quellcode mit Namensraumangabe in anderem X(HT)ML-Dokument
- Verlinkung in einem HTML/XHTML Dokument durch einen externen Verweis (können alle Browser)
- Als Referenz von Style-Eigenschaften innerhalb von HTML/XHTML Dokumenten (kann noch kein Browser)
- body {background-image:url(grafik.svg);}
Eine alleinstehende SVG Grafik.
Das SVG Dokument wird mit der Dateinamenerweiterung .svg abgespeichert und kann
direkt im Browser angezeigt werden. Alle (svg-fähigen) Browser können diese
alleinstehenden SVG Grafiken anzeigen.
Die Beispiele in diesem Tutorial
sind in der Regel alleinstehende SVG Grafiken.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="280" height="280">
<title>dummy</title>
<desc>ein SVG Smilie</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:60px;
font-weight:bold; fill:black; stroke:black; stroke-width:4px;}
]]>
</style>
<symbol id="smilie">
<desc>ein Symbol-Smilie</desc>
<circle cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<path d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
</defs>
<use xlink:href="#smilie" transform="translate(-20,-20) scale(8)" />
<text x="79" y="119">S</text>
<text x="117" y="170">V</text>
<text x="156" y="119">G</text>
</svg>
SVG Grafik als Verweisziel innerhalb eines HTML Dokuments: object-Tag.
Mit Hilfe des HTML-Tags <objekt> wird
die SVG Grafik als Multimedia-Objekt in das HTML Dokument eingebettet.
Der Text innerhalb des object-Elements -
"Sie benötigen einen SVG-Viewer" - wird angezeigt,
falls der darstellende Browser SVG-Dokumente nicht unterstützt.
Wenn Sie SVG Grafiken als Verweisziel einbinden, sollten Sie beachten,
dass der Browser, bei der Darstellung der Grafik,
die Angaben zu Breite und Höhe des HTML-Elements verwendet.
Falls Sie also eine SVG-Grafik mit größeren Ausmaßen einbinden, als sie im
HTML-Element angegeben haben, wird sie in der Darstellung
abgeschnitten. Verwenden Sie also immer die wirkliche Breite und Höhe der SVG-Grafik
als Werte für die Attribute width und height in
den entsprechenden HTML-Elementen (object, embed, img).
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>SVG in HTML</title></head>
<body style="margin-left:20px; margin-top:10px;">
<p style="font-family:Verdana;">
SVG Grafik durch das object-Tag eingebunden.<br>
Wird vom IE korrekt dargestellt.</p>
<object data="dummy3.svg" type="image/svg+xml" width="280" height="280">
Sie benötigen einen SVG-Viewer
</object>
</body>
</html>
SVG Grafik als Verweisziel innerhalb eines HTML Dokuments: embed-Tag.
Mit Hilfe des HTML-Tags <embed> wird
die SVG Grafik als Multimedia-Objekt nach Netscape Syntax in das HTML Dokument eingebettet.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>SVG in HTML</title></head>
<body style="margin-left:20px; margin-top:10px;">
<p style="font-family:Verdana;">
SVG Grafik mit dem embed-Tag eingebunden<br>
wird vom IE dargestellt</p>
<embed type="image/svg+xml" src="dummy3.svg" width="280" height="280">
</body>
</html>
SVG Grafik als Verweisziel innerhalb eines HTML Dokuments: img-Tag.
Mit Hilfe des HTML-Tags <img> wird die SVG Grafik
als normale Grafik in das HTML Dokument eingebettet.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>SVG in HTML</title></head>
<body style="margin-left:20px; margin-top:10px;">
<p style="font-family:Verdana;">
SVG Grafik durch das img-Tag eingebunden<br>
wird noch nicht dargestellt</p>
<img src="dummy3.svg" width="280" height="280" border="0" alt="SVG Grafik">
</body>
</html>
SVG Quellcode innerhalb eines XHTML Dokuments.
Die SVG Grafik bzw. der Quellcode der SVG Grafik wird direkt in
einem XHTML Dokument eingebunden. Zur Unterscheidung zwischen
XHTML-Tags und SVG-Elementen dient die Namensraumangabe im
öffnenden svg-Element. Ein XML-, XHTML- und SVG-fähiger
Browser kann das Dokument dann darstellen.
(Berechigte Hoffnung des Autors: der Mozilla wird es irgendwann können ..)
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head><title>SVG in XHTML</title></head>
<body style="margin-left:20px; margin-top:10px;">
<p style="font-family:Verdana;">
SVG Quellcode im XHTML Quellcode eingebettet<br />
wird noch nicht dargestellt</p>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="280" height="280">
<title>dummy3</title>
<desc>ein SVG Smilie</desc>
<defs>
<style type="text/css">
<!--
<![CDATA[
text {font-family:verdana,sans-serif; font-size:60px;
font-weight:bold; fill:black; stroke:black; stroke-width:4px;}
]]>
-->
</style>
<symbol id="smilie">
<circle cx="20" cy="20" r="15"
fill="yellow" stroke="black" />
<path d="M 13 26 A 5 3 0 0 0 27 26"
stroke="black" fill="none" stroke-width="2" />
</symbol>
</defs>
<use xlink:href="#smilie" transform="translate(-20,-20) scale(8)" />
<text x="79" y="119">S</text>
<text x="117" y="170">V</text>
<text x="156" y="119">G</text>
</svg>
</body>
</html>
SVG Grafik als Verweisziel innerhalb eines HTML Dokuments: a-Tag.
Die SVG Grafik wird als Ziel des Hyperlinks im HTML-Tag <a> angegeben.
Nach Mausklick des Anwenders auf den Hyperlink, wird die SVG Grafik im Browserfenster dargestellt.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>SVG in HTML</title></head>
<body style="margin-left:20px; margin-top:10px;">
<p style="font-family:Verdana";>
SVG Grafik als Verweisziel - mit dem a-Tag realisiert<br>
wird von allen SVG-fähigen Browsern dargestellt</p>
<a href="dummy3.svg">SVG Grafik</a>
</body>
</html>
Innerhalb eines HTML Dokuments wird die SVG-Grafik als Hintergrundbild eingebunden.
Die SVG Grafik wird von der CSS Eigenschaft background-image
im <style>-Bereich des HTML Dokuments referenziert. Dadurch wird die Grafik
als Hintergrundgrafik des HTML Dokuments dargestellt.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>SVG in HTML</title>
<style type="text/css">
<!--
body {background-image:url(dummy3.svg);
background-attachment:fixed;
background-position:40px 40px;
background-repeat:no-repeat;}
-->
</style>
</head>
<body style="margin-left:20px; margin-top:10px;">
<p>SVG Grafik als Referenz einer Style-Eigenschaft (Hintergrundbild)<br>
wird noch nicht dargestellt</p>
</body>
</html>
|