Der Inhalt des svg-Tags

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Innerhalb des <svg>-Tags können Sie verschiedene untergeordnete Tags, verwenden. Zulässig sind die folgenden Tags:

desc title metadata defs path
text rect circle ellipse line
polyline polygon use image svg
g view switch a altGlyphDef
script style symbol marker clipPath
mask linearGradient radialGradient pattern filter
cursor font animate set animateMotion
animateColor animateTransform color-profile font-face index

Die wichtigsten Tags und Ihre Bedeutung zeigt die folgende Tabelle.

Tabelle: Wichtige SVG-Tags, die innerhalb des <svg>-Tags verwendet werden dürfen.

Tagname Bedeutung
<filter> Definiert einen Filter oder eine Kombinationen aus mehreren Filtern, die dann den einzelnen oder allen Elementen der SVG-Grafik zugewiesen werden kann.
<g> Gruppiert die Elemente, die in <g> und </g> eingefasst werden.
<text> Definiert ein Textelement.
<rect> Definiert ein Rechteck.
<path> Erzeugt einen Pfad. Der kann als Linie sichtbar sein, oder unsichtbar für eine Animation erzeugt werden.
<a> Definiert einen Hyperlink.
<line> Definiert eine Linie.

Für alle diese Tags stehen natürlich verschiedene Attribute zur Formatierung zur Verfügung. Auch die Anwendung der Tags ist unterschiedlich. Sie werden die einzelnen Tags und Ihre Attribute im Abschnitt Die Syntax von SVG-Tags noch näher kennenlernen.

Um nachfolgend die Integration der SVG-Grafik in eine HTML-Seite testen zu können, müssen Sie natürlich eine erste Beispieldatei erstellen. Erzeugen Sie dazu eine Datei mit folgenden Inhalt. Sie definiert einen einfachen Text, der als Inhalt der Grafik angezeigt wird.

Wenn Sie die Vorlage verwenden, brauchen Sie lediglich den <text>-Tag zwischen den Tags <svg> und </svg> einfügen. Wenn Sie WebDraw verwenden, erzeugen Sie eine neue Datei, indem Sie das Programm über das Startmenü starten und dann File / New auswählen. Sie können dann den Text einfügen, indem Sie aus der Werkzeugleiste das Werkzeug Text auswählen und dann den Inhalt des Textelements in das Feld Text eingeben. Wenn Sie den Text eingegeben haben, klicken Sie mit der Maus auf die Position, an der Sie den Text einfügen möchten.

Speichern Sie die SVG-Datei dann unter einem Namen Ihrer Wahl.

Einfügen eines Textes mit WebDraw

Abbildung: Einfügen eines Textes in eine SVG-Datei mit WebDraw.

Hinweis:
WebDraw erzeugt auch einige Formatierungen, die Sie für den nachfolgenden Test nicht benötigen. Sie schaden aber auch nicht. Allerdings sieht der von WebDraw erzeugte Quellcode nicht ganz identisch mit dem nachfolgend dargestellten.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010719//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg width="500" height="500">
  <text x="0" y="10">SVG - das ultimative Grafikformat</text>
</svg>

   

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema SVG bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright © verlag moderne industrie GmbH 2001
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "Das Einsteigerseminar SVG — Webgrafiken mit XML" denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

verlag moderne industrie GmbH, Justus-von-Liebig-Straße 1, D-86899 Landsberg/Lech, fon ++49 (0) 81 91 / 125 – 0, leserservice(at)mi-verlag.de