Einfaches Balkendiagramm mit SVG erstellen
Die Webprogrammierung ist sehr vielseitig. Wenn es um Diagramme erstellen geht, so gibt es viele Möglichkeiten. Eine davon ist das SVG Element. In diesem Artikel zeige ich dir, wie du mit SVG ein Balkendiagramm zeichnen kannst.Diagramme erstellen - Möglichkeiten
Falls du weitere Möglichkeiten suchst, Diagramme zu erstellen, meine weiteren Tutorials:- Grafiken mit PHP zeichnen
- Diagramm mit Canvas zeichnen
Das SVG Element, zum grafischen darstellen
SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafik) und basiert auf XML (Extensible Markup Language), welches als HTML Tag verfügbar ist. Dieses wird als<pre><svg></svg></pre>
notiert und wird für zweidimensionale Grafiken genutzt. Anders wie im Canvas-Element, sind erstellte Zeichenobjekte direkt anwählbar und CSS kann auf Elemente zugreifen (sowie auch JavaScript).
In diesem Tutorial wollen wir diese Grafik erstellen:

SVG Balkendiagramm erstellen/zeichnen
Schritt 1: Die HTML-Datei
Als erstes erstellen wir uns ein Grundgerüst. Das ist die HTML-Seite mit den Platzhaltern für den weiteren Programmcode.Erstelle dir eine neue .html Datei, z.B. svg-diagramm.html und füge folgenden Code hinzu:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Diagramm</title>
</head>
<body>
<style type="text/css">
<!-- Platzhalter für CSS Code //-->
</style>
<svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">
<!-- Platzhalter für SVG Code //-->
</svg>
</body>
</html>
Erläuterung zum Code
Mit !DOCTYPE html nutzen wir den neusten Doctype für HTML (mehr Doctypes hier). Das Meta-Tag für Content-Type beinhaltet das Charset mit der ISO 8859-1, um Umlaute (äüö) und ß darstellen zu können.
Dann platzieren wir ein style-Bereich, für CSS. Das benötigen wir, um SVG mit seinen Elementen noch etwas stylischer zu gestalten.
Das svg-Element ist ebenfalls enthalten. Das Attribut xmlns verweist auf W3C (das Wordld Wide Web Consortium (WWWC bzw. W3C) mit der XML 1.0 Spezifikation. Die beiden Platzhalter ersetzen wir nun mit nachfolgenden Schritten.
Schritt 2: Balken erstellen
Ersetze den Platzhalter für SVG Code mit folgendem:SVG-HTML Code:
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<rect x="50" y="95" width="90" height="20" rx="3" ry ="3" fill="#B4472A" />
Erläuterung zum Code:
Das < rect /> Element weist an, das ein rectangle (Rechteck) gezeichnet werden soll.
Die Attribute für rect:
- x - Beginn auf der X-Achse (horizontale)
- y - Beginn auf der Y-Achse (vertikale)
- width - Breite des Balkens
- height - Höhe des Balkens
- rx und ry - Radius auf x-Achsebene bzw. y-Achsebene
- fill - HTML Farbcode der Füllung (sprich: Farbe des Balkens)
Das sieht dann schonmal gut aus:

SVG - die Balken sind da!
Damit wollen wir uns aber noch nicht zufrieden geben - es fehlt die Beschriftung, also ein Text für jeden Balken und eine schmucke Trennlinie.
Schritt 3: Balken mit Text benamen + schmucke Trennlinie
Passe den SVG-HTML Code folgendermaßen an:SVG-HTML Code (verändern):
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>
<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />
<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
Erläuterung zum Code:
Nun ist vor jedem Balken
Ganz am Ende gibt es eine Linie
Neu sind nun ein paar Attribute:
- font-size - Größe der Schriftart in Pixel
- font-family - Schriftart/Schriftfamilie. Leerzeichen sind hier erlaubt, z.b. bei Times New Roman
- stroke-width - Liniendicke
- stroke - Farbe der Linie als HTML Code
Das Ergebnis ist ein fast vollwertiges Diagramm:

SVG Diagramm mit Balken und Text
Nun möchten wir aber noch ein Highlight setzen: Rasterlinien und ein Mouse-Hover.
Schritt 4: Rasterlinien und Mouse-Over/Hover Effekt
Für die Rasterlinien benutze ich ein kleines Bild, welches mittels CSS in das SVG-Element eingefügt und in alle Richtungen wiederholt wird. Das ist einfacher, als etwas aufwendig zu berechnen und Hintergrundlinien zu zeichnen.Du benötigst folgendes Bild:

SVG Rasterlinie
Kannst du das linke kleine weiße Bildchen erkennen? Es ist 30x30 Pixel klein, oben und links ist eine graue Linie. In der Wiederholung des Bildes ergibt sich daraus ein 30x30 Pixel Raster. Rechtsklick darauf -> speichern unter auswählen. Speichere es da, wo auch deine HTML Datei liegt.
Nun ersetzen wir den Platzhalter CSS:
#statSvg{background-image:url('svg-rasterlinie.jpeg');}
#statSvg rect{opacity: 0.9;}
#statSvg rect:hover{opacity: 0.6;}
Erläuterung zum Code:
Unser SVG hat die id statSvg erhalten, dies sprechen wir in CSS mit #statSvg an.
opacity dient für die Durchsichtigkeit des Balkens. Bei 0.9 liegt diese bei 10%. Zeigt man mit der Maus auf einen Balken, wird dieser sogar 0.6 (40%) durchsichtig. Ein schöner effekt, wie ich finde.
Damit sind wir am Ende des Tutorials. Dein Diagramm sollte nun genau so aussehen:

SVG Balkendiagramm erstellen/zeichnen
Hier nochmal der gesamte Code zum Vergleich:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Diagramm</title>
</head>
<body>
<style type="text/css">
#statSvg{background-image:url('svg-rasterlinie.jpeg');}
#statSvg rect{opacity: 0.9;}
#statSvg rect:hover{opacity: 0.6;}
</style>
<svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>
<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />
<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>
<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />
<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />
</svg>
</body>
Fandest du das Tutorial gut? Zeige es deinen Freunden und verteile es bei Facebook, Twitter, Google+ usw.. Du möchtest mehr solche Tutorial zum nachbauen? Schreib ein Kommentar mit deinem Wunsch!