SVG - Text und Bild aus einem Topf

Wo liegen die Vorteile?

Vektorgrafik allein bietet schon entscheidende Vorteile. Mit SVG kommen weitere hinzu. Leichte Handhabung, universelle Einsatzmöglichkeiten und Standardisierung versprechen eine schnelle Verbreitung des SVG-Formats.

Beliebig skalierbar

Rasterbilder setzen sich aus einzelnen Bildpunkten (Pixels) zusammen. Das macht sie auflösungs- und zoom-abhängig und somit nur bedingt einsetzbar. Nur wenn die Bildmaße bereits vor der Publikation feststehen, können wir durch entsprechende Grafikanpassung eine hohe Bildqualität erzielen. Im Gegensatz zur Rastergrafik besteht die Vektorgrafik aus geometrischen Objekten (Punkte, Linien, Kreise). Ein Objekt definiert sich durch seine Koordinaten im Koordinatensystem und ändert sich beim Skalieren des Koordinatensystems automatisch. Vektorgrafiken lassen sich also unabhängig von Auflösung und Vergrößerung beliebig skalieren, ohne an Bildqualität einzubüßen.

Gezielt zugreifbar

Ein großer Vorteil aller Markup Languages (Beschreibungssprachen) ist die strukturierte Datenablage. Sie ermöglicht uns, gezielt auf einzelne Elemente und Eigenschaften zuzugreifen, diese zu ändern oder zu ersetzen. Für die Vektorgrafik ist dieser Aspekt wesentlich, da bereits einfachste Inhalte einen relativ komplexen Grundaufbau haben. Wer sich schon einmal mit der Seitenbeschreibungssprache PostScript beschäftigt hat, weiß, wie viele Seiten Quelltext ein schlichtes Rechteck hervorbringen kann. Wer versucht, diesen Quelltext zu ändern, wird vermutlich daran verzweifeln, da ein gezielter Zugriff im Gegensatz zu SVG bei PostScript kaum möglich ist.

Leicht erlernbar und verständlich

Dank aussagekräftiger Bezeichnungen für SVG-Elemente und -Attribute ist die Beschreibungssprache eingängig. Das Tag <rect> beispielsweise kündigt ein Rechteck an, die beiden Attribute height und width bezeichnen dessen Höhe und Breite. Wir finden uns also in SVG schnell zurecht, müssen aber nicht auf die vielfältigen Möglichkeiten verzichten, die wir z. B. von PostScript kennen.

Standardisiert

Entscheidend für Umsetzung und Verbreitung von SVG ist vor allem die Publikationssicht. Für den Grafikbereich spielen Aspekte wie Formate, Größe, Tools und Austauschbarkeit eine zentrale Rolle. Standardisierte Formate, die weitgehend Tool-unabhängig und plattformneutral sind, erleichtern den breiten Einsatz erheblich. An der SVG-Standardisierung arbeitet die von W3C ins Leben gerufene SVG Working Group, zu der zahlreiche führende EDV-Unternehmen gehören (u.a. Adobe, Apple, Autodesk, BitFlash, Corel, HP, IBM, ILOG, INSO, Microsoft, Netscape, OASIS, Open Text, Quark, RAL [CCLRC], Sun, Visio, Xerox). Zur Zeit liegt SVG in der Candidate Recommendation vor (Stand: 2. November 2000). Auch wenn sich noch einiges ändern kann, rücken der allgemeingültige SVG-Standard und damit alle Vorteile eines standardisierten Formats in greifbare Nähe.

Wo liegen die Nachteile?

So bestechend die Vorteile von SVG sein mögen, es gibt auch Einschränkungen.

Bildauswahl

Weil Rastergrafik ausschließlich Farbinformationen enthält, eignet sie sich besonders für detail- und farbenreiche Bilder, z. B. Fotos. Die Komplexität der Bildinhalte spielt keine Rolle. Anders verhält es sich mit Vektorgrafiken. Da jedes kleinste Detail genauestens und aufwändig beschrieben werden muss, eignen sich Vektorgrafiken in erster Linie für detailarme Bilder, was die Anwendung von SVG deutlich einschränkt.

Bildanzeige

SVG ist zwar im Hinblick auf das WWW entstanden, wird aber von herkömmlichen Browsern bislang nicht unterstützt. Zur Anzeige von SVG-formatigen Vektorgrafiken im Browser-Fenster benötigen wir ein spezielles PlugIn wie Adobe SVG Viewer.

Welche Tools unterstützen SVG?

Obwohl die SVG-Standardisierung noch nicht abgeschlossen ist, sind die Reaktionen seitens der Software-Hersteller äußerst positiv. Es gibt ein breit gefächertes Produktangebot von Freeware bis hin zu kommerziellen Programmen, das auch hinsichtlich Preis, Plattform und Branchenspezifik für jeden Bedarf das Richtige bereit hält.

Adobe Illustrator

Dieses Programm, das Windows und MacOS unterstützt, ist neben Freehand eines der am weitest verbreiteten Zeichenprogramme im professionellen Bereich. Sein Hauptvorteil gegenüber dem Wettbewerb liegt in der hybriden Funktionalität: Es kann sowohl Vektoren bearbeiten als auch Photoshop-Filter auf Rasterdaten anwenden. Mit der aktuellen Version 9.0 wird zum Exportieren von SVG-Dateien ein SVG-Export-PlugIn ausgeliefert (funktioniert übrigens auch mit Version 8.0).

Adobe SVG Viewer

SVG Viewer (aktuelle Version 2.0) ist ein PlugIn, das die beiden größten Browser Netscape Navigator und MS Internet Explorer erweitert, so dass SVG-Grafiken direkt im Browser-Fenster angezeigt werden können. Der Hauptvorteil liegt in der Funktionalität, die uns der Viewer selbst bietet. Dazu gehören Zoom- und Navigationsmöglichkeiten sowie eine Suchfunktion, die gesuchte Textstellen in SVG-Grafiken auffindet. Mit dieser Freeware, die MacOS, Windows und Windows NT unterstützt, bekundet Adobe ein echtes Interesse an der Weiterentwicklung von SVG. Adobe SVG Viewer hat beste Zukunftsaussichten, solange es anderweitig keine vergleichbare SVG-Unterstützung von Standard-Browsern gibt.

CorelDraw

Dieses Zeichenprogramm unterstützt die Plattformen Windows und Windows NT und wird im Paket mit diversen anderen Software-Produkten, unter anderem für Bildbearbeitung und Charts, geliefert. In den Versionen 9 und 10 (aktuelle Version) bietet es einen SVG-lmport- und -Export-Beta-Filter.

Wo verwenden Wir SVG?

Schon heute wird SVG vielseitig eingesetzt, auch wenn die meisten Anwendungen noch im Versuchsstadium sind. Nachfolgend erhalten Sie einen Überblick über wichtige Einsatzgebiete.

WWW

SVG wurde in erster Linie für den Einsatz im WWW konzipiert, ist aber in diesem Umfeld noch sehr schwerfällig. Daher ist es besonders wichtig,

• den Quelltext für das WWW soweit möglich zu optimieren
• den Webserver für SVG fit zu machen

Auf der SVG Site von W3C finden Sie zu diesen Themen die interessantesten Beispiele:
http://www.w3.org/Graphics/SVG/Overview.htm8

Werbegrafik und Grafik-Design

Die ausgezeichneten grafischen Möglichkeiten von SVG lassen auch den anspruchsvollen Grafiker nicht im Stich. Besonders schöne Beispiele finden Sie auf der Adobe-Website unter
http://www.adobe.com/svg/demos/main.html

Kartografie und Geoinformationssysteme

Für die Kartografie ist SVG schon wegen der koordinatenabhängigen Positionierung von Vektoren und Texten prädestiniert. Auf diesem Gebiet ist SVG schon in zahlreichen in- und ausländischen Diplomarbeiten umgesetzt worden. Das wohl bekannteste Beispiel ist der von André Winter und Andreas Neumann erstellte Europa-Atlas, ein kleines Web-GIS, bei dem auf der Europakarte ausgewählte Themenbereiche mittels Diagrammen und Tabellen angezeigt werden können (http://www.carto.net).

Technische Zeichnungen

Auch auf diesem Gebiet ist SVG besonders geeignet, da gerade Online-Bedienungsanleitungen und Online-Lexika zunehmend gefragt sind. Inzwischen gibt es recht gute Software, die CAD-Daten importieren und als SVG exportieren kann. Dank der guten Scripting-Möglichkeiten können wir darüber hinaus mit SVG interaktive Zeichnungen anfertigen, die uns z.B. per Mausklick den Blick ins Innere einer Maschine öffnen.

Animationsbeispiel

Auch ein Smiley ist mal blau. Das Beispiel zeigt wie einfach wir mit SVG eine Animation steuern können:

Quelltext

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="300" height="300" xml:space="preserve">

<g id="smiley">

<circle cx="150" 
        cy="150"
        r="100"  
        style="fill:yellow; 
               stroke:black; 
               stroke-width:3">
<!-- Die orange Fuellungsfarbe des Smiley
     verfärbt sich innerhalb von 6 Sekunden blau. -->
<animateColor 
                  attributeName="fill"
                  attributeType="CSS"
                  begin="0s" dur="6s"
                  from="yellow"
                  to="yellowgreen"
                  fill="freeze"/>
</circle>

<ellipse cx="135" cy="120" rx="10" ry="15"/>
<ellipse cx="165" cy="120" rx="10" ry="15"/>

<g id="mouth">
<path d="M80,150 A50,50 0 1,0 220,150" 
      style="fill:none;
             stroke:black;
             stroke-width:7;
             stroke-linecap:round">

<!-- Der Mund des Smiley verzieht sich. -->
<animate 
                attributeName="d" 
                dur="6s"
                values="M80,150 
                        A50,50 0 1,0 220,150;
                        M80,190 
                        A50,30 0 1,1 220,190"
                fill="freeze"/>
</path>
</g>


</g>

</svg>

Um das Ergebnis sehen zu können,
brauchen Sie ein passendes Plug-In:

Apache Batik SVG Browser (Alle Plattformen mit Java2)
Adobe SVG Viewer (Windows und MAC)
Weitere Plug-Ins und SVG-Werkzeuge sowie die SVG-Spezifikation finden Sie bei W3C.