Wenn man an Vektorgrafiken im Internet denkt, fällt einem sofort Macromedias Programm Flash und das entsprechende Browser-Plugin ein. Flash hat sich de facto als Internetstandard für Multimedia-Anwendungen etabliert. Es ist schon lange abzusehen, dass das Internet der Zukunft zunehmend Multimedia-Elemente enthalten wird - und so ist es klar, dass auch andere Firmen von dieser Goldader profitieren wollen.
Vertreter der wichtigsten Softwarefirmen arbeiten seit August 1998 unter der Schirmherrschaft des W3C an der neuen Vektorgrafiksprache SVG. Adobe, Netscape, IBM, Microsoft, Apple, Sun, Corel, Macromedia und andere sind an der Entwicklung des offenen Standards beteiligt, der sich jedoch frühestens mit der nächsten Browsergeneration durchsetzen wird. Textbefehle sollen dabei das leisten, was bisher nur Flash bietet: dynamische, vektorgestützte animierte Grafiken. Dabei handelt es sich um einen leistungsfähigen Standard, der die Funktionalität von Flash bietet. SVG hat das Potenzial, Flash langfristig als Animationsstandard im Internet abzulösen - mit hilfreicher Unterstützung vor allem von Adobe.
Neu: Verfügbarkeit
Adobe fungiert als Vorreiter in der Entwicklung von Applikationen, die SVG unterstützen, und stellt auf der eigenen Internetseite zahlreiche eindrucksvolle SVG-Beispiele sowie eine umfangreiche Beschreibung bereit. SVG befindet sich im Recommendation-Status, der den baldigen Abschluss der Entwicklung des Standards kennzeichnet. Mit einer abschließenden Empfehlung des Standards dürfte in den nächsten Monaten zu rechnen sein. Im Folgenden finden Sie Grundlagen zu SVG sowie aktuelle Entwicklungen im Softwarebereich.
Adobe bietet für die Anzeige von SVG-Grafiken ein Browser-Plugin für den Internet Explorer und den Netscape Navigator (jeweils ab Version 4). Neben einer abgeschlossenen 1.0-Version bietet Adobe eine Version 2.0 Beta, die sowohl für Windows wie für Mac erhältlich ist. Sie sollten dieses 3 MByte große Plugin herunterladen, wenn Sie sich die in diesem Artikel bereitgestellten Beispiele ansehen möchten. Die Beispiele haben wir zur einfacheren Darstellung zum Teil als GIFs umgesetzt - die Ergebnisse können daher nur auf die Leistungsfähigkeit hinweisen und reichen an die Originale kaum heran.
Vorteile von SVG
SVG bietet zahlreiche Vorteile bezogen auf die Ausgabefähigkeiten und das generelle Handling von Dokumenten sowie eindrucksvolle Möglichkeiten, die das Scripting betreffen.
In der XML-basierten Grafiksprache erzeugte Dateien sind kleiner als entsprechende GIF, JPEG- oder PNG-Dateien. Der Programm-Code lässt sich zusätzlich komprimieren .
Dank der Skalierbarkeit von Vektorgrafiken passt sich die Anzeige der Grafiken der jeweiligen Auflösung des Ausgabegeräts an. SVG-Grafiken können also auch mit Handhelds ohne Qualitätsverlust verwendet werden.
SVG besitzt ein eigenes DOM, ist konform zum DOM 1 und unterstützt teilweise DOM 2. Es wird weitgehend kompatibel zu HTML 4.0 sein.
SVG ist voll kompatibel zu XHTML.
SVG-Inhalte können über Cascading Style Sheets oder XSL formatiert werden.
SVG unterstützt Eigenheiten der SMIL-Spezifikation wie Animationen.
SVG kann auf dem DOM basierende Events einsetzen, wodurch sich Events wie onmouseover und onclick mit SVG-Objekten verknüpfen lassen.
Dank Xlink kann jeder Bereich einer SVG-Grafik verlinkt werden.
SVG bietet zahlreiche Filtereffekte.
SVG unterstützt komplexe Animationen und Transformationen.
SVG ermöglicht das Schwenken und Zoomen in Grafiken.
SVG-Dokumente sind, da sie aus Texten bestehen, durchsuchbar und damit von Suchmaschinen indexierbar.
SVG bietet Unterstützung von ICC- und sRGB-Profilen.
Die Integrierbarkeit und schnelle Editierbarkeit von SVG-Code in HTML- oder XHTML-Dokumenten sind ein entscheidender Vorteil gegenüber der proprietären Lösung, die Macromedia mit Flash bietet. Die Verbindung von JavaScript und CSS mit SVG könnte dazu führen, dass sich die Darstellung von Websites in Zukunft verändern wird.
Vektor versus Bitmap
SVG nutzt Vorteile des Vektorgrafikformats, das andere Eigenschaften besitzt als Rastergrafiken. Der größte Nachteil von Rastergrafiken ist, dass sie statisch sind. Die beste Darstellung erreichen sie in einem auf das Anzeigegerät abgestimmten Bildmaß. Eine andere Auflösung verändert die Qualität der Anzeige. Man stelle sich nur eine 400x400 Pixel große Rastergrafik auf einem WAP-Handy vor. Die erforderliche extreme Verkleinerung würde zu einem visuell minderwertigen Endergebnis führen. Die Vergrößerung einer Pixelgrafik führt auch mit interpolierten Zwischenwerten zu den bekannten Treppeneffekten.
Da Vektorgrafiken in anderen Auflösungen immer neu gerendert werden, ergibt sich dieses Problem nicht. Der Hauptvorteil einer Vektorgrafik ist die Skalierbarkeit bei gleichbleibender Qualität. Denkbar sind Anwendungen für Handhelds ebenso wie für WAP-Handys.
Der Einsatz von Vektorgrafiken ergibt auch für die Kombination von Web und Druck interessante Ansätze. Aufgrund der eingeforderten Unterstützung von ICC-Profilen und sRGB-Profilen kann das neue Format dazu führen, dass die Farbqualität der Grafiken auf dem Bildschirm und die Qualität im Ausdruck sich einander annähern. Während Rastergrafiken wie das verlustfreie GIF-Format oder das verlustbehaftete JPEG-Format für den Druck zumeist als neu erstellte TIFF-Grafiken abgespeichert werden, entfällt dieser Arbeitsschritt bei reinen Vektorgrafiken. Theoretisch ist es denkbar, dass man einmal Inhalte in XML generiert und auf Knopfdruck fertige Webseiten und Vorlagen für Printobjekte erhält.
Definition
Das W3C definiert SVG als Sprache, die zweidimensionale Grafiken in XML beschreibt. SVG unterstützt dabei drei Arten von grafischen Objekten: Vektorgrafiken (beispielsweise Linien, Kurven, Polygone, Pfade), Pixelbilder und Text. SVG ermöglicht, dass grafische Objekte gruppiert, verändert oder in andere, vorher gerenderte Objekte transformiert werden. Beschneidungspfade, Alphakanäle oder Filtereffekte sind dabei besondere Features. In SVG erstellte Grafiken können zudem interaktive und dynamische Eigenschaften besitzen. Die besonderen Spezifikationen von SVG führt das W3C im Statuspapier auf.
Als grundlegende Formen für Grafiken dienen Rechtecke, Kreise, Ellipsen, Linien, Polylinien und Polygone.
Der folgende Code zeigt die einfache Grundstruktur einer in SVG erstellten Grafik:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG July 1999//EN""http://www.w3.org/Graphics/SVG/svg-19990730.dtd">
<svg width="4in" height="10in">
<desc> Blauer Kreis mit rotem Rand.</desc>
<g>
<circle style="fill: blue; stroke: red"
cx="200" cy="200" r="100"/>
</g>
</svg>
Das Ergebnis ist ein blauer Kreis mit einem roten Rand - ein einfaches Beispiel für eine SVG-Grafik, die Sie sich bei installiertem Plugin hier anschauen können.
Grundelemente und Attribute
Die Definition der Formen/Objekte nimmt der Anwender über Zuweisungen vor. Im Detail stellen sich die Aufrufe der wichtigsten Grafikelemente wie folgt dar:
SVG
svg x, y, width, height / allowZoomAndPan
Das Element svg definiert die Größe des Bereichs, in dem die Grafik erscheint. x, y geben die Koordinaten der Zielposition an. Das Attribut allowZoomAndPan (Defaulteinstellung: true), erlaubt Zoomen und Schwenken.
Rechteck
rect x, y, width, height
Optional rx, ry für gerundete Rechtecke.
Kreis
circle cx, cy, r
Die Parameter definieren Zentrum und Radius des Kreises.
Ellipse
ellipse cx, cy, rx, ry
Definiert werden Zentrum sowie der x/y-Achsenradius der Ellipse.
Linie
line x1, y1, x2, y2
x1, x2, y1 und y2 geben den Start- und Endpunkt von Linien an.
Polylinie
polyline x1, y1 x2, y2 xn, yn
Mehrgliedrige Linie, nicht geschlossen, x/y-Koordinatenpaare, durch Leerzeichen oder Komma getrennt "40,40 50,80 200,60 90,120".
Polygon
polygon
Wie bei Polylinie, die Figur wird automatisch geschlossen.
Bei diesen Elementen sind nur die wichtigsten Attribute angegeben. Ergänzungen sind in der Spezifikation des W3C weiter ausgeführt. SVG erlaubt die Anwendung von unterschiedlichen Objektmodifikationen wie Farbverläufen, Transparenz oder Beschneidungspfaden. Transparenzen oder Maskierungen sind ebenfalls möglich.
Land- und Straßenkarten
Wie SVG-Vektorgrafiken inzwischen eingesetzt werden, zeigen die folgenden Beispiele. Die Zoombarkeit von SVG-Grafiken ist prädestiniert für die Anzeige von Landkarten. Inzwischen finden sich schon einige Internetseiten, die mittels SVG Straßenkarten oder Landkarten darstellen und diese Anwendungen mit den Vorteilen von SVG verknüpfen.
Adobe zeigt in einem Beispiel eine Karte von Moskau, wobei die Zoomfunktion und das mögliche Schwenken der Anwendung im Vordergrund steht.
Im universitären Bereich nutzt das Kartographische Institut aus Zürich SVG für die Anzeige sozialer Verteilungen und Strukturen der Stadt Wien. Auf der Website carto.net finden Sie zahlreiche Beispiele für die Verwendung von SVG für Landkarten.
Flexible Effekte
Üblicherweise werden Effekte in Bildbearbeitungsprogrammen wie Photoshop, Fireworks oder Corel PhotoPaint erzeugt und entsprechend als GIF-, JPEG- oder PNG-Datei abgespeichert. Einen Test der gängigen Programme finden Sie hier. Will man den Effekt nachträglich modifizieren, ist es erforderlich, das Bildbearbeitungsprogramm erneut aufzurufen, die Filter neu anzuwenden und das Ergebnis als neue Datei zu speichern. Sind auch noch Texte in den Grafiken vorhanden, wird es noch umständlicher, da ein einfaches Austauschen der Texte im Bildbearbeitungsprogramm oft nicht einfach ist.
SVG schickt sich an, diese Arbeitsweisen zu vereinfachen. Mittels SVG erzeugte Effekte sind im Gegensatz zu mit Effekten versehenen Bitmap-Grafiken nicht mit dem Objekt zu einer Einheit verschmolzen. Dadurch ergeben sich leistungsstarke Modifikationsmöglichkeiten. Einerseits lässt sich der Effekt, der einem Objekt zugewiesen wird, nachträglich verändern. Anderseits kann man leicht das entsprechende Objekt, über das der Effekt gelegt wird, austauschen oder modifizieren, wie das SVG-Beispiel zeigt (Quellcode).
Effekte werden in SVG über entsprechende Filteranweisungen erzeugt, die das Element<filter> einleitet.
Animationen
Animationen gehören inzwischen gerade bei Firmenpräsentationen zum Standard - kleine Animationen werden über GIF-Dateien mit der Beschränkung auf 256 Farben vorgenommen, für komplexe Animationen setzen Webdesigner gleich Flash ein. SVG unterstützt Animationen. Diese lassen sich über Elemente wie animate, animateMotionoderanimateColor, die in der SMIL-Animations-Spezifikation definiert sind, erstellen. Die Animationsfeatures wurden in Zusammenarbeit mit der Synchronized Multimedia Working Group entwickelt, die auch für SMIL verantwortlich ist. Dass beispielsweise Real Networks seinen Real G2-Player komplett auf der Grundlage der SMIL-1.0-Spezifikation aufgebaut hat, dürfte einiges hoffen lassen für entsprechende Multimedia-Anwendungen.
Das folgende Beispiel verwendet entsprechende Animationselemente. (Modifiziertes SVG-Beispiel vom W3C / Quellcode.).
Adobe zeigt auf der SVG-Seite weitere Demos für Animationen in Verbindung mit Filtereffekten. Gerade die entstehenden Strukturen sind faszinierend und können in der von uns erzeugten GIF-Animation nur kläglich wiedergegeben werden. Überzeugender ist Adobes SVG-Beispiel (Quellcode).
Scripting
Spannend wird es, wenn solche Animationen mit Mausbewegungen oder Mausklicks verbunden werden. Die Skriptfähigkeit von SVG beruht auf dem eigenen Document Objekt Model (DOM). Die Verbindung mit Events wie onmouseover oder onclick ergibt interaktive Elemente. Adobe zeigt auf der eigenen Internetseite einen mit einer Struktur versehenen Button - abhängig von der Mausposition verändert sich der Lichteinfall und gleichzeitig die Anzeige der Struktur sowie der entstehende Schatten.
Im folgenden Beispiel wurde ein Gaußscher Weichzeichner verwendet, der auf den Text angewandt wird, sobald man darauf klickt. Dieses modifizierte Adobe-SVG-Beispiel greift ebenfalls auf Filtereffekte sowie auf das Event-onclick zurück. (Quellcode)
Neu: Reine SVG-Vektorgrafikprogramme
Die Entwicklung von reinen SVG-Programmen, die in einer visuellen Umgebung die Erstellung von SVG-Grafiken ermöglichen, geht voran - wenn auch langsam. Zwei sind besonders hervorzuheben: WebDraw von Jasc hat in der Entstehungsphase noch den Namen Trajectory Pro getragen. Es bietet als einziges bisher verfügbares Programm eine Arbeitsfläche samt Texteditor - zudem lassen sich Effekte auf erstellte Objekte anwenden. Mit den für Vektorprogramme üblichen Werkzeugen wie Hand, Lupe, Auswahlwerkzeug oder Linienwerkzeugen zur Erstellung von Bezier-Kurven lassen sich Grafiken im Arbeitsbereich erstellen und bearbeiten - die Registerkarte Source ermöglicht die direkte Bearbeitung des Quellcodes. Die Registerkarte Effects zeigt mit Hilfe von Symbolen die verwendeten Effekte wie den Gaußscher Weichzeichner an. Als Speicherformat nutzt WebDraw direkt das SVG-Format. SVG-Dateien, die mit anderen Programmen erstellt wurden, lassen sich ebenfalls öffnen, allerdings teilweise mit einer Fehlermeldung. Bei der verfügbaren Version handelt es sich um das Preview Release 4. Insgesamt zeigt sich das Programm schon recht stabil. Ein mit dem Programm erstelltes Beispiel finden Sie hier.
Mayura
Mayura ist inzwischen schon bei Version 3.6 angekommen. Mit diesem Programm können ebenfalls Vektorgrafiken erstellt und als SVG-Grafiken exportiert werden, allerdings fehlt ein Texteditor. Im Ganzen ist das Programm nicht so leistungsfähig wie WebDraw. Eine Testversion kann hier heruntergeladen werden.
Neu: SVG-Funktionalitäten in Vektorgrafikprogrammen
Programme der größeren Hersteller von Vektorgrafikprogrammen weisen inzwischen integrierte SVG-Funktionalitäten auf. Adobe sticht mit der zunehmenden Integration von SVG in seiner Produktpalette hervor. Mit Adobes Vektorgrafikprogramm Illustrator 9.0 lassen sich SVG-Dateien erzeugen, die mit Javascript-Befehlen für Events versehen werden können. GoLive 5.0 ist in der Lage, SVG-Grafiken anzuzeigen - wodurch Adobe die Erstellung von HTML-Seiten in Kombination mit SVG-Elementen ermöglicht. Mit LiveMotion hat Adobe ein Animationsprogramm in der Hinterhand, das wahrscheinlich in der nächsten Version mit der SVG-Unterstützung aufwarten wird, die bereits für die aktuelle Version angekündigt worden war. Eine strategisch kluge Maßnahme ist, dass Adobe das Browser-Plugin aktuellen Programmversionen beilegt. Adobe versucht so über die Auslieferung der eigenen Produktpalette, SVG bei den Usern in Umlauf zu bringen.
Corels CorelDRAW 10 bietet ebenfalls standardmäßig den SVG-Export. Das SVG-Format lässt sich zudem in CorelRAVE, das eigene Animationsprogramm für Vektorgrafiken, importieren. Allerdings muss man auf einen Export von animierten SVG-Objekten verzichten, hier bietet RAVE nur Flash-Animationen oder den Export von animierten GIF-Grafiken. Hier sehen Sie ein noch mit CorelDRAW 9 erstelltes Beispiel unseres tecChannel.de-Logos aus einer EPS-Datei. (SVG/Quellcode).
Macromedia hält sich aus der Entwicklung von SVG-Lösungen heraus, denn es untergräbt das proprietäre Konzept von Flash. Insofern ist es nachvollziehbar, dass Flash 5.0 keine SVG-Funktionen aufweist. Ob das angekündigte Freehand 10 den SVG-Export unterstützt, darf man bezweifeln.
Neu: Besondere Programme
XSL greift als Grundlage der Transformation von XML-Inhalten in andere Ausgabeformate wie HTML um sich. SchemaSoft präsentiert mit dem Programm Catwalk eine Lösung zur Transformation von XML in SVG via XSL-T. Mit der Software lassen sich innerhalb einer visuellen Umgebung XML-Dokumente importieren, auf deren Basis das Programm SVG-Dateien erzeugt.
Eine umfangreiche, in SVG erstellte Präsentation steht auf der Website der XML Developers Association bereit. Einblick in die Programmverwendung erhält man über vorhandene Quicktime-Filme. Catwalk erzeugt aus den eingefügten Daten Charts und Diagramme, selbst Landkarten sowie 3D-Anzeigen, beispielsweise für Kursverläufe, lassen sich damit nach Angaben des Herstellers auf der Basis einer in XSL-T entwickelten Math-Library umsetzen.
SVG Maker
Die Firma Software Mechanics stellt mit dem SVG-Maker einen Druckertreiber zur Verfügung, der SVG-Dateien aus Standard-Windowsprogrammen heraus erzeugt. Der Druckertreiber wird über die Druckfunktion des jeweiligen Programms aufgerufen. Verfügbar ist SVGMaker inzwischen für alle Windows-Versionen. Im Beispiel sehen Sie ein aus Excel 2000 heraus erzeugtes Diagramm. Ebenso eignet sich das Programm für die Erstellung von SVG-Dateien aus CAD-Programmen heraus wie AutoCAD R13, IntelliCAD 2000 oder dem Programm Viso 10 b, mit dem sich Charts generieren lassen.
Neu: Weitere Informationen
Die Informationen zu SVG im Netz nehmen zu. Zudem finden sich zahlreiche Websites, die neben Tutorials auch Beispieldateien bieten. Wir stellen Ihnen die wichtigsten Links gesammelt vor.
Website | Beschreibung | |
|---|---|---|
| ||
SVG 1.0 Spezifikation, letzte Stufe vor abschließender Empfehlung durch das W3C. | ||
Überblick über Neuheiten im SVG-Sektor. | ||
Anzeige der Leistungsfähigkeit von SVG in der W3C-Testumgebung. | ||
Hier findet man umfangreiche Tutorials, Beispiele sowie das Browser-Plugin. | ||
SVG im Reallife-Einsatz in der bisher am besten aufgemachten SVG-Seite. | ||
Tutorials, beeindruckende SVG-Beispiele und SVG-Spiele. | ||
Stattliche Anzahl von Berechnungen und visuellen Beispielen in SVG. | ||
SVG-Beispiele und Links. | ||
Darstellung von Festplattenfunktionen in SVG. |
Neu: Fazit
SVG ist eine zukunftsträchtige Entwicklung, die kurz vor der abschließenden Empfehlung steht. Letzte Verbesserungsvorschläge konnten bis zum 31. März beim W3C eingereicht werden, so dass mit einer abschließenden Empfehlung des SVG-Standards in den nächsten Monaten zu rechnen ist.
Es zeichnet sich durch den vermehrten Einsatz gerade von XML in Kombination mit XSL ab, dass SVG eine der zentralen Technologien im professionellen Druck- und Webbereich werden kann. Die Technologie hat gute Chancen, sich auf Grund der grafischen Leistungsfähigkeit und der schnellen Zugriffsmöglichkeit auf den Code innerhalb von XML- beziehungsweise XHTML -Dokumenten als neuer Standard zu etablieren. Denn sie spielt einen Trumpf aus, die XML-Lösungen eigen ist: die schnelle getrennte Modifikationsmöglichkeit von Inhalten und deren Erscheinungsbild.
In Verbindung mit Cascading Style Sheets und Javascript ergeben sich Designmöglichkeiten, die das bisher übliche Erscheinungsbild von Webinhalten weitgehend verändern dürften - die klassische Navigationsstruktur innerhalb von Webseiten mit der linksseitigen Navigation und der Anzeige des Inhalts auf der rechten Seite des Bildschirms könnte ins Kippen geraten und sich dem freieren Layout von Zeitschriften annähern - eine Standardauflösung von mindestens 1024x768 Bildpunkten vorausgesetzt.
Bisher sind es hauptsächlich Flash-Seiten, die das übliche Webdesign aufbrechen und neue visuelle Darstellungsformen aufzeigen - mit dem Nachteil, dass sich nachträgliche Änderungen von Inhalten als recht aufwendig erweisen. Allerdings muss man sich momentan bei Macromedia keine Sorge machen: Flash 5.0 ist äußerst leistungsstark, eine vergleichbare Entwicklungsumgebung auf SVG-Basis ist noch nicht in Sicht - Adobes Debut mit LiveMotion 1.0 war eher enttäuschend.
Die entscheidende Crux an der SVG-Entwicklung sind die Browserhersteller - bei Mozilla gibt es eine eigene SVG-Seite, erste SVG-Unterstützungen gibt es schon. Wie sich Microsofts nächster Browser verhält, steht noch in den Sternen. In der Betaversion des Internet Explorer 6.0 ist noch keine Fähigkeit zur SVG-Darstellung integriert. Dass der W3C-Browser Amaya 4.0 von Haus unterstützt, ringt einem bei der aktuellen Browser-Situation ein müdes Lächeln ab. mha)