SVG/Tutorials/Einstieg/Grundformen

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

In diesem Kapitel lernen Sie, wie Sie mit SVG Länderflaggen erstellen und verändern können. Für einen schnellen Einsatz bieten sich im Netz verfügbare SVG-Grafiken an, deren Quellcode einfach zu lesen und zu verstehen ist. Der Schwerpunkt dieses Tutorials soll jedoch in der sinnvollen Verwendung passender Elemente und Eigenschaften und praktischen Tipps für die Anwendung liegen.

Flaggen bestehen im Unterschied zu Wappen häufig aus geometrischen Grundformen, die flächig mit einer Farbe gefüllt sind. Dies prädestiniert sie für die Verwendung von SVG, einem Format für skalierbare Vektorgrafiken, das viele Vorteile gegenüber Rastergrafiken wie jpg-Grafiken bietet.

Einbindung

SVG-Code kann problemlos direkt in den HTML-Code eingefügt werden. Es wird von allen modernen Browsern interpretiert.

Einbindung von SVG in HTML
<svg width="300" height="200" viewbox="0 0 3 2">
 ...
</svg>

Dieses SVG-Element ist unsere Zeichenfläche und stellt ein kartesisches Koordinatensystem mit dem Ursprung (0 | 0) in der linken, oberen Ecke dar.

  • Das optionale viewBox-Attribut legt dessen Breite und Höhe durch den dritten und vierten Parameter fest. Ein gezeichnetes Objekt muss innerhalb dieser Koordinaten liegen.
  • Auch die Angabe von width und height ist optional. Wenn sie erfolgt, wird das SVG-Element selbst auf diese Größe skaliert; ohne Angabe nimmt das SVG die gesamte Breite des Anzeigegeräts ein.
Beachten Sie: Inline-SVG innerhalb von HTML-Dokumenten ist case-insensitive, das bedeutet, dass die Groß- und Kleinschreibung keine Rolle spielt. In Standalone-SVGs gelten die Regeln von XML.

So wird das viewbox-Attribut in einem SVG-Dokument ignoriert, da es das viewBox-Attribut in CamelCase-Schreibweise erwartet.

SELFHTML verwendet die XML-Schreibweise, damit Markup bequem kopiert werden kann.

Grundformen

Rechtecke

Die Grundform rect eignet sich perfekt zum Zeichnen von rechteckigen Flächen wie sie in Trikoloren, dreifarbigen Flaggen mit gleich breiten Streifen, verwendet werden.

SVG ist ein XML-Dialekt. Deshalb müssen Elemente entweder ein öffnendes und schließendes Tag oder als inhaltsleere Elemente ein /> am Ende haben.

Beispiel ansehen …
<svg width="300" height="200" viewBox="0 0 3 2">
  <desc>Flagge Frankreichs</desc>
  <rect x="0" y="0" width="1" height="2" fill="#0055A4" />
  <rect x="1" y="0" width="1" height="2" fill="white" />
  <rect x="2" y="0" width="1" height="2" fill="#EF4531" />  
</svg>
In diesem Beispiel werden drei Rechtecke mit jeweils einem „Pixel“ Breite und zwei „Pixel“ Höhe gezeichnet. Über die verschiedenen Werte des x-Attributs werden sie nebeneinander dargestellt. Mit dem fill-Attribut können Sie die Fläche mit Farben füllen. Dabei ist jede Farbangabe wie bei HTML und CSS möglich.

Die gesamte SVG-Grafik ist aber nicht nur 2px hoch. Über das viewBox-Attribut wird die definierte Grafik auf die angegebene Breite von 300px und die Höhe von 200px skaliert. Dies erfolgt aufgrund der Vektorisierung ohne Qualitätsverlust.

Auch wenn hier der Begriff „Pixel“ verwendet wurde, rechnet SVG in Wirklichkeit mit dimensionslosen Größen (engl. unitless values). Dies ist sinnvoll, weil so fehleranfällige Umrechnungen von Einheiten vermieden werden.
Beachten Sie: Da SVG-Grafiken kein alt-Attribut besitzen, sollten Sie eine zusätzliche Erklärung in einem desc-Element verwenden.
Hauptartikel: SVG/Tutorials/Einstieg/barrierefreie SVGs

Skalierung

Beispiel ansehen …
<svg width="300" height="200" viewBox="0 0 5 3">
  <desc>Flagge Deutschlands</desc> 
  <rect x="0" y="0" width="5" height="1" fill="black" />
  <rect x="0" y="1" width="5" height="1" fill="red" />
  <rect x="0" y="2" width="5" height="1" fill="#fc0" />  
</svg>

In diesem Beispiel sind drei Rechtecke fünf Einheiten breit und eine Einheit hoch und untereinander dargestellt.

Da das Seitenverhältnis der Flagge nicht dem des svg-Elements entspricht, wird die Flagge nicht gestreckt, sondern mit einem breiteren oberen und unteren Rand dargestellt. Die Proportionen bleiben erhalten.

Screenshot-flaggen-1.jpg

Exkurs: Ebenen

In SVG werden Elemente in der im Dokument auftretenden Reihenfolge gezeichnet und überdecken so evtl. darunterliegende Elemente.

übereinandergelegte Ebenen
  <rect x="0" y="0" width="5" height="3" fill="#fc0" />
  <rect x="0" y="0" width="5" height="2" fill="red" />
  <rect x="0" y="0" width="5" height="1" fill="black" />

Im Beispiel werden drei verschieden große Rechtecke gezeichnet. Der goldene Ton des unteren Balkens nimmt hier den gesamten Hintergrund ein.
Darüber werden ein rotes Rechteck mit 2/3 Höhe und noch darüber ein schwarzes Rechteck gelegt. Das Ergebnis entspricht wieder der deutschen Flagge.

Empfehlung: Verwenden Sie SVG-Elemente in der benötigten Größe und verzichten Sie auf solche Überlagerungen. Sie erleichtern so spätere Anpassungen und Verschiebungen im Quellcode.

Kreise und Linien

Natürlich gibt es neben Rechtecken auch andere Grundformen wie Kreise, Ellipsen, Linien, offene Polylinien und Polygonzüge, die sich wieder schließen.

Beispiel ansehen …
<svg width="300" height="200" viewbox="0 0 10 11">
  <desc>Wappen der Schweiz</desc>
  <rect x="0" y="0" width="10" height="6" fill="red" />
  <circle cx="5" cy="6" r="5" fill="red" />
  <line id="quer" x1="2"  y1="5" x2="8" y2="5" stroke="white" stroke-width="2" />
  <line id="hoch" x1="5"  y1="2" x2="5" y2="8" stroke="white" stroke-width="2" />
</svg>

Das Schweizer Wappen erhält zusätzlich zum rechteckigen Hintergrund noch einen Kreis, um die Rundung eines Wappens nachzuempfinden. Dabei wird das circle-Element verwendet.
Das Kreuz wird durch zwei übereinander gelegte line-Elemente dargestellt. Die Linien haben keine Füllung, sondern mit stroke eine Randkontur erhalten.


Beachten Sie, dass der Urspung (x|y) der viewBox und des rect-Elements in der linken, oberen Ecke liegen.
Bei einem Kreis wäre diese Orientierung jedoch nicht sinnvoll. Deshalb gibt es mit (cx|cy) zwei neue Koordinaten, die den Mittelpunkt des Kreises beschreiben.

In diesem Artikel erfahren Sie, wie Sie mit clipPath Grafiken in wappenförmigen Passformen darstellen können.

Pfade

Nicht alle Staaten haben Bi- oder Trikoloren. Viele Staaten haben Symbole wie Kreuze, Sterne oder eine Mondsichel in ihre Flaggen integriert.

Für kompliziertere Formen bietet sich neben den oben erwähnten Grundformen das path-Element an, mit dem Sie unregelmäßige Formen mit Linien, Bögen, Kurven und sogar Unterbrechungen festlegen können.

Kreuze

Die Flagge Dänemarks zeigt auf rotem Grund ein weißes Kreuz.

Flagge Dänemarks und Schwedens ansehen …
<svg width="300" height="200" viewbox="0 0 300 200">
  <desc>Flagge Dänemarks</desc>
  <rect x="0" y="0" width="300" height="200" fill="#E31836" />
  <path d="M 100,0 v 200 m-100,-100 h 300" 
        fill="none" 
        stroke="white" stroke-width="40" 
  />
</svg>

Die Flaggen bestehen aus zwei Formen.

Um den gesamten Bereich mit einer Farbe zu füllen, benötigen Sie ein rect-Element mit den Abmessungen der Grafik.

Anschließend wird über dieses ein path-Element gelegt, das ein Kreuz zeichnet.

Das skandinavische Kreuz kann man so zeichnen:

  • M 100,0 bewegt den Zeichenstift auf die Koordinate x=100, y=0.
    M steht für Move - dies ist der einzige Pfadbefehl, der den Stift bewegt, ohne dabei zu zeichnen.
  • v 200 zeichnet ab der aktuellen Position eine vertikale Linie der Länge 200. Der Zeichenstift steht nun bei x=100,y=200.
  • m -100,-100 bewegt den Stift ohne zu zeichnen 100 Einheiten nach links und nach oben, also nach x=0,y=100.
  • h 300 zeichnet eine horizontale Linie der Länge 300, also nach x=300,y=100.
Beachten Sie: In der Vorschau und im Frick-Beispiel sehen Sie einen weiteren Pfad mit den selben Befehlen. Anstelle eines 40 Einheiten breiten Rands ist er hier aber nur eine Einheit dick und gestrichelt. Er dient nur der Visualisierung, wie das Kreuz gezeichnet wird.

Konturen

Sie können Elemente aber nicht nur einfärben, sondern ihnen auch mit stroke eine Kontur geben.

Flagge Norwegens ansehen …
<svg width="300" height="200" viewbox="0 0 300 200">
  <desc>Flagge Norwegens</desc>
  <rect x="0" y="0" width="300" height="200" fill="#ef2b2d" />
  <path 
    d="m85,-5 h30 v90 h190 v30h-190 v90 h-30 v-90 h-90 v-30 h90z" 
    fill="#002868" 
    stroke="white" stroke-width="10" 
  />
</svg>

In diesem Beispiel wurde das skandinavische Kreuz etwas schmaler gezeichnet und mit einem 10 Einheiten breiten breiten, weißen Rand versehen.
Screenshot-flaggen-2.jpg

Beachten Sie, dass der gezeichnete Strich mittig auf dem (hier gestrichelt dargestellten) Rand zu liegen kommt. Wenn Sie den Wert für stroke-width höher setzen, wird das Element nach außen größer und die Innenfläche kleiner.

Der gestrichelte Rand gehört zu einem path-Element mit den gleichen Koordinaten, einer transparenten Füllung und einem mit stroke-dasharray festgelegten 1 Einheit breiten Randmuster.

Sterne

Viele Staaten haben Sterne in ihrer Flagge. Sie können diese mit einem Programm wie Inkscape erstellen lassen. Mit solchen Programmen erzeugter Code ist allerdings oft aufgebläht, da sich jede Drehung, Verschiebung und Größenänderung im Code wiederfindet. Sie können so erzeugten SVG-Code mit Tools optimieren.

Oft ist es jedoch einfacher, diese Formen selbst zu erstellen. Dabei kommen oft verblüffend einfache Lösungen heraus:

Wie viele Linien benötigen Sie, um mit möglichst wenig Aufwand einen fünfzackigen Stern zu zeichnen?

  • 4?
  • 5?
  • 9?
  • 10?


Flaggen mit Stern ansehen …
<svg width="300" height="200" viewbox="0 30 80 40">
  <desc>Stern ohne Füllung</desc>
  <path id="star" d="m13,70 l15-45 l15,45 l-38-28 h47" fill="none" stroke="#005293" />
</svg>

<svg width="400" height="200" viewBox="0 0 200 100" fill="#fff">
	<title>Flag of Cuba</title>
	<rect id="blueBackground" width="200" height="100" fill="#002a8f" />
	<rect id="white" width="200" height="60" x="0" y="20" fill="white" />
	<rect id="blueBar" width="200" height="20" x="0" y="40" fill="#002a8f" />		
	<path id="triangle" fill="#cb1515" d="M80,50 L0,100 V0 z"/>		
	<path id="star" d="m13,70 l15-45 l15,45 l-38-28 h47" fill="white"  />
</svg>

Übrigens:
Einen Stern kann man in SVG mit nur vier Linien zeichnen. Beide Sterne bestehen aus den gleichen Koordinaten im d-Attribut:

d="m13,70 l15-45 l15,45 l-38-28 h47"

  • Das linke Beispiel zeigt den Umriss mit blauer Kontur, aber ohne Füllung. Sobald ihm eine Füllfarbe zugewiesen wird, schließt sich die Form. (Wenn Sie neben der Füllfarbe eine andersfarbige Umrandung zeichnen wollen, benötigen Sie eine genaue Umrandung mit 10 Linien.)
  • Der linke Stern und der Stern rechts haben die gleichen Koordinaten. Im linken Beispiel wurde zur besseren Anschaulichkeit die viewBox verschoben, sodass nur ein kleiner Ausschnitt zu sehen ist:

<svg width="300" height="200"viewbox="0 30 80 40">

  • Im rechten SVG wird der Stern ohne Kontur weiß gefüllt - es ist dabei egal, dass die Form nicht geschlossen ist. Dies könnte man durch einen closePath-Befehl Z erreichen.


Das rote Dreieck verwendet anders als in den Beispielen oben absolute Pfad-Kommandos:

  • <path d="M80,50 L0,100 V0 z"/> bezeichnet einen Pfad, der von der Koordinate 80,50 zum Punkt 0,100 (dem linken unteren Rand) zeichnet. V0 zeichnet eine Vertikale bis zu y=0. Mit Z wird die Form bis zum Ausgangspunkt 80,50 geschlossen, es ist keine genaue Angabe mehr nötig.
  • <path d="m80,50 l-100,100 v-100 z"/> wäre mit relativen Kommandos geringfügig länger.

Vorlagen definieren

Komplexere Grafiken haben oft wiederkehrende Elemente. So hat die Europaflagge 🇪🇺 12, das Sternenbanner 🇺🇸 gar 50 Sterne. Mit SVG müssen Sie diese Elemente nicht immer wieder neu zeichnen, sondern können Sie einmal definieren und wieder aufnehmen:

Sterne in der Flagge Panamas ansehen …
<svg width="300" height="200" viewbox="0 0 300 200">
  <desc>Flagge Panamas</desc>
  <rect width="300" height="200" fill="white" />
  <g fill="#005293">
     <path d="m60,70 l15-45 l15,45 l-38-28 h47" id="stern" />   
     <rect y="100" width="150" height="100" id="rechteck" />
  </g>
  <g fill="#d21034">
    <use href="#stern" x="150" y="100" />
    <use href="#rechteck" x="150" y="-100" />
  </g>
</svg>

Die Flagge hat einen weißen Hintergrund (der genaugenommen nicht nötig ist, aber sicherheitshalber definiert ist, falls es einen (anders-)farbigen Hintergrund gibt) und zwei g-(group)-Elemente.

Die erste Gruppierung hat als Zuweisung eine blaue Füllfarbe #005293, die für alle Kindelemente gilt. Kindelemente sind ein path, mit dem ein Stern gezeichnet wird, und ein rect.

In der zweiten Gruppierung mit einer anderen (roten) Füllfarbe #d21034 werden beide Kindelemente mit einem use-Element wieder aufgerufen. Das use-Element enthält

  • ein href-Attribut, mit dem wie in HTML ein Element über seine id referenziert wird.
  • x- und y-Koordinaten, mit denen das duplizierte Element an die passende Stelle verschoben wird.

symbol oder g

Wie bei polyline, polygon und path, die alle unregelmäßige Grundformen zeichnen können, gibt es auch bei der Definition von Grafik-Vorlagen mehrere Möglichkeiten. Oben wurde ein bereits verwendetes Grafik-Objekt aufgerufen und wiederverwendet.

Sie können aber auch einen eigenen Definitionsabschnitt einrichten und dort Objekte notieren, die Sie erst später aufrufen. Das symbol-Element wird auch außerhalb eines Definitionsabschnitts nicht gerendert und darf im Unterschied zu g ein viewBox-Attribut besitzen, mit dem Sie die enthaltenen Grafiken zuschneiden und skalieren können.

Der Union Jack in verschiedenen Flaggen ansehen …
<svg width="400" height="200" viewbox="0 0 400 200">
  <defs>
    <clipPath id="ausschnitt">
      <path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
    </clipPath>
	  
    <symbol id="unionjack" viewBox="0 0 58 28" >
      <desc>Union Jack Flagge Großbritanniens </desc>
      <rect id="hintergrund" width="60" height="30" fill="#00247d"/>
      <path id="andreaskreuz" d="M0,0 L60,30 M60,0 L0,30" stroke="white" stroke-width="6"/>
      <path id="patrickskreuz" d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#ausschnitt)" stroke="#cf142b" stroke-width="4"/>
      <path id="georgskreuz1" d="M30,0 v30 M0,15 h60" stroke="white" stroke-width="10"/>
      <path id="georgskreuz2" d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
    </symbol>	
    ...
  </defs>
  
  <use href="#unionjack" />
</svg>

<svg width="400" height="200" viewbox="0 0 400 200">
  <desc>Flagge Neuseelands </desc>
  ...
  <use href="#unionjack" transform="scale(0.5,0.5)" />
  ...
</svg>

Das linke SVG enthält nur zwei Kindelemente:

  1. einen Definitionsabschnitt und
  2. ein use-Element, dass #unionjack aufruft.

Dieser Union Jack wird im Definitionsabschnitt als symbol festgelegt. Dabei werden die aus der Wikipedia übernommenen Pfadangaben nicht an die Größe der Flagge angepasst, sondern die viewBox des symbol-Elements entsprechend festlegt. Anstelle einer nur 60 x 30px großen Grafik (Entfernen Sie das viewBox-Attribut im Frickl!) wird die Grafik nun beim Aufrufen mit use in den vorhandenen Raum hinein skaliert.

Stern mit Umrandung in mehreren Größen aufrufen

In der neuseeländischen Flagge wird neben dem Union Jack in der oberen linke Ecke auch das Kreuz des Südens dargestellt. Dieses Sternbild besteht aus unterschiedlich hellen, auf der Flagge unterschiedlich großen Sternen – kein Problem für SVG:

Ein Stern mit Umrandung in mehreren Größen aufgerufen ansehen …
<svg width="400" height="200" viewbox="0 0 400 200">
  <defs>
    <symbol id="unionjack" viewBox="0 0 60 30" >
    ...
    </symbol>
	
    <g id="stern" stroke="white" stroke-width="3">
      <path d="m60,70 l6-18 l-14-10 h17 l6-18 l6,18 h17 l-14,10 l6,18 l-15,-11 z" fill="#cf142b" /> 
     </g>
  </defs>
  
  <use href="#unionjack" />
</svg>

<svg width="400" height="200" viewbox="0 0 400 200">
  <desc>Flagge Neuseelands </desc>
  <rect x="0" y="0" width="400" height="200" fill="#00247d" />
  <use href="#unionjack" transform="scale(0.5,0.5)" />
  <use href="#stern" transform="translate(255,130) scale(0.6)"/>
  <use href="#stern" transform="translate(263,15) scale(0.5)"/>
  <use href="#stern" transform="translate(308,55) scale(0.4)"/>
  <use href="#stern" transform="translate(217,62) scale(0.5)"/>  
</svg>

Die Flagge Neuseelands besteht aus

  1. einem dunkelblauen Hintergrund in Form eines rect-Elements
  2. dem Union Jack, der mit use aufgerufen wird und bereits im vorhergehenden SVG (im gleichen HTML-Dokument) als symbol definiert wurde.
  3. mehrere Sterne, die das symbol id="stern" aufrufen.

Im Unterschied zum oberen Beispiel soll der Stern nun eine Umrandung erhalten. Dafür eignen sich die vier Linien nicht, da die Randkontur den Stern schneiden würden und wir benötigen zehn Linien, die den Rand entlang fahren. Neun werden durch Pfadangaben, die letzte durch ein Schließen des Pfads mit dem Pfad-Kommando z erreicht. Dies hat neben der kürzeren Notierung den Vorteil, dass der Ausgangspunkt immer genau getroffen wird.

Beim Aufrufen mit use wird der Stern nicht nur an die passende Position, sondern mit scale() auch in die passende Größe transformiert.

Verschachteln von symbol

Unmöglich: Aufrufen eines symbol im symbol
<svg width="400" height="200" viewbox="0 0 400 200">
<symbol id="stern" stroke="white" stroke-width="3">
      <path d="m60,70 l6-18 l-14-10 h17 l6-18 l6,18 h17 l-14,10 l6,18 l-15,-11 z" fill="#cf142b" /> 
</symbol>

<symbol id="Kreuz_Des_Südens">
  <use href="#stern" transform="translate(255,130) scale(0.6)"/>
  <use href="#stern" transform="translate(263,15) scale(0.5)"/>
  <use href="#stern" transform="translate(308,55) scale(0.4)"/>
  <use href="#stern" transform="translate(217,62) scale(0.5)"/>  
</symbol>
Beachten Sie, dass innerhalb eines symbol-Elements nur Grundformen und Pfade, aber keine anderen symbol-Elemente notiert sein dürfen. Hier wäre die Verwendung eines g-Elementes, wie es oben erfolgt ist, passender.

Jetzt geht's rund!

Bis jetzt wurden alle Grundformen (mit Ausnahme der abgerundeten Schweizerflagge) nur aus Linien gebildet. Dabei sind in SVG auch Bögen und Kurven möglich.

Vielleicht ist ihnen schon einmal die Flagge Frieslands aufgefallen – viele Herzen auf einem blau-weiß gestreiften Hintergrund. Ein näherer Blick zeigt, dass dies keine Herzen, sondern Seerosenblätter sind. Um sie nicht immer wieder zeichnen zu müssen, können Sie sie einmal als Vorlage anlegen und später aufrufen.

Flaggen Friesland und Flevolands ansehen …
<defs>
	<path id="pomp" d="M0,12A16.143,16.143 0 0,1 -14,-4A7,8 0 0,1 -2.050,-9.657Q-1,-8.457 -1,-5A1,1 0 1,0 1,-5Q1,-8.457 2.050,-9.657A7,8 0 0,1 14,-4A16.143,16.143 0 0,1 0,12z" transform="rotate(35) scale(4.625)"/>
</defs>
<rect width="900" height="600" fill="mediumblue"/>
<g fill="#fff" transform="scale(130,90)">
  <path d="M0,3V5L2,7H4z"/>
  <path d="M1,0H0V1L6,7H7V6z"/>
  <path d="M3,0H5L7,2V4z"/>
</g>
<g fill="red">
  <use xlink:href="#pomp" x="455" y="315"/>
  <use xlink:href="#pomp" x="91" y="423"/>
  <use xlink:href="#pomp" x="819" y="207"/>
  ...

Die Flagge Frieslands besteht aus

  1. einem rect-Element mit blauer Füllung als Hintergrund
  2. drei path-Elementen als weiße Streifen
  3. sieben use-Elementen, die die als symbol festgelegten Seerosen aufrufen.
    Im d-Attribut finden sich neue Befehle:
    d="M0,12A16.143,16.143 0 0,1 -14,-4A7,8 0 0,1 -2.050,-9.657Q-1,-8.457 -1,-5 ...z"
    • Mit dem A-Befehl setzen Sie einen Radius, die Richtung und den Endpunkt von elliptischen Bögen fest.
    • Mit dem Q-Befehl legen Sie quadratische Bézier-Kurven fest. Dies sind Kurven zwischen zwei Punkten, die durch einen Kontrollpunkt beeinflusst werden.

Auch die Flagge Flevolands zeigt etwas Neues: Der Übergang vom Meer zum Land wird durch ein gelbes Band, das den Rapsanbau symbolisieren soll, dargestellt. Hier findet sich eine Welle, die ebenfalls im d-Attribut wiederzufinden ist:
d="M600,172 c-2,0-220.006,1.025-245,0.508 C330,172,315,162,290,162 ...z"
Mit dem c-Befehl legen Sie kubische Bézier-Kurven fest. Dies sind Kurven zwischen zwei Punkten, die durch zwei Kontrollpunkte beeinflusst werden.

Empfehlung:
Bögen und Kurven sind mächtige, aber wenig intuitive Befehle. In diesem Tutorial wird dies genauer erklärt: Behalten Sie Pfade mit Bögen und Kurven im Hinterkopf, gehen zunächst aber zum nächsten Kapitel, in dem Sie lernen, wie Sie SVG mit CSS stylen können.

inhaltsleer oder doch mit End-Tag?

Normalerweise sind die Elemente der Grundformen inhaltsleere Elemente, müssen also am Ende noch einen abschließenden Schrägstrich haben.

inhaltsleer und mit Kindelement
<svg ...>
  
  <rect x="50" y="50" width="300" height="100"/>

  <rect x="50" y="50" width="300" height="100">
    <title>Beschreibung, die beim :hovern sichtbar wird</tite>
  </rect>    
    
  <rect x="50" y="50" width="300" height="100">
    <animate  />
  </rect>
 
</svg>

Wenn Sie eine Grundform mit SMIL animieren oder ein title-Element einfügen, wird das Animations-Element zum Kind-Element. Deswegen benötigt das rect-Element im 2. und 3. Beispiel ein Start- und ein End-Tag; der abschließende Schrägstrich aus dem 1. Beispiel fällt weg.

Siehe auch