Index Prev Next


SVG Grundlagen
    Die Grundstruktur einer SVG Datei
    Die Grundelemente
      Das Koordinatensystem von SVG hat seinen Ursprung in der linken oberen Ecke eines Fensters. die X-Werte werden nach rechts im positiven, nach links im negativen und die Y-Werte nach unten positiv bzw. nach oben negativ abgetragen. Dies sollte man bei der Positionierung von Objekten immer beachten.

      Ein Kreis wird durch das Element circle erstellt. Sein Ausmaß wird durch die Koordinate cx und cy, die den Kreismittelpunkt festlegen, sowie den Radius r bestimmt.

      Mit ellipse werden Ellypsen erzeugt. Sie haben die selben Attribute wie ein Kreis, nur haben sie 2 Radien, einen der die Ausdehnung in die X-Richtung angibt (rx) und einen für die Y-Richtung (ry).

      Ein Rechteck wird mit rect erzeugt. Attribute sind die Koordinaten der linken oberen Ecke sowie Höhe (height) und Breite (width).

      Text wird mit dem Element text in ein Bild eingefügt. Die Lage wird durch eine x und y Koordinate angegeben, die die linke untere Ecke des ersten Buchstabens angiebt. Mit visibility:hidden wird die Schrift nicht angezeigt (visibility ist eine Eigenschaft, die auch für andere Objekte gilt).
      tspan ist ein Kind von text. Es wird zur lokalen Formatierung eines Textes benutzt, wie hier für die Darstellung.
      Linien zeichnet man mit dem Element path oder line. Das Attribut d legt für path den Verlauf fest. M ist der Startpunkt und L der Endpunkt des Pfades bei einer geraden Verbindung. Bei einer Kurve ist C der Kurvenparameter und die letzten beiden Koordinaten von C geben den Endpunkt an. Komplexe Formen kann man aus mehreren Pfaden zusammensetzten. Gerade Linien werden mit line erzeugt, ihr Startpunk ist in (x1, y1) festgesetzt und ihr Ende in (x2, y2).

      Polygone werden mit polygone definiert, dabei werden die Koordinaten ihrer Eckpunkte angegeben, die dann mit geraden Linien verbunden werden.


    Graphische Effekte
      Gradienten zum füllen von Objekten können mit linearGradient oder radialGradient definiert werden. Dabei werden die Farben für den Gradienten im Element stop festgelegt. Diese Definitionen können in defs eingeschlossen sein oder frei im Text stehen.

      Bitmap-Bilder können mit image eingefügt werden. Image verarbeitet PNG,GIF und JPEG Dateien. Durch die Attribute x, y, width und hight wird der Bildausschnitt festgelegt, der geladen werden soll.

    Transformationen
      Mit transform="translate(tx, ty)" wird ein Objekt um den Wert der Attribute tx, ty in X bzw. Y Richtung verschoben. Dabei sind die neuen Koordinaten der linken oberen Ecke (x+tx, y+ty).

      transform="scale(sx, sy)" verändert die Grösse eines Objektes, indem jedem Punkt des Objektes der neue Wert (x*sx, y*sy) zugewiesen wird.

      Drehungen werden mit transform="rotate(a, cx, cy)" festgelegt, wobei cx, cy den Drehpunkt festlegen (Deafaultwert ist (0, 0)) und a der Drehwinkel ist. Gedreht wird im Uhrzeigersinn.

      Schräge Verzerrungen können mit transform="skewX(a)" bzw. transform="skewY(a)" erzeugt werden. Der Wert a gibt den Winkel der Schräge an, wobei skewX nur die X-Koordinaten und skewY nur die Y-Koordinaten beeinflusst.

      All diese Transformationen lassen sich beliebig kombinieren. Diese Kombinationen kann man auch durch transform="matrix(a, b, c, d, e, f)" darstellen. Die Variablen entsprechen den Werten der Transformationsmatrizen. Da die Verwendung der Standardtransformationen allerdings intuitiv besser verständlich ist, sollte man diese bevorzugt verwenden.

    Das Styling
      Styling-Eigenschaften können intern oder extern in CSS Style-Sheets festgelegt werden. Oder direkt im Objekt mit dem Attribut style. Die in style festgelegten Werte beeinflussen das Aussehen der Elemente. Hier werden Farben, Muster, Filter, Schriftarten, etc. festgelegt. Die einzelnen Eigenschaften werden mit einem Semikolon getrennt.

    Andere hilfreiche Elemente
      Wenn Codefragmente nicht als Markup (SVG) interpretiert werden sollen, z.B. Skript-Segmente, werden diese Codestücke in einen CDATA-Block eingefügt.

      Das Element g benutzt man zum Gruppieren von Elementen. Wenn man mehrere Elemente in g einschließt kann man bei all diesen Komponenten Werte gleichzeitig verändern, was eine Menge Schreibarbeit spart.

      defs benutzt man, um Elemente zum späteren Gebrauch zu definieren. Das ist zum Beispiel bei der Mehrfachverwendung eines Elementes oder bei der Definition von Filtern sehr von Vorteil.

      Wie in defs kann man auch in symbol Objekte definieren, um sie später zu referenzieren, aber der Unterschied zwischen defs und symbol ist, das symbol mehrere Objekte gleichzeitig ansprechen kann. Wogegen Objekte aus defs einzeln angesprochen werden müssen.

      Zur Wiederverwendung von Objekten benutzt man das Element use. Use enthält einen xlink zu dem benötigten Objekt. Mit den Attributen x und y kann die Position des Objektes bestimmt werden.

      Wie in XML, kann auch eine SVG-Datei einen Titel haben, der in titel festgelegt wird.

      Beschreibungen des Inhaltes, zum Beispiel für Suchmaschinen, werden von desc eingeschlossen.

      Kommentare werden wie in XML oder HTML verfasst.