Besser platzieren und transformieren dank verschachtelter SVGs

Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.

So werden Formen in SVG-Grafiken platziert

Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.

Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.

Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.

Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.

Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.

Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.

SVGs verschachteln und doch relativ platzieren

Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.

Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.

<svg width="750" height="500" style="background: gray">
  <svg x="200" y="200">
    <circle cx="50" cy="50" r="50" style="fill: red" />
  </svg>
  <circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>

Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.

Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.

Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.

Elemente transformieren

Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.

Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.

Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.

Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.

Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100">
    <rect x="0" y="0" width="142" height="142" style="fill: yellow" />
    <rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
  </svg>
</svg>

Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.

Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.

Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.

Weiterer Vorteil verschachtelter SVGs

Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.

<svg width="750" height="500" style="background: gray">
  <svg x="100" y="100" style="fill: yellow; stroke: red">
    <rect x="0" y="0" width="142" height="142" />
    <rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
 </svg>
</svg>

So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.