Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 2

2.1 SVG-Grafiken in Webdokumenten

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)
    • <object>
    • <embed>
    • <img>
  • 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)
    • <a>
  • 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>
      



index  |  Kapitel 2  <<  | 2.1 |  >>  2.2   Rendern von SVG-Grafiken