StyleAssistant-Homepage

79. Objekte und Effekte in SVG (22.01.2002)

Tipp 78 nahm Bezug auf die Scalable Vector Graphics (SVG). Dieser Tipp soll keinen SVG-Kurs ersetzen, sondern eher Appetit auf die Beschäftigung mit dem faszinierenden Universum des in XML definierten – künftig sicher boomenden – Grafikstandards machen. Im Sprachumfang von SVG befinden sich Auszeichnungselemente für einfache geometrische Grundobjekte wie Linie, Rechteck, Polygon, Kreis, Ellipse. Durch entsprechende Attribute und Werte werden Koordinaten sowie Ausdehnungen beschrieben. Formatierungen erfolgen mit Stylesheet-Definitionen, die teilweise mit den aus CSS bekannten übereinstimmen. Außerdem steht eine Reihe von speziellen Elementen zur Realisierung von Animationseffekten, Farbübergängen oder Musterzuweisungen bereit. Auch Hyperlinks und Referenzen auf externe Bilder lassen sich integrieren.

Da SVG eine XML-Sprache ist, werden auch XML-Konventionen wirksam. Am Anfang eines SVG-Dokuments stehen der Prolog und der Verweis auf die Document Type Definition (DTD):

 
      <?xml version="1.0" encoding="iso-8859-1"?>

      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
         "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

Das Wurzelelement ist svg, sodass sich die eigentlichen Inhalte der Grafik zwischen <svg> und </svg> befinden. Ein einfaches Dokument mit einem positionierten und farbig formatierten Rechteck enthält neben den Prolog-Zeilen Inhalte dieser Art:


      <svg xmlns="http://www.w3.org/2000/svg">

          <rect x="50" y="100" width="200" height="100" style="fill: #F00"/>

      </svg>

x und y beschreiben die Koordinaten des linken oberen Eckpunktes (bezogen auf 0,0 der Gesamtgrafik), width und height enthalten die Breiten- bzw. Höhenangaben. Diese Syntax sollte (X)HTML-kundigen Autor/inn/en nicht allzu schwer fallen. Die style-Zuweisung sorgt für eine rote Füllfarbe der Rechteckfläche. Da jedes Element ein Start- und ein End-Tag haben muss, das Element rect aber selbst keinen weiteren Inhalt besitzt, erfolgt der Abschluss durch einen Schrägstrich vor der schließenden spitzen Klammer. Beliebige weitere Objekte und Formatierungen lassen sich nach diesem Grundschema hinzufügen.

Sehr interessant sind neben den bereits eingebauten Animationselementen und Filtern die Scripting-Möglichkeiten. Man kann u. a. JavaScript verwenden und den Grafiken eigene Funktionen auf den Leib schneidern. Die Verknüpfung der Scripts erfolgt analog zu HTML über Event-Handler wie onmouseover oder onclick innerhalb der (öffnenden) SVG-Tags. Die Script-Funktionen selbst werden im Definitionsteil in ungeparsten CDATA-Abschnitten eingebettet, wobei sich auch externe Bibliotheken einbinden lassen. Ein sehr vereinfachtes Beispiel soll beim Klicken auf das gezeichnete Rechteck "Hallo SVG!" ausgeben:


      <svg xmlns="http://www.w3.org/2000/svg">
      
        <defs>
      
        <script type="text/javascript">
          <![CDATA[
      
            function Hallo()
            {
              alert("Hallo SVG!");
            }      
      
          ]]>      
        </script>
      
        </defs>

        <!-- weiterer SVG-Code -->

      </svg>


      Aufruf im Rechteck: <rect ... onclick="Hallo()"/>

In solchen CDATA-Abschnitten können auch zentrale Stylesheets untergebracht werden. Wie erfolgt nun die Einbindung von SVG-Dokumenten in HTML-Seiten? Eine Möglichkeit ist das direkte Verlinken von SVG-Dateien, was aber eher bei Einzelgrafiken Sinn macht. Ein anderer Weg ist die Einbindung in <object>...</object>-Container:


      <object data="abc.svg" width="..." height="..." type="image/svg+xml">
 
          <p>Inhalt für Nicht-SVG-fähige Browser, z. B. der Link zum Viewer ...</p>

      </object>

Nun soll ein mit lediglich 10 KB Code realisierter "Rundgang" durch das SVG-Universum zum kreativen Umgang mit diesem fazinierenden Grafikstandard anregen. Das Dokument ist ansatzweise selbsterklärend. Am unteren Ende werden beim Überfahren der Texte relevante Codefragmente eingeblendet. Dazu dient eine JavaScript-Funktion, die den Text über das Document Object Model (DOM) dynamisch austauscht. Weitere Funktionen sind zur Animation des roten Kreises sowie der Textlinks vorgesehen. Im SVG Viewer 3.0 von Adobe kann der Code über die rechte Maustaste angezeigt werden.

Von besonderem Interesse dürfte auch (oder vor allem) die dynamische Erstellung von SVG-Dokumenten sein. Da es sich um ein Text-basiertes Format handelt, ist man mit jeder zur Dateiausgabe fähigen Programmiersprache in der Lage, solche Dokumente zu erstellen, ohne auf spezielle Bibliotheken angewiesen zu sein. Als Beispiel soll eine mit PHP und MySQL entwickelte Anwendung für Abstimmungen dienen. Die Daten liegen also bereits vor und es liegt nahe, die Ergebnisse auch als SVG auszugeben. Balken- und Kreisdiagramme eignen sich besonders gut zur anschaulichen Präsentation von Daten und lassen sich mit SVG-Mitteln und etwas Basismathematik relativ leicht erzeugen. IPro-Vote soll das demonstrieren (unter "Ergebnisse"). Viel Spaß bei eigenen Experimenten.

Weitere SVG-Beispiele bietet das Projekt SVG – Learning By Coding vom Autor dieser Zeilen.

(79) So sieht's aus ...
Nach oben Zur Übersicht

Style

Assistant

Tipps & Tricks – Tipp 79 Zur Übersicht

Tipps & Tricks – Tipp 79
Zur Übersicht