Web-GIS und Multimedia
This presentation is the property of its rightful owner.
Sponsored Links
1 / 21

Nutzung von SVG zur Erzeugung von Internetkarten PowerPoint PPT Presentation


  • 57 Views
  • Uploaded on
  • Presentation posted in: General

Web-GIS und Multimedia. Nutzung von SVG zur Erzeugung von Internetkarten. Thomas Henkel. Was ist SVG ?. - SVG ist der Graphikstandard des W3C. - seit dem 02.08.2000 existiert die 1.0 Version von SVG und bildet seitdem den de-jure Standard für Vektorgraphiken im WWW.

Download Presentation

Nutzung von SVG zur Erzeugung von Internetkarten

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Nutzung von svg zur erzeugung von internetkarten

Web-GIS und Multimedia

Nutzung von

SVG

zur Erzeugung von Internetkarten

Thomas Henkel


Was ist svg

Was ist SVG ?

- SVG ist der Graphikstandard des W3C.

- seit dem 02.08.2000 existiert die 1.0 Version von SVG und

bildet seitdem den de-jure Standard für Vektorgraphiken im WWW.

Am 14.01.2003 wurde die Version 1.1 freigegeben. Neu sind in der

aktuellen Version Verbesserungen zur Darstellung auf Handys und

Handheld-Geräten.

- entwickelt wurde und wird er von einem Konsortium, das aus

Mitgliedern des W3C, Forschungsinstituten und Firmen aus dem

Graphik-, Multimedia-, und Netzwerk-Umfeld besteht.

U.a. sind hier Microsoft, Adobe, Macromedia, Sun vertreten.


Motivation

Motivation

- Vor SVG gab es keinen de-jure Standard bei Vektorgraphiken

- es gab nur zwei de-facto Standards:

- Flash von Macromedia

- WebCGM

- dadurch entstand Abhängigkeit von Anbieterfirmen

- Weiterentwicklung nur auf Veranlassung der Herstellerfirma

- teure Entwicklungsumgebung notwendig

Das neue Format SVG kombiniert die Vorteile beider Formate.


Einschub standards

Einschub: Standards

  • - de-jure Standard: De-jure Standards sind dokumentierte

    • Vereinbarungen, die technische Spezifikationen

    • oder andere exakte Merkmale wie Regeln,

    • Richtlinien oder Definitionen von Eigenschaften

    • liefern, um sicherzugehen, daß Materialien,

    • Produkte, Prozesse und Dienstleistungen ihrem

    • Zweck gerecht werden. (ISO, 1999)

  • - de-facto Standard: Dies sind jenen, die zwar nicht durch eine

    • anerkannte Standardisierungsorganisation

    • offiziell verabschiedet wurden, die aber durch ihre

    • Verbreitung allgemein akzeptiert sind.Man spricht

    • also nicht von einer Norm, es zählt allein die praktische

    • Verbreitung. Software-Firmen können und wollen aus

    • technischer Sicht nicht alle de-jure Standards einhalten,

    • andererseits möchten sie aus Konkurrenzgründen

    • firmeneigene Standards aufstellen – mit dem Ziel sie

    • zum de-facto Standard zu erheben.


Allgemein svg

Allgemein: SVG

- SVG ist ein offener Standard

- herstellerunabhängig

- plattformunabhängig

- ständige Weiterentwicklung und sehr gute Dokumentation

- eignet sich auch als Austauschformat zwischen den Produkten

einzelner Hersteller

- SVG ist XML-basiert

- einfache Verknüpfung mit anderen XML-Dokumenten

- mit vorhandenen XML-Kenntnissen ist SVG nicht neu zu erlernen

- SVG-Graphiken lassen sich auch mit einem einfachen Texteditor

verändern und erstellen

- da SVG-Dateien textbasiert sind zeichnen sie sich durch

vergleichbar geringe Dateigrößen, vorallem im Vergleich zu

Rasterdaten, aus

  • zur Darstellung in einem Browser ist (noch) ein Plugin notwendig.

  • In künftigen Browsergenerationen ist die SVG-Fähigkeit in Planung.


Einbindung in xml

Einbindung in XML

Beispiel für die Einbindung einer SVG-Graphik in ein XML-Dokument

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg SYSTEM "svg-19990812.dtd">

<svg width="14cm" height="8cm">

<rect x="6cm" y="1cm" width="6cm" height="4cm"

style="fill:gray; stroke:yellow; stroke-width:0.2cm"/>

<circle cx="3cm" cy="3cm" r="2cm"

style="fill:red;stroke:blue; stroke-width:0.2cm"/>

</svg>

►svg x, y, width, height / allowZoomAndPan

Das Element svg definiert die Größe des Bereichs, in dem die Graphik

erscheint. x,y geben die Koordinaten der Zielposition an. Das Attribut

allowZoomAnd Pan (default:true) erlaubt Zoomen und Schwenken.


Die svg objekte

Die SVG-Objekte

SVG kennt drei Arten von Objekten:

- Vektorbasierte Geometrie

- Rasterbilder

-Texte

SVG-Viewer stellen die Graphik üblicherweise in hoher Qualität

dar, unter Zuhilfenahme von Antialiasing-Techniken. Dabei wird

intern eine hierarchische DOM-Struktur aufgebaut, die einen Zugriff

auf die einzelnen Elemente und deren Attribute erlaubt.

Elemente können hinzugefügt, gelöscht und neu innerhalb der

Hierarchie angeordnet werden.

DOM – Document Object Model

Plattform- und Sprachenneutrales Interface. Erlaubt Programmen und Scripten, dynamisch auf den Inhalt, die

Struktur und die Stile von Dokumenten zuzugreifen und diese zu verändern. Das DOM unterstützt ein Standardset

