04. September 2001

2 Konzepte


Inhalt

2.1 Erklärung des Namens: SVG

SVG steht für Skalierbare Vektor Grafiken, eine XML-Grammatik für veränderbare Grafiken, verwendbar als ein XML-Namensraum.

Skalierbar

Skalierbar meint, die Gesamtgröße wachsen oder schrumpfen zu lassen. Im Fall von Grafiken meint skalierbar, dass keine Beschränkung auf eine einzige, feste Pixelgröße besteht. Im Web bedeutet skalierbar, dass eine bestimmte Technologie zu einer großen Dateianzahl wachsen kann, zu einer großen Benutzergruppe, bzw. zu einer Vielfalt von Anwendungen. SVG, eine grafische Technologie für das Web, ist in beiden Bedeutungen des Wortes skalierbar.

SVG-Grafiken sind skalierbar für verschiedene Bildschirmauflösungen, so dass zum Beispiel die Druckausgabe die volle Auflösung des Druckers nutzt, während die Grafik in der gleichen Größe auf einem Bildschirm mit anderer Auflösung angezeigt werden kann. Die gleiche SVG-Grafik kann in unterschiedlichen Größen auf der gleichen Webseite eingebettet werden und in verschiedenen Größen auf anderen Webseiten wiederverwendet werden. SVG-Grafiken können vergrößert werden, um feine Details zu erkennen, oder um Menschen mit Sehschwächen zu unterstützen.

SVG-Grafiken sind skalierbar, weil der gleiche SVG-Inhalt eine alleinstehende Grafik sein kann oder von anderen SVG-Grafiken referenziert oder eingebettet werden kann, so kann eine komplexe Illustration aus Teilen zusammengestellt werden, eventuell von mehreren Personen. Die Eigenschaften symbol, marker und font, werben für den Wiedergebrauch von grafischen Komponenten, maximieren die Vorteile von HTTP-Caching und verhindern die Notwendigkeit einer zentralisierten Registratur für akzeptierte Symbole.

Vektor

Vektorgrafiken enthalten geometrische Objeke wie Linien und Kurven. Das verspricht eine größere Flexibilität im Vergleich zu Formaten, die nur auf Raster beruhen (wie PNG oder JPEG), da diese Informationen für jedes Pixel der Grafik speichern. Typisch für Vektorformate ist es, dass sie Rastergrafiken einbinden können und diese mit Vektorinformationen wie clipping paths kombinieren können, um eine komplette Illustration zu erzeugen; SVG ist keine Ausnahme.

Da alle modernen Bildschirme raster-orientiert sind, wird der Unterschied zwischen reinen Raster- und Vektorgrafiken erst deutlich, wenn sie gerastert werden; Client-seitig im Falle von Vektorgrafiken, im Gegensatz zu bereits auf dem Server gerasterten. SVG kann den Rasterprozess steuern, zum Beispiel kann SVG anti-aliased Kunstwerke zulassen ohne die typische unansehnlich niedrige Qualität der Vektorimplementationen. SVG sieht ebenso Client-seitige Raster-Filtereffekte vor, so dass der Wechsel zum Vektorformat nicht mit dem Verlust bekannter Effekte wie Soft Drop Shadows verbunden ist.

Grafiken

Die meisten verhandenen XML-Grammatiken repräsentieren entweder Textinformationen oder repräsentieren Rohdaten wie Finanzinformationen. Sie bieten normalerweise nur rudimentäre Grafikeigenschaften, oft mit weniger Fähigkeiten als das HTML-Element "img". SVG füllt eine Lücke im Mark, indem es eine reiche, strukturierte Beschreibung von Vektorgrafiken und gemischten Vektor-/Rastergrafiken zulässt; es kann alleinstehend verwendet werden oder als ein XML-Namensraum mit anderen Grammatiken.

XML

XML, eine W3C-Empfehlung für strukturierten Informationsaustausch, ist extrem populär geworden und sowohl weitreichend als auch zuverlässig implementiert. SVG, seinerseits in XML geschrieben, baut auf dieser starken Grundlage auf und bringt viele Vorteile mit, wie eine Grundlage für Internationalisierung, kraftvolle Strukturierungseigenschaften, ein Ojektmodell und so weiter. Durch den Aufbau auf existierenden, sauber implementierten Spezifikationen, sind XML-Grammatiken offen für eine Implementation ohne großes Reverse-Engineering.

Namesraum

Es ist sicherlich nützlich einen Viewer zu besitzen, der nur SVG darstellen kann. Aber SVG ist ebenso dazu bestimmt, als Komponente in einer XML-Applikation verwendet zu werden, die auf viele Namensräume zugreift. Die Möglichkeiten jedes verwendeten Namensraums werden vervielfacht, und so wird ermöglicht, neuen innovativen Inhalt zu erschaffen. Zum Beispiel können SVG-Grafiken in Dokumente eingeschlossen werden, die jeden text-orientierten XML-Namensraum verwenden - eingeschlossen XHTML. Ein wissenschaftliches Dokument, zum Beispiel, könnte ebenso MathML für mathematische Inhalte im Dokument verwenden. Die Kombination von SVG und SMIL fürhrt zu interessanten, zeitbasierten, grafisch reichen Präsentationen.

SVG ist eine gute Allzweckkomponente für jede Grammatik, die multiple Namensräume verwendet und Grafiken einbinden möchte.

Gestaltbar (stylable)

Die Vorteile von Style Sheets zur Präsentationssteuerung, die Flexibilität, der schnellere Download und verbesserte Wartung sind nun allgemein akzeptiert, sicherlich in Bezug auf Text. SVG erweitert diese Kontrolle ins Reich der Grafik.

Die Kombination von Scripting, DOM und CSS wird oft mit "Dynamisches HTML" bezeichnet und wird verbreitet für Animationen, Interaktivität und Präsentationseffekte benutzt. SVG erlaubt die gleiche script-basierte Manipulation des Dokumentenbaums und des Style Sheets.

2.2 Wichtige SVG-Konzepte

Grafische Objekte

Zu jeder XML-Grammatik muss überlegt werden, was genau angefertigt werden soll. Für text-basierte Formate bezieht sich die Gestaltung mehr auf Abschnitte und Satzteile, als auf Substantive, Adverben oder oder Phoneme. Ähnlich dazu gestaltet SVG Grafiken mehr auf der Ebene von grafischen Objekten als auf der Ebene von einzelnen Punkten.

SVG sieht ein allgemeines Pfadelement path vor, um eine Vielzahl grafischer Objekte zu erzeugen und stellt gemeinsame Grundformen zur Verfügung wie Rechtecke und Ellipsen. Diese sind angenehm für die Handprogrammierung und können in der gleichen Weise benutzt werden wie das allgemeinere path-Element. SVG gibt detailierte Kontrolle über das Koordinatensystem, in dem grafische Objekte definiert werden und über die Transformation, die während des Renderns angewendet wird.

Symbole

Es wäre möglich gewesen, einige Standardsymbole zu definieren, die SVG unterstützen würde. Aber welche? Es würde immer zusätzliche Symbole für Elektronik, Kartografie, Flussdiagramme, usw. geben, die jemand benötigen würde, und die nicht vor der "nächsten Version" verfügbar wären. SVG erlaubt den Benutzern, ihre eigenen Symbole zu erstellen, wiederzuverwenden und weiterzugeben, ohne dass die Notwendigkeit einer zentralisierten Registratur besteht. Benutzergemeinschaften können die Symbole, die sie brauchen, erzeugen und verändern, ohne ein Kommitee fragen zu müssen. Designer können sich des exakten grafischen Erscheinugsbilds der Symbols sicher sein, die sie verwenden und müssen sich keine Sorgen um nicht unterstützte Symbole machen.

Symbole können in unterschiedlichen Größen und Richtungen verwendet werden und können verändert werden, um in den Rest der grafischen Komposition zu passen.

Rastereffekte

Viele der existierenden Grafiken verwenden Filteroperationen aus Grafikprogrammen, um Verwischungen, Schatten, Lichteffekte und so weiter zu erzeugen. Mit der Client-seitigen Rasterung, die für Vektorformate benutzt wird, können solche Effekte ebenfalls möglich sein. SVG erlaubt die deklarative Angabe von Filtern, entweder einzeln oder in Kombination, die Client-seitig angewendet werden können, wenn die SVG-Grafik gerendert wird. Diese sind so angegeben, dass die Grafik immer noch skalierbar und in verschiedenen Auflösungen darstellbar ist.

Schriftarten (Fonts)

Grafisch reiches Material ist oft stark abhängig von dem verwendeten Font und der exakten Anordnung der Glyphs. In vielen Fällen konvertieren Designer den Text zu Aussenlinien, um Probleme mit den Ersatz von Schriftarten zu vermeiden. Das bedeutet, das der originale Text nicht mehr präsent ist, und die Durchsuchbarkeit und die Zugänglichkeit leidet. Als Reaktion auf das Feedback von Designern, schließt SVG Schriftartenelemente ein, so dass sowohl der Text als auch das grafische Erscheinungsbild erhalten bleibt.

Animation

Animationen können über skript-gesteuerte Manipulation des Dokuments erzeugt werden, Skripte sind jedoch schwer zu editieren und ein Austausch zwischen Authoring Tools ist nicht einfach. Ebenfalls als Antwort auf das Feedback von Designern, schließt SVG deklarative Animationselemente ein, die zusammen von der SVG und der SYMM Working Group gestaltet worden sind. Dies erlaubt, dass die animierten Effekte, die in existierenden Webgrafiken vorkommen, in SVG ausgedrückt werden können.

2.3 Möglichkeiten, SVG in Webseiten zu verwenden

Es gibt sehr viele Möglichkeiten, SVG-Inhalt in Webseiten unterzubringen. Hier sind einige Möglichkeiten: