SVG/Anwendung und Praxis/Flaggen mit SVG zeichnen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Flaggen bestehen im Unterschied zu Wappen häufig aus geometrischen Formen, 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.

In diesem Tutorial 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.

Einbindung[Bearbeiten]

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

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Einbindung von SVG
<h1>Überschrift</h1>

<svg width="300" height="200" viewbox="0 0 3 2">
 ...
</svg>
SVG-Code kann innerhalb des svg-Elements in jedes HTML5-Dokument eingefügt werden.
Dieses SVG-Element ist unsere Zeichenfläche und stellt ein kartesisches Koordinatensystem mit dem Ursprung (0 | 0) in der linken, oberen Ecke dar, dessen Breite und Höhe durch den dritten und vierten Parameter des viewBox-Attributs festglegt werden.
Hauptartikel: SVG/Einbindung

Grundformen[Bearbeiten]

Rechtecke[Bearbeiten]

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 einen öffnenden und schließenden 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 das x-Attribut werden sie nebeneinander dargestellt. Mit dem fill-Attribut können Sie die Fläche mit Farben füllen.
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.
Beachten Sie: Da SVG-Grafiken kein alt-Attribut besitzen, sollten Sie eine zusätzliche Erklärung in einem desc-Element verwenden.

Skalierung[Bearbeiten]

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 Pixel breit und ein Pixel 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.


Exkurs: Ebenen[Bearbeiten]

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

Beispiel: ü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[Bearbeiten]

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="2px" />
  <line id="hoch" x1="5"  y1="2" x2="5" y2="8" stroke="white" stroke-width="2px" />
</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ürde diese Orientierung jedoch nicht sinnvoll sein. 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.

Exkurs: Seitenverhältnis[Bearbeiten]

Die Flaggen der Staaten haben verschiedene Proportionen, so ist die Schweizer Fahne quadratisch. Allerdings ist die Marineflagge der Schweiz (ja, das gibt's wirklich!) auch im Quasi-Standard 2:3 festgelegt.

Für eine spätere Verwendung als Icons ist eine gemeinsame Größe vorteilhaft; deshalb wird im Folgenden ein Seitenverhältnis von 2:3 verwendet.

Pfade[Bearbeiten]

Kreuze[Bearbeiten]

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.

Beispiel 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="m80,0 h40 v80 h180 v40h-180 v80 h-40 v-80 h-80 v-40 h80z" fill="white" />
</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. Es erhält in seinem d-Attribut (engl. data) eine Kombination von Koordinaten und Pfadbefehlen:

  • m80,0 bewegt den Zeichenstift auf diese Koordinate
  • h40 zeichnet eine Linie 40px in der Horizontalen
  • v80 zeichnet eine Linie 80px in der Vertikalen

...

  • z schließt den Pfad, indem eine Linie zum ersten m-Befehl gezogen wird.
    Weitere Befehle können diagonale Linien, Bögen und Kurven ziehen.

Konturen[Bearbeiten]

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

Beispiel 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 10px breiten, weißen Rand versehen.
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.

In SVG 2 ist eine Eigenschaft stroke-alignment geplant, mit der Sie die Ausrichtung der Kontur bestimmen können.

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

Sterne[Bearbeiten]

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 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?


Beispiel 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 xlink:href="#stern" x="150" y="100" />
    <use xlink:href="#rechteck" x="150" y="-100" />
  </g>
</svg>
Die Flagge hat einen weißen Hintergrund und zwei g-(group)-Elemente.

Die erste Gruppierung hat als Zuweisung eine Füllfarbe, 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 Füllfarbe werden beide Kindelemente mit dem use-Element wieder aufgerufen. Durch die neuen x- und y-Koordinaten werden die duplizierten Elemente an die passende Stelle verschoben.
Übrigens:

  • Einen Stern kann man in SVG mit nur vier Linien zeichnen. Das linke Beispiel zeigt den Umriss 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 die beiden Sterne 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="35 25 75 50">
Beachten Sie: In diesen Beispielen wurden die Pfad-Kommandos mit Kleinbuchstaben eingeleitet. Die Angabe von Großbuchstaben würde absolute Pfadbefehle, die vom Ursprung der SVG-Grafik ausgehen, ergeben. Hier müssten Sie bei einer Änderung des Ausgangspunkt alle Werte anpassen.

Vorlagen definieren[Bearbeiten]

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 neun Seerosenblätter sind. Um sie nicht immer wieder zeichnen zu müssen, können Sie sie einmal als Vorlage anlegen und später aufrufen.

In SVG können Sie wie in HTML mit CSS Formate in einem style-Abschnitt festlegen und dann Elementen, Klassen und ids zuweisen. Daneben ist es aber auch möglich, in einem Definitionsabschnitt Formen, Muster und Verläufe festzulegen und später beliebig oft aufzurufen.

Beispiel ansehen …
  <defs>
    <linearGradient id="verlauf1" x1="105%" y1="0%" x2="0%" y2="100%">
      <stop offset="17%" stop-color="#0155a5" />
      <stop offset="17%" stop-color="#fff" />
      <stop offset="31%" stop-color="#fff" />	
      <stop offset="31%" stop-color="#0155a5" />
      <stop offset="44.5%" stop-color="#0155a5" />	  
      ....
    </linearGradient>
	
    <path id="seerose" d="M0,18.5A25,25 0 0,1 -21.7,-6.2A10.7,12 ... z" fill="#ee3e34" />	
  </defs>	

  <rect width="300" height="200" fill="url(#verlauf1)" />
  <use xlink:href="#seerose" transform="translate(70,46) rotate(35)" />
  <use xlink:href="#seerose" transform="translate(150,100) rotate(35)" />
  <use xlink:href="#seerose" transform="translate(230,154) rotate(35)" />
  ...
</svg>
Der blau-weiß gestreifte Hintergrund wird nicht durch mehrere eigene Elemente, sondern mit einem Farbverlauf dargestellt.

Dafür wird im Definitionsabschnitt ein linearGradient-Element definiert. Dieses enthält mehrere stop-Elemente. Durch einen jeweils gleichen offset-Wert für zwei stops erzielen Sie harte Übergänge. Durch die vier Werte x1, x2, y1, y2 können Sie die Richtung des Farbverlaufsvektors steuern.
Die Seerosen werden mit einem path-Element mit elliptischen Bögen festgelegt.

Anschließend wird der Verlauf als Füllung für den Hintergrund referenziert. Auch die Seerose wird mit ihrer id aufgerufen.

Während im letzten Beispiel die x- und y-Koordinaten angepasst wurden, wird die referenzierte Form hier mit dem transform-Attribut passend gedreht und verschoben.

Solche Muster können beliebig gedreht, gestreckt und gestaucht werden, wie dieses Beispiel eines bayerischen Rautenmusters zeigt.

symbol oder g[Bearbeiten]

Wie bei polyline, polygon und path gibt es auch bei der Festlegung von Gruppierungen im Definitionsabschnitt mehrere Möglichkeiten. So gibt es neben der oben erwähnten Möglichkeit des g (group)-Elements noch das symbol-Element.

Es 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.

Beispiel: Der Union Jack in verschiedenen Flaggen ansehen …
<svg width="400" height="200" viewbox="0 0 400 200">
    <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 xlink:href="#unionjack" />
</svg>

<svg width="400" height="200" viewbox="0 0 400 200">
  <desc>Flagge Neuseelands </desc>
  ...
  <use xlink:href="#unionjack" transform="scale(0.5,0.5)" />
  ...
</svg>
Im ersten SVG wird der Union Jack 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[Bearbeiten]

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:

Beispiel: 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 xlink: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 xlink:href="#unionjack" transform="scale(0.5,0.5)" />
  <use xlink:href="#stern" transform="translate(255,130) scale(0.6)"/>
  <use xlink:href="#stern" transform="translate(263,15) scale(0.5)"/>
  <use xlink:href="#stern" transform="translate(308,55) scale(0.4)"/>
  <use xlink:href="#stern" transform="translate(217,62) scale(0.5)"/>  
</svg>
Die Gruppierung mit der id="stern" ist dokumentweit einmalig und deshalb auch im gesamten Dokument, auch in einem anderen svg-Element, verfüg- und referenzierbar.

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[Bearbeiten]

Beispiel: Unmöglich: Aufrufen eines symbol im symbol
<svg width="400" height="200" viewbox="0 0 400 200">
<ysmbol 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 xlink:href="#stern" transform="translate(255,130) scale(0.6)"/>
  <use xlink:href="#stern" transform="translate(263,15) scale(0.5)"/>
  <use xlink:href="#stern" transform="translate(308,55) scale(0.4)"/>
  <use xlink: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.

Ausblick[Bearbeiten]

SVG ist für alle Grafiken außer Fotografien das bessere Format für Ihre Webseiten. Text in SVG wird von Suchmaschinen und Screenreadern als Text erkannt und hilft Ihre Webseiten zugänglicher zu machen.

Gerade auch im Bereich Datenvisualisierung können Infografiken und interaktive Geschichten sehr gut mit SVG umgesetzt werden.

Siehe auch[Bearbeiten]


Quellen[Bearbeiten]