Corel[home]
Corel und Scalable Vector Graphics

Was ist SVG?

SVG ist eine Sprache mit der man in XML zwei-dimensionale Grafiken beschreiben kann. Sie berücksichtigt drei Arten von grafischen Objekten:
  • Vector Graphic shapes (z.B. Wege die aus geraden Linien und Kurven bestehen)
  • Bilder
  • Texten

Diese neue Sprache wurde vor allem erfunden um die Gestaltung im Web zu revolutionieren, eine Hauptaugenmerk lag vor allem in der Möglichkeit SVG Zeichnungen dynamisch und interaktiv darstellen zu können. Das "Document Object Model" (DOM) für SVG, das das gesamte XML DOM beinhaltet, erlaubt es nun Vektorgrafik-Animationen direkt und sehr effizient als Script in XML darzustellen. Ein großes Spektrum an "Event handlers", wie zum Beispiel "onmouseover" und "onclick" können einfach jedem SVG Grafikobjekt zugeschrieben werden. Aufgrund der großen Kompatibilität mit anderen Web Standards, Merkmale wie "scripting" können mit SVG Elementen und andere XML Elementen simultan in ein und der selben Weg Seite durchgeführt werden.

SVG wurde von einer Arbeitsgruppe des "World Web Consortium (W3C) entwickelt. Die Mitglieder dieser Arbeitsgruppe (auch Corel Mitarbeiter) garantieren, dass der Standard robust genug sein soll, dass ihre Grafiken von allen Computerherstellern eingesetzt werden können.

Die Produktion von SVG ist gerade in der Endphase, was man vor allem daran erkennen kann, dass selbst auf der eigenen Homepage von W3C der Bericht über die SVG nur zum Teil abgeschlossen ist, und alle weiteren Angaben sich zum großen Teil nur auf die schon veröffentlichten Berichte des W3C stützt, da alle anderen Berichte sowohl in Zeitschriften als auch im Internet sehr viele Lücken aufweisen.

Eine kurze Einleitung in SVG

Kompatibilität mit anderen Standards
  • SVG ist eine Applikation von XML 1.0
  • SVG richtet sich nach XML Namespace Recommendation
  • SVG will sich Xlink und Xpointer anpassen
  • SVG richtet sich weiters an Cascading Style Sheets (CSS) Level 2
  • Und sie richtet sich auch nach Document Object Model (DOM) Level 1
  • Es wurde auch versucht SVG so zu gestalten, dass sie auch in HTML Version 4 eingesetzt werden kann und speziell in den nächsten Versionen soll sie als Teil der XML Komponenten in HTML inkludiert sein.
Zwei Arten der Einsatzbereiche


"Stand-alone" SVG File:
Solche SVG Files können mit einem "Graphics Authoring Program" erstellt werden.
Das folgende Beispiel zeigt ein triviales "stand-alone" SVG File:
<?xml version="1.0"?>
<g xmlns="http://www.w3.org/...">
  <!-- Insert drawing elements here -->


</g>
Es können auch einfache Zeichnungen direkt beschrieben werden, hier im Beispiel wird ein Rechteck gezeichnet:
...
<g>
  <rectangle x="100" y="100" width="100" height="100" />
</g>
SVG - Fragmente innerhalb eines SML Files:
<?xml version="1.0"?>
<ABC xmlns="..."
     xmlns:svg="http://www.w3.org/...">
  ...
  <svg:rectangle ... />
  ...
</g>

Vorteile

SVG Zeichnungen sind viel leichter zu bearbeiten, aufgrund der folgenden Punkte:
  • Text - Strings in SVG sind als normaler XML Text gespeichert und kann dadurch leichter verändert werden.
  • An jedem Platz einer SVG Hierarchie kann eine Beschreibung des Objektes stehen, dass das platzieren und den weiteren Umgang mit den Grafiken sehr vereinfacht.
  • SVG unterstützt, wie schon erwähnt, Cascading Style Sheet Level 2, und dadurch bietet sich die Möglichkeit seinen eigenen Style zu entwickeln um die Farbkontraste des einzelnen Grafikelementen zu vereinheitlichen.

SVG Dokument Strukturen

Einführung

Ein SVG Dokument kann aus einfachen SVG Grafikelementen bestehen , wie z.B. das oben angeführte Beispiel eines Rechteckes, es kann aber auch eine Vielzahl von gruppierten Grafikelementen beinhalten.

Das folgende Beispiel zeigt schon ein komplexeres stand-alone SVG Dokument, bestehend aus mehreren Rechtecken:
<?xml version="1.0"?>
<g xmlns="http://www.w3.org/...SVG_1.0...">
   <rect ... />
   <rect ... />
   <rect ... />
   <rect ... />
</g>

Gruppierung und Bezeichnung von Elementen

Durch das zweiwertige Tag <g> kann man alle Elemente im Inneren des Tags zu einer Gruppe zusammenfassen. Zum Beispiel: ... 
<g>
  <g fillcolor="red">
    <rect x="100" y="100" width="100" height="100" />
    <rect x="300" y="100" width="100" height="100" />
  </g>
  <g fillcolor="blue">
    <rect x="100" y="300" width="100" height="100" />
    <rect x="300" y="300" width="100" height="100" />
  </g>
</g>
Weiters kann man diesen Gruppen von Elementen auch Namen geben:
<g>
  <g id="OBJECT1">
    <rect x="100" y="100" width="100" height="100" />
  </g>
  <g id="OBJECT2">
    <circle cx="150" cy="300" r="25" />
  </g>
</g>
...
Auch kann man beliebig viele Untergruppen bilden:
<g>
  <g>
    <g>
      <g>
      </g>
    </g>
  </g>
</g>

Die <defs> Elemente (unsichtbare Elemente)

Grob zusammengefasst sind diese Elemente Platzhalter, die nicht angezeigt werden aber trotzdem in späterer Folge als Elemente erkannt werden.
<g>
  <defs>
    <rect id="TemplateObject01"... />
    <gradient id="Gradient01" ... />
  </defs>

  <!-- SVG code in here would reference/use 
       the elements defined in the <defs> -->

</g>
<style> ein "Sub-Element" zu <defs>
Das <style> Element wird gleich verwendet wie das <style> Element in HTML. 
<g>
  <defs>
    <style>
      .TitleText { font-size: 16; font-family: Helvetica }
    </style>
  </defs>
  <text class="TitleText">Here is my title</text>
</g>
<script> ein "Sub-Element" zu <defs>

Ist wiederum gleich wie in HTML.
<g>
  <defs>
    <script>
      /* Beep on mouseclick */
      MouseClickHandler() { beep(); }
    </script>
  </defs>
  <rect onmouseclick="MouseClickHandler()".../>
</g>
CSS Properties vs. XML Attributes

Jede Sprache die eine Applikation von XML ist und CSS unterstützt, muss einige ihrer Elementparameter als XML Attribute und andere als CSS Properties deklarieren. Und auch SVG ist keine Außnahme.

Im Allgemeinen müssen CSS Properties für folgende Parameter verendet werden:
  • Alle Parameter die etwas visuelles beschreiben und so sich selbst als Style deklarieren. Alle Attribute die die Farbe definieren, wie Füll- und Linienfarbe, und weiters auch die Beschreibung der Linienfarben.
  • Parameter die mit dem Text-Style zu tun haben, wie font-family and font-size
  • Parameter die in CSS vertretbar sind und die Dateigröße verringern.
Andere Vector Graphic Shapes
  • <rect/>
  • <circle/>
    <circle style="fill: blue; stroke: red" cx="200" cy="200" r="100"/>
  • <ellipse/>
  • <polyline/>
  • <polygon/>
  • <pieslice/>

Anhang :

Vergleich: Vektor & BitMap

Heutzutage werden Grafiken im Internet in Bitmap Formaten wie GIF, JPEG, oder PNG dargestellt.
Bitmap behandelt jede Grafik als eine Ansammlung von Dots denen eine spezielle Farbe zugewiesen wird. Wenn man das Ganze betrachtet dann entsteht daraus ein Bild.
Wenn man das Bild jetzt aber nicht in seiner ursprünglichen Größe betrachtet sondern extrem vergrößert, dann erkennt man sehr deutlich die zusammengesetzten Dots.

Vektor Graphics definieren Bilder durch Formen und "Wege", d.h. eine Linie wird durch Anfang und Endpunkt beschrieben, und nicht durch eine gewisse Anzahl an Dots hintereinander.




Warum sollte man jetzt Vector Graphics verwenden?


Während Bitmaps hervorragend für Photos oder Bilder die sich in ihrer Größe nicht verändern können geeignet sind, zielt die Vector Graphics Darstellung genau auf das Internet ab, wo man die Bilder verändern will, einmal extrem Groß und einmal wieder sehr klein. Bitmap Grafiken müsste man für jede Größe neu kreieren.
Wenn man jetzt ein medizinisches Beispiel anschaut dann sieht man, dass beide Formate das Diagramm in ihrer ursprünglichen Größe gut erkennbar anzeigen können.
Aber im Vektor Bild kann man sich auch mühelos einen Teil herauszoomen und hat trotzdem keinen Qualitätsverlust.

Mit Bitmap könnte man die gleiche Qualtität nur erzeugen wenn man das Bild mit einer sehr hohen Auflösung speichern würde und so sehr lange Ladezeiten in Kauf nimmt.
Wogegen Vector Graphics schon bei einem Bruchteil von der File Größe die gleichen Ergebnisse erzielt.

Ein weiterer Unterschied ist, dass Bitmap die gesamte Grafik, Bild, Text, andere Objekte und den Hintergrund nur als Pixel behandelt, und so ein Verändern im Nachhinein sehr langwierig macht.
In Vektor Grafiken kann man mühelos Objekte im Nachhinein dazugeben oder herausnehmen ohne dass sich die Grafik im Hintergrund ändert. Auch den Hintergrund transparent zu machen ist ein weiterer Vorteil von VG.
Und in diesen Fällen wo es besser ist mit Bitmaps zu arbeiten ist es in vielen Vektor File Formaten (auch SVG) möglich ein Bitmap als Objekt einzufügen.

Funktionierende Ausdrucke

Wenn man heutzutage Web Seiten ausdruckt stellt man oft mit Entsetzen fest, dass diese Seiten nur für den Bildschirm gemacht wurden und nicht, um ausgedruckt zu werden.
SVG hat auch hier ein Augenmerk gelegt und es ist gelungen das die Ausdrucke genau so ausschauen wie man sie am Bildschirm vorher betrachtet hat.

Transparenz

Jede Linie in einer Vektor Grafik kann definiert werden als transparent, durchsichtig oder Lichtdurchlässigkeit (undurchsichtig), dies erlaubt eine größere Kreativität. Denn man kann gezielt ganze Linien weglassen und sich nicht nur auf verschiedene Pixels gleicher Farbe konzentrieren.

Vorteilige Merkmale von SVG

Während Bitmaps Effekte permanent eine Grafik verändern können bei SVG die Effekte in eine Grafik eingebunden werden aber später auch mühelos wieder rückgängig gemacht werden. Für die eine Anwendung kann man das File rotieren lassen oder die Farbe verändern ohne dass man dafür eine Vielzahl von verschiedenen Bildern produzieren und auch separat speichern muss, sondern man kann das Grundbild speichern und bestmöglich aufbereiten und je nachdem zu welchem Zweck man dann auf die Grafik zugreifen will kann man sie für die spezielle Aufgabe durch ein paar Befehle verändern.

© by Andreas Brunner; Philipp Knoch; Gerald Sturb, 1999