Homepage-Webhilfe Event-Banner

Gruppierung

In SVG haben wir die Möglichkeit, Elemente (z. B. Linien und Rechtecke, aber auch Texte und Pfade) zu gruppieren. Eine solche Gruppierung kann für verschiedene Zwecke nützlich sein (z. B. zum Vererben oder zum Wiederverwenden). In diesem Thema werden Sie unterschiedliche Möglichkeiten zur Gruppierung und Wiederverwendung kennenlernen.


Beginnen wir zunächst mit der klassischen Gruppe. Hierfür benötigen wir das g-Element. Das g-Element ist zweiteilig und innerhalb des Elements können weitere Elemente (wie z. B. line, rect, text und path) notiert werden. Auch das Unterordnen von weiteren Gruppen ist möglich. Doch wozu brauche ich eine solche Gruppe? Eine Gruppe kann zu mehreren Zwecken dienen. Ein Vorteil einer Gruppe ist, dass alle Präsentationsattribute, welche im g-Element notiert sind, sich automatisch auf die Kindelemente auswirken. Stellen Sie sich vor, Sie haben eine Gruppe, in welcher Sie die Attribute fill und stroke festlegen. Allen Kindelementen (z. B. rect-Elementen) wird nun automatisch der Wert der Gruppe zugewiesen (siehe Beispiel unten). Man spricht hier auch von Vererbung (ähnlich wie bei HTML und CSS). Eine weitere praktische Möglichkeit zur Verwendung einer Gruppe ist die Wiederverwendung im Dokument, dazu jedoch später mehr.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400">
    <g stroke="red" stroke-width="10" fill="blue">
        <rect x="50" y="50" width="200" height="100" />
        <rect x="300" y="100" width="250" height="250" />
    </g>
</svg>
Vorschau

Mit dem a-Element ist es möglich, in SVG-Grafiken einen Link zu erzeugen. Ein solcher Link ist im Prinzip nichts anderes als ein Hyperlink in HTML. Das a-Element ist, wie das g-Element auch, ein sogenanntes Container-Element und dient ebenfalls zur Gruppierung (es können mehrere Elemente untergeordnet werden). Oft wird dem a-Element jedoch trotzdem nur ein Element untergeordnet, da der Link z. B. nur für einen Text gelten soll. Um das Linkziel festzulegen, benötigen Sie das href-Attribut aus dem XLink-Namensraum. Über das Attribut target lässt sich festlegen, ob die verwiesene Seite im gleichen Fenster (_self, Standardwert) oder in einem neuen Fenster (_blank) angezeigt werden soll.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 400">
    <text x="30" y="75" fill="lime" font-size="60px">Herzlich Willkommen</text>
    <text x="275" y="150" fill="lime" font-size="40px">auf</text>
    <a xlink:href="https://www.homepage-webhilfe.de/" target="_blank">
        <text x="75" y="250" font-size="50px">
            <tspan fill="red">Home</tspan><tspan fill="blue">page</tspan>
            <tspan fill="yellow">-</tspan>
            <tspan fill="purple">Webhilfe</tspan>
        </text>
    </a>
</svg>
Vorschau

Wichtig: Ab SVG 2 ist die Verwendung des XLink-Namensraums nicht mehr notwendig und zudem auch als veraltet eingestuft. Es reicht hier dann die Notation des Attributs href (ohne Namensraum).


In SVG haben Sie auch die Möglichkeit, Formen, Texte und Pfade sowie Gruppen einmal (global) zu definieren und diese dann nachher an beliebigen Stellen wieder einzusetzen. Zuallererst müssen wir unsere Elemente definieren: Dafür benötigen wir innerhalb des svg-Elements das defs-Element. In diesem ordnen wir nun die zu definierten Elemente unter (z. B. ein rect- oder g-Element) und geben diesen mit Hilfe des Attributs id jeweils einen eindeutigen Namen. An der Stelle, an welcher Sie nun den Grafikbestandteil wieder nutzen möchten, platzieren Sie das Element use. In diesem benötigen Sie nun das href-Attribut aus dem XLink-Namensraum (als Wert wird # gefolgt von der vergebenen ID angegeben). Des Weiteren benötigen Sie nun noch das Attribut x und y, um den Grafikbestandteil zu positionieren. Auch die Angabe von weiteren Attributen wie z. B. fill (um die Füllfarbe zu ändern) wäre denkbar.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 400">
    <defs>
        <rect id="bausteinRot" width="100" height="100" fill="red" stroke="purple" stroke-width="3" />
        <rect id="bausteinBlau" width="100" height="100" fill="blue" stroke="purple" stroke-width="3" />
    </defs>
    <use xlink:href="#bausteinRot" x="150" y="50" />
    <use xlink:href="#bausteinBlau" x="150" y="150" />
    <use xlink:href="#bausteinRot" x="150" y="250" />
    <use xlink:href="#bausteinBlau" x="250" y="50" />
    <use xlink:href="#bausteinRot" x="250" y="150" />
    <use xlink:href="#bausteinBlau" x="250" y="250" />
    <use xlink:href="#bausteinRot" x="350" y="50" />
    <use xlink:href="#bausteinBlau" x="350" y="150" />
    <use xlink:href="#bausteinRot" x="350" y="250" />
</svg>
Vorschau

Wichtig: Die im defs-Element definierten Elemente werden nicht angezeigt. Erst durch die Verwendung eines dort definierten Elements wird der Grafikbestandteil (also das Rechteck, die Gruppe etc.) sichtbar.


Eine meist wesentlich praktischere Möglichkeit zur Wiederverwendung von Grafikbestandteilen sind Symbole. Ein Symbol wird über das symbol-Element definiert und im Regelfall direkt dem svg-Element untergeordnet. Das symbol-Element ist, wie das g- und a-Element auch, ein Container-Element und gruppiert somit Elemente. Die „Einbindung“ eines Symbols erfolgt ebenfalls mit dem use-Element und somit auf die gleiche Art und Weise wie die Einbindung von anderen Elementen (siehe Beschreibung im vorherigen Abschnitt). Wird ein Symbol nicht eingebunden, so wird es auch niemals in der resultierenden Grafik angezeigt. Der gravierende Vorteil von Symbolen ist, dass das viewBox-Attribut verwendet werden kann. Daraus resultiert, dass das Symbol bei der Einbindung nach Belieben skaliert werden kann und somit unterschiedliche Größen haben kann.

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 400">
    <symbol id="maennchen" viewBox="0 0 50 150">
        <circle cx="25" cy="25" r="15" fill="none" stroke="black" />
        <line x1="25" y1="40" x2="25" y2="95" stroke="black" />
        <line x1="25" y1="50" x2="5" y2="75" stroke="black" />
        <line x1="25" y1="50" x2="45" y2="75" stroke="black" />
        <line x1="25" y1="95" x2="0" y2="140" stroke="black" />
        <line x1="25" y1="95" x2="50" y2="140" stroke="black" />
    </symbol>
    <use xlink:href="#maennchen" x="50" y="50" width="100" height="300" />
    <use xlink:href="#maennchen" x="260" y="110" width="80" height="240" />
    <use xlink:href="#maennchen" x="450" y="50" width="100" height="300" />
</svg>
Vorschau
Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen OK