von Objeten zur Repräsentation von HTML und XML Dokumenten und ein Standardmodell, das für die Kombination

dieser Objekte zuständig ist.


Vektorbasierte geometrie

Vektorbasierte Geometrie

Die Geometrie gliedert sich in folgende Basis-Typen:

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äufe, Transparenz oder Beschneidungspfade.

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


Vektorbasierte geometrie1

Vektorbasierte Geometrie

Ellipse

►ellipse cx, cy, rx, ry

Hier werden Zentrum sowie der x/y Achsenradius definiert

Linie

►line x1, y1 x2, y2

x1, x2, y1, 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 getrennt (Bsp.: „40,40 40,80 90,200 74,210“)

Polygon

►polygon

Wie bei Polylinie, die Figur wird automatisch geschlossen


Text in svg

Text in SVG

Texte nehmen in SVG eine ähnliche Stellung ein, wie die

Geometrietypen. So kann er beschnitten werden oder als

Beschneidungspfad dienen. Auch kann er transformiert und

animiert werden.

Desweiteren werden alle gebräuchlichen Formatierungs-

möglichkeiten unterstützt.

Text

►text x, y, style

Bei Text werden x und y Koordinate angegeben, sowie der Schriftstil,

d.h. Schriftart und Schriftgröße.


Rasterbilder in svg

Rasterbilder in SVG

Obwohl die graphischen Möglichkeiten von SVG sehr umfassend

sind, gibt es Fälle bei denen Rasterdaten eingefügt werden sollen

oder müssen. Ein typisches Beispiel sind Photographien.

Rasterbilder

►image x, y, width, height

x und y bezeichnen auch hier die Koordinaten des Bildes.

widht und height die Größe des Bildes.


Transformationen

Quelle: Winter, Prototyp für einen thematischen Atlas (2000)

Transformationen

SVG kennt verschiedene

Transformationsarten:

- Skalierung

- Translation

- Rotation

- Schrägstellen

- Matrix-Operationen

Jedes einzelne Element oder Gruppe von Elementen kann sein

eigenes lokales Koordinatensystem haben, das den jeweiligen

Transformationsparameter entspricht.


Animation

Quelle: Neumann, Example for Animation along a path (2001)

Animation

Jedes Element und vorallem dessen Attribute kann animiert werden. Hierbei werden Syntax und Spezifikation von SMIL übernommen. Auch Javascript kann integriert werden.

Animiert werden können u.a.:

- Farbe

- Geometrie

- Lokalität

- Transformation

Interessant ist vorallem auch die Möglichkeit, Objekte entlang eines

Pfades zu bewegen. Alle Animationen können kombiniert und

verschachtelt werden.


Interaktivit t

Interaktivität

Eine weitere Stärke, die SVG auszeichnet ist die Interaktivität.

Interaktivität kann im Client-System und am Server implementiert

werden. Unterschiedliche Antwortzeiten sind die Folge. Beide Arten

lassen sich kombinieren.

Server

Client

Maus-, Keybord-, Status-Events,

um schnell auf Anfragen des

Benutzers zu reagieren.

Datenbanken und Applikationen

zum Selektieren und Berechnen

von Daten.


Internetkarten mit svg

Internetkarten mit SVG

Wieso SVG (Vektorformat) und nicht ein Pixelformat?

Nicht der einzige, aber ein entscheidender Vorteil: Die Skalierbarkeit.

Bei Vergrößerung bleibt die Qualität erhalten, im Gegensatz zu

Pixelgraphiken, die den bekannten Treppeneffekt zeigen.


Internetkarten mit svg1

Internetkarten mit SVG

Weitere Vorteile von SVG gegenüber einer Pixelgraphik:

- einzelne Kartenelemente lassen sich als Teile eines Informations-

systems ansprechen (einzelne Gebäude und Straßen).

Diese können mit Links versehen werden und sind so interaktiv

nutzbar.

- Größenveränderungen erfolgen ohne Qualitätsverlust, da nicht

die komplette Graphik, sondern nur die entscheidenden Parameter

verändert werden.

- durch die Basis XML umfasst die Graphik eine vergleichbar geringe

Datenmenge und kann somit schneller über das Internet versendet

werden.

- durch die open-source-Strategie ist SVG plattformunabhängig


Internetkarten mit svg2

Internetkarten mit SVG

Der Einsatz von Vektorgraphiken ergibt auch für die Kombination von Web und Druck interessante Möglichkeiten:

Aufgrund der eingeforderten Unterstützung von  ICC-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.

Das hat zur Folge, daß die am Bildschirm generierte Karte

später im Druck das gleiche Aussehen hat, wie das Bild auf dem

Bildschirm. Voraussetzung ist natürlich ein vorhandener

Farbmanager.


Internetkarten mit svg3

Internetkarten mit SVG

An seine Grenzen gelangt das Format allerdings, wenn stark

strukturierte Karten dargestellt werden sollen, wie das z.B.

bei stark differenzierten topographischen Karten der Fall ist.

Hier wird die Zahl der zu berechnenden Polygone schnell sehr

groß und kann an die Grenzen der Rechenleistung führen.

Zudem werden dann auch die zu übertragenden Textdateien

sehr groß.

Dieses Problem kann aber bei den meisten Karten im Internet

vernachlässigt werden, da es sich meist um thematische

Darstellungen handelt.


Beispiel f r eine svg karte

Beispiel für eine SVG-Karte

www.stadtteilplan.de


Weitere beispiele

weitere Beispiele

weitere Beispiele für SVG-Karten:

- http://tirolatlas.uibk.ac.at/

- http://www.carto.net

- http://www.karto.ethz.ch/neumann/cartography/vienna/


Nutzung von svg zur erzeugung von internetkarten

Vielen Dank für die Aufmerksamkeit


  • Login