SVG Grundlagen
Diese Seite drucken Hier können Sie uns eine Emaiil schreiben zurück Zur Übersicht vorwärts Links   Letzte Änderungen 28.09.2021
     
Was ist SVG?
von Helma Spona

SVG ist die Abkürzung von Scalable Vector Graphic und stellt ein xml-basiertes Vektorgrafikformat dar, das vornehmlich für den Einsatz im Internet gedacht ist. SVG steht kurz davor zum W3C-Standard zu werden und viele namhafte Firmen entwickeln schon an Produkten rund um SVG.

Als Vektorgrafikformat, das in einer einfachen XML-Datei gespeichert wird, hat SVG sehr viele Vorteile gegenüber den herkömmlichen Grafikformaten GIF, JPG und PNG.

  • Die Dateien sind sehr klein, da sie nur aus reinem Text bestehen.
  • Es sind hochauflösende Grafiken möglich, die auch bei Scalierung nicht an Qualität verlieren.
  • SVG unterstützt eine hohe Farbtiefe
  • Auch Animationen sind möglich, die im Gegensatz zu GIF-Grafiken nicht zu größeren Dateigrößen führen.
  • SVG-Grafiken bieten ein DOM (Document Object Model), das es ermöglicht diese Grafiken per JavaScript, VBScript oder jeder anderen objektorientierten Programmiersprache zu manipulieren.
  • Auch Filter und Schatten sind möglich.

Plug-In

Augenblicklich haben SVG-Grafiken noch den Nachteil, dass zur Darstellung ein Plug-In notwendig ist.
Das wird sich jedoch in Kürze ändern, da die Browserhersteller zugesichert haben in zukünftigen Versionen SVG direkt zu unterstützen.

Z.B. der Adobe Acrobad Reader 5.0 enthält das Plag-In. Damit brauchen Sie kein weiteres zu installieren.

Auch das Erstellen der SVG-Dateien ist derzeit noch etwas kompliziert, weil Sie den XML-Code in einem Editor eingeben müssen.

Zur Zeit unterstützt nämlich lediglich Adobe Illustrator 9 den Export von SVG-Grafiken. Für Corel Draw gibt es ein Add-On, das jedoch noch im Beta-Test ist.

Wenn Sie jedoch SVG-Grafiken wirklich verstehen. Können Sie später per JavaScript den CODE manipulieren oder auf dem Server mit Perl, PHP oder ASP Dateien erzeugen.

Beispiele zu SVG finden Sie bei Adobe®.

Da SVG eine neue Technik ist, wird Sie von älteren Browsern nicht und von neueren nur mit Plug-In unterstützt.


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.



[44 kByte] Flexibel: SVG integriert Befehle, die die Skalierbarkeit für das Web nutzbar machen. SVG-Grafiken können gezoomt werden, und das ohne das Nachladen neuer Dateien.


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.

[2 kByte] Ergebnis: ein blauer Kreis mit rotem Rand.


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.

[114 kByte] Adobe: Die Straßenkarte von Moskau bietet einen ersten Eindruck von den Möglichkeiten von SVG.

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.

[83 kByte] carto.net: Die Landkarte lässt sich mit Texturen versehen, über das Anklicken einzelnen Länder erhält man Zusatzinformationen.


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).

[50 kByte] Der Effekt wird dem Objekt zugewiesen - will man nachträglich den Text oder das Bild ändern, muss man nur an entsprechender Stelle im SVG-Dokument die Quelle oder den Text austauschen.


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.).

[5 kByte] Animation: In diesem Beispiel wird der Text vergrößert und dem transformierten Rechteck ein Verlauf von Schwarz nach Weiß zugewiesen.


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).

[28 kByte] Animation eines Farbverlaufs: Die animierte GIF-Datei ist ein bescheidener Ersatz.


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.

[38 kByte] Dynamischer Effekt: Der Schatten wird abhängig von der Mausposition neu berechnet - hier mit Hilfe eines GIFs dargestellt. Im Original gibt es kein Ruckeln.


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)

[34 kByte] Onclick: Der Gaußsche Weichzeichner erzeugt unscharfen Text.


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.

[73 kByte] WebDraw: Die Umgebung zeigt sich äußerst leistungsstark bei der SVG-Erstellung.

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.

[52 kByte] Mayura: Eine Testversion steht zum Download bereit.


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 , Illustrator 10.0 kann die SVG-dateien auch wieder öffnen. 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.


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)

 


Forum Thema: SVG-XML

SVG - XML-Grafiken für das Internet
Ein neuer Grafik-Standard steht mit Scalable Vector Graphics, kurz SVG, in den Startlöchern. Diese auf XML basierende Vektorgrafiksprache verspricht geringe Dateigrößen, eine volle Integration in HTML sowie Animationen wie man sie bisher nur von Flash kennt....



Von boehl Am 03.04.00 01:03

Sehr geehrte Damen und Herren,

ich bin als System/Entwicklungsingenieur in der Automatisierungsbranche angestellt, und wir beschäftigen uns zur Zeit mit zukünftigen Methoden der Visualisierung von technischen Prozessen. Teil eines solchen Prozesses kann zum Beispiel ein großer Wasserbehälter in einem Wasserwerk sein. Das Überwachungspersonal eines solches Prozesses überwacht in einer Warte z.B. den Füllstand des Wasserbehälters am Bildschirm, indem der der Füllstand als numerische Zahl und als grafische Animation dargestellt wird. Der Füllstand und die Animation muß bei Änderungen spätestens nach einer Sekunde dargestellt werden. Zu diesem Zweck existieren (nicht offene) proprietäre Visualisierungssysteme, deren Bedienung und Projektierung zum Teil sehr komplex ist. Die IT in der industriellen Umgebung verfolgte in der Vergangenheit eigene Systemtechniken. Da die Entwicklung und Pflege dieser Systeme unerträglich teuer wurden, hat man sich diese (Automatisierungs-)Branche mehr und mehr an der kommerziellen Datenverarbeitung orientiert. So erlangen z.B. die WEB-orientierten Techniken mehr und mehr an Bedeutung.

Seitdem ich den Artikel "XML-basierte Grafiken fürs Web" (insbesondere Bild 2) in der Ausgabe Februar 2-2000 in der Zeitschrift itFokus gelesen habe, versuche ich Referenzen zu finden, mit deren Hilfe ich die Anwendbarkeit des SVG-Standards für unsere Anwendungen prüfen und hoffentlich bestätigen kann. Das nötige Umfeld für SVG, der XML-Standard wird in unserer Branche gerade spezifiziert.

Ein Visualisierungssystem ist eine Komponente eines Prozeßleitsystems und bietet dem Anwender eine gewisse Menge von Anlagenbildern, von denen in der Regel immer nur eines am Bildschirm (mehr und mehr in einem HTML-Browser) angezeigt wird und aktiv ist. Ein solches Anlagenbild besteht aus mehreren grafischen Objekten, die entsprechend den Änderungen im realen Prozesses animiert werden. Die Änderungen im realen Prozeß werden über Sensoren erfaßt, über spezielle Kommunikationssysteme zum Prozeßleitsystem übertragen und in eine Datenhaltung geschrieben. Das Visualisierungssystem ist mit der Datenhaltung so verknüpft, daß bei einer Änderung in der Datenhaltung das grafische Objekt spontan (nicht via Polling durch das Objekt) animiert wird (z.B. im einfachsten Fall, die Änderung der numerischen Darstellung).

Meine Frage ist nun, wie ein SVG-Objekt auf die eben beschriebene Weise von außen animiert werden kann, und ob in SVG oder XML für diese Animation eine Standardkommunikation (wie z.B. Corba, DCOM, RMI usw.) zwischen grafischem Objekt und der Datenquelle vorgesehen wurde.

Ich wäre Ihnen sehr dankbar, wenn Sie mir Informationsquellen, Kontakte oder eigene Vorstellungen mitteilen würden.

Vielen Dank, Ihre Antwort mit Spannung erwartend, sowie mit freundlichen Grüßen

Ernst Boehl


Von Zwenn Am 25.04.01 15:38

Schönen guten Tag,

nachdem ich heute einen Blick auf das Update zum Artikel "SVG auf dem Vormarsch" unter http://www.tecchannel.de/internet/96/index.html geworfen habe, klickte ich auf die Meinungen darunter.

Grundsätzlich hat die Redaktion ja bereits beantwortet, wie das eigentliche Anzeigeproblem bewältigt werden kann. Halb offen blieb lediglich die Frage, wie ein Browserupdate realisiert werden könnte.

Gestern ist für genau dieses Problem ein schöner Beitrag in "Tec Vision" erschienen. Dort wird auf die sog. "Bang" Technologie eingegangen, die mir etwas gemischte Gefühle bereitete, weil es einerseits eine sehr geniale Idee ist, aber andererseits die freie Wahl des angesehenen im WEB einschränkt bis aufhebt.

Aber wie auch immer, "Bang" könnte die Lösung für Ihr bleibendes Problem sein. Kleine Datenmengen und ein Browserrefresh nur, wenn es nötig ist. So sollte es sich nach meinen Vorstellungen jedenfalls umsetzen lassen.

Es handelt sich bei "Bang" zwar, wie auch bei "SVG", um eine Zukunftstechnologie, aber Sie sollten unbedingt einen Blick auf diesen Beitrag werfen

http://www.tecchannel.de/tecvision/690/

Ich hoffe Sie finden eine Lösung für Ihr, wie ich finde, recht interessantes Problem :-)

Zwenn


Von sda Am 03.04.00 12:19

Sehr geehrter Herr Boehl,

theoretisch ist diese Anwendung einfach umzusetzen, da SVG-Grafiken aus XML-Code bestehen.

Funktionsweise:

1. XML-Basiscode mit erstem Wasserstand im Web anzeigen
2. Wert auslesen (Wasserstand)
3. Wert in Datenbank schreiben
4. Neuen XML-Code aus Datenbank heraus generieren (mit modifiziertem Wert für die grafische Umsetzung).
5. Browser-Refresh

Eine entsprechende Lösung ist schon in HTML in Verbindung mit zum Beispiel Perl möglich:
Eine entsprechende Lösung finden Sie auf der tecChannel-Homepage. Die "Frage des Tages" ist letztlich nichts anderes: die Ergebnisbalken der Abfrage werden datenbankgesteuert generiert - mittels einer Ein-Pixel-Grafik, die einfach, abhängig von der Anzahl der Antworten, gestreckt wird. Datenbankeinträge sowie HTML-Dateien mit neuen Werten für die Pixel-Grafiken werden mittels Perl erzeugt.

Problematischer ist die angesprochene Lösung ohne Polling: Browser funktionieren generell nach der Polling-Methode: Url abfragen und Daten anzeigen.

Insofern wären Lösungen über JavaApplets oder über DCOM denkbar, über die ein serverseitiges Senden der Daten bei veränderten Werten umsetzbar ist - was den Traffic gering halten würde. (www.microsoft/com/com)


Mit freundlichen Grüßen

Stefan D'Amore
Redaktion tecChannel