Abschnitt 1
Grundformen
Die Idee von SVG
Die meisten Bilder und Grafiken, die Sie verwenden und online finden, basieren auf Pixeln. Das ist ein Nachteil, da sie sich nicht gut skalieren lassen. Das heisst, wenn Sie ausreichend heranzoomen, werden Sie irgendwann immer die einzelnen Pixel sehen. Vektorgrafiken basieren auf einer völlig anderen Idee: Anstatt dem Computer zu sagen, welche Pixel ein- und ausgeschaltet werden sollen, geben wir dem Computer vor, welche Form wir möchten, und er füllt die Pixel bei Bedarf aus. Das bedeutet, dass der Computer immer weiss, wie das Bild aussehen sollte, unabhängig davon, wie stark wir heran- oder herauszoomen, und es mit der entsprechenden Auflösung zeichnen kann.
Ctrl/⌘ +
+): Der rechte Kreis bleibt scharf, der linke nicht.
Eine Rastergrafik ist also eine Tabelle von Farbwerten: für jeden Pixel ist gespeichert, welche Farbe er hat. Wie viele Pixel es gibt, wird beim Speichern des Bildes ein für alle Mal festgelegt — das ist die Auflösung. Eine Vektorgrafik ist dagegen eine Bauanleitung: «Zeichne einen Kreis mit Mittelpunkt (60, 60) und Radius 60». Erst wenn das Bild dargestellt wird, rechnet der Computer aus, welche Pixel dafür welche Farbe brauchen.
| Rastergrafik | Vektorgrafik | |
|---|---|---|
| gespeichert wird | die Farbe jedes Pixels | die Form jedes Objektes |
| Auflösung | fest | beliebig |
| Vergrössern | wird unscharf oder klotzig | bleibt scharf |
| Dateigrösse | je mehr Pixel, desto grösser | je mehr Objekte, desto grösser |
| geeignet für | Fotos | Logos, Icons, Diagramme, Karten |
| Dateiformate | .png, .jpg |
.svg, .pdf |
Ein Foto lässt sich nicht sinnvoll als Vektorgrafik beschreiben — es besteht nicht aus einigen wenigen Formen. Umgekehrt ist ein Logo, das einmal auf einer Visitenkarte und einmal auf einem Plakat gedruckt wird, als Vektorgrafik viel besser aufgehoben. Genau deshalb sind Icons, Schriftarten und Landkarten im Web praktisch immer Vektorgrafiken.
Bemerkung
Eine SVG-Datei ist eine reine Textdatei. Sie können sie also mit
jedem Texteditor öffnen und von Hand verändern — genau das machen wir
in diesem Kapitel. Sie lässt sich auch mit einem Programm erzeugen
und mit git versionieren. Für aufwändigere Zeichnungen
gibt es Programme wie
Inkscape, welche die Formen für
Sie in SVG-Code umwandeln.
Grundstruktur
Skalierbare Vektorgrafiken (SVG) sind nichts anderes als eine Serie von
Befehlen, die Ihrem Computer mitteilen, was er auf Ihrem Bildschirm
zeichnen soll. Sie lassen sich ganz einfach in HTML-Code einbetten,
können aber auch als separate Bilddateien (üblicherweise mit der
Dateierweiterung «.svg») verwendet werden.
Der Aufbau ist derselbe, den Sie von HTML kennen: Es gibt Tags, die mit
< und > geschrieben werden, und diese
Tags haben Attribute der Form name="wert". Alles wird von
einem <svg>-Tag umschlossen. Eine Form, die keinen
Inhalt hat, schreiben wir als selbstschliessendes Tag, also zum Beispiel
<circle … />. Kommentare werden wie in HTML mit
<!-- … --> geschrieben.
Jedes SVG-Bild wird in einem Koordinatensystem gezeichnet. Das Koordinatensystem ist allerdings anders, als wir es aus der Mathematik gewohnt sind. Die y-Achse zeigt nach unten statt nach oben! Der Ursprung (0, 0) liegt also in der oberen linken Ecke. Die Längen werden dabei in «Benutzereinheiten» angegeben, was standardmässig einem Pixel entspricht.
Beispiel
Im vorliegenden Beispiel wird ein SVG-Tag zusammen mit einer Reihe von
Attributen dargestellt. Wird das SVG-Tag direkt in eine HTML-Datei
geschrieben, so geben die Attribute width und
height des SVG-Tags an, wie viel Platz auf der Webseite für
dieses Bild reserviert werden soll.
Wie wir in Listing 1 sehen können, lassen sich Grundformen mit diversen optionalen Attributen ergänzen. Unter vielen anderen sind da die folgenden zu nennen:
fill- Die Füllfarbe.
stroke- Die Strichfarbe.
stroke-width- Die Strichbreite.
opacity- Die Deckkraft der Form.
Wir werden diese Attribute in den folgenden Beispielen immer wieder anwenden.
Farben und Deckkraft
Für Farben gibt es — genau wie in CSS — mehrere Schreibweisen:
- Farbnamen
-
Es gibt rund 150 vordefinierte Namen, zum Beispiel
red,yellowodertomato. - Hexadezimal
-
#4682b4gibt den Rot-, Grün- und Blauanteil je als zweistellige Hexadezimalzahl an. rgb(…)-
rgb(60, 179, 113)gibt dieselben drei Anteile als Zahlen von 0 bis 255 an. none-
Gar keine Farbe. Ein
fill="none"ist also nicht dasselbe wie ein weiss gefülltes Objekt: Was darunter liegt, bleibt sichtbar.
Beispiel
rgb(…) und
none.
Die Deckkraft können wir mit einer Zahl zwischen 0 (durchsichtig) und 1 (deckend) steuern. Dabei gibt es drei Attribute, die man nicht verwechseln sollte:
opacity- Die Deckkraft der ganzen Form, inklusive Rand.
fill-opacity- Nur die Deckkraft der Füllung.
stroke-opacity- Nur die Deckkraft des Randes.
Beispiel
Die Zeichenfläche und die viewBox
Neben width und height kann auch das
viewBox-Attribut verwendet werden, um ein SVG-Element
genauer zu platzieren.
<svg viewBox="min-x min-y width height">
viewBoxDie Attributwerte sind dabei die folgenden:
min-x- Die kleinste x-Koordinate, die dargestellt wird. Alles «weiter links» wird abgeschnitten.
min-y- Die kleinste y-Koordinate, die dargestellt wird. Alles «weiter oben» wird abgeschnitten.
width- Die Breite des zu zeichnenden Bildes. Alles «weiter rechts» wird abgeschnitten.
height- Die Höhe des zu zeichnenden Bildes. Alles «weiter unten» wird abgeschnitten.
Die viewBox ist also ein Ausschnitt des
Koordinatensystems, und dieser Ausschnitt wird auf den zur Verfügung
stehenden Platz gestreckt. Damit können wir zwei Dinge auf einmal
erreichen: Wir wählen aus, welcher Teil der Zeichnung sichtbar ist, und
wir bestimmen, wie stark sie vergrössert dargestellt wird.
Beispiel
viewBox zeigt nur
die rechte Hälfte, also sind nur zwei zu sehen.
Bemerkung
Es ist meistens praktisch, die viewBox so zu wählen,
dass die Zeichnung genau hineinpasst, und auf width und
height ganz zu verzichten. Dann passt sich das Bild
automatisch dem Platz an, den es bekommt — und genau das ist ja der
Sinn einer skalierbaren Grafik.
SVG in einer Webseite verwenden
Es gibt drei gängige Wege, eine Vektorgrafik in eine Webseite einzubauen.
Der erste Weg schreibt den SVG-Code direkt in die HTML-Datei. Nur so können wir die einzelnen Formen später mit CSS gestalten oder mit JavaScript verändern. Die anderen zwei Wege verweisen auf eine separate Datei; das ist übersichtlicher und die Datei kann vom Browser zwischengespeichert werden.
Grundformen
Kreise und Ellipsen
Das Element <circle> erzeugt einen Kreis auf dem
Bildschirm. Es verwendet drei grundlegende Attribute, um die Position
und Grösse des Elements zu bestimmen:
r- Der Radius des Kreises.
cx- Die x-Koordinate des Mittelpunktes des Kreises.
cy- Die y-Koordinate des Mittelpunktes des Kreises.
Beispiel
Das Element <ellipse> erzeugt eine Ellipse. Es
verwendet vier grundlegende Attribute:
rx- Die Länge der horizontalen Halbachse.
ry- Die Länge der vertikalen Halbachse.
cx- Die x-Koordinate des Mittelpunktes der Ellipse.
cy- Die y-Koordinate des Mittelpunktes der Ellipse.
Beispiel
Rechtecke
Das Element <rect> erzeugt ein Rechteck. Es gibt
sechs Attribute, die die Position und die Form des Rechtecks steuern.
x,y- Die Koordinaten der oberen linken Ecke.
width,height- Die Breite und die Höhe des Rechtecks.
rx,ry- Die Radien für abgerundete Ecken. Fehlen beide, sind die Ecken nicht abgerundet. Ist nur einer der beiden angegeben, gilt er für beide.
Beispiel
Linien, Polylinien und Polygone
Das Element <line> nimmt die Koordinaten von zwei
Punkten als Parameter und zeichnet eine gerade Linie zwischen ihnen.
Die Attribute heissen x1, y1 für den ersten
und x2, y2 für den zweiten Punkt. Beachten
Sie, dass eine Linie keine Füllung hat: Ohne stroke sehen
Sie also gar nichts.
Beispiel
Das Element <polyline> bietet die Möglichkeit, eine
ganze Liste von Punkten miteinander zu verbinden. Da diese Liste lang
werden kann, sind alle Punkte in einem einzigen Attribut
points enthalten. Jeder Punkt muss sowohl eine
x- als auch eine y-Koordinate enthalten. Die Liste
(0, 0), (1, 3), (2024, 33) wird einfach als
points="0 0 1 3 2024 33" geschrieben. Es empfiehlt sich
für eine bessere Lesbarkeit, jeden Punkt auf eine neue Zeile zu
schreiben.
Beispiel
Beachten Sie, dass <polyline> standardmässig die
Füllfarbe schwarz setzt. Um dies zu «entfernen», können wir
fill="none" setzen.
Das Element <polygon> funktioniert sehr ähnlich wie
<polyline>. Es verbindet ebenfalls eine Liste von
Punkten geradlinig miteinander. Bei Polygonen wird allerdings der letzte
Punkt wieder mit dem ersten verbunden, um eine geschlossene Form zu
erstellen.
Beispiel
Text
Das Element <text> erzeugt einen Text auf dem
Bildschirm. Wo der Text steht, bestimmen zwei Attribute:
x ist die x-Koordinate des Textanfangs,
y die y-Koordinate der Grundlinie.
Buchstaben wie «g» oder «p» ragen also nach unten darüber hinaus.
Beispiel
Anders als bei den übrigen Formen steht der Text zwischen dem öffnenden und dem schliessenden Tag. Die Schrift selbst können wir mit den folgenden Attributen gestalten:
font-family-
Die Schriftart, zum Beispiel
sans-serifoderserif. font-size- Die Schriftgrösse in Benutzereinheiten.
font-weight-
Die Strichstärke der Schrift, zum Beispiel
bold. text-anchor-
Welcher Teil des Textes bei (
x,y) liegt:start(Standard),middleoderend. Mitmiddlewird der Text also um (x,y) zentriert.
Die Farbe des Textes wird mit fill gesetzt — ein Buchstabe
ist für SVG eine Form wie jede andere.
Beispiel
x = 150 liegt: Beide
Zeilen sind um diese Linie zentriert.
Striche gestalten
Bis jetzt haben wir von einem Strich nur die Farbe und die Breite bestimmt. Es gibt aber noch mehr zu holen:
stroke-linecap-
Die Form der Strichenden:
butt(Standard, gerade abgeschnitten),round(runde Enden) odersquare(der Strich wird um die halbe Strichbreite verlängert). stroke-linejoin-
Die Form der Ecken:
miter(Standard, spitz),roundoderbevel(abgeflacht). stroke-dasharray-
Eine Liste von Längen für einen gestrichelten Strich.
"30 10"bedeutet: 30 Einheiten zeichnen, 10 Einheiten Lücke, und so weiter.
Beispiel
x = 20 bis
x = 180. Der mittlere ist trotzdem länger — die
runden Enden ragen hinaus.
Übungen
Zeichnen Sie einen blau ausgefüllten Kreis mit grünem Rand und Radius 30 px als SVG. Probieren Sie verschiedene Deckkraftstufen aus.
Zeichnen Sie drei Kreise in einer Reihe, die sich berühren und von links nach rechts kleiner werden. Die Kreise sollten alle unterschiedliche Füllfarben haben.
Lösungsvorschlag
Zeichnen Sie einen Kreis, dessen Füllfarbe hexadezimal und dessen
Randfarbe mit rgb(…) angegeben ist. Die Füllung soll
halb durchsichtig sein, der Rand aber deckend.
Hinweis
Es gibt ein Attribut, mit dem Sie nur die Deckkraft der Füllung verändern.
Lösungsvorschlag
Erstellen Sie die folgende SVG-Grafik.
Lösungsvorschlag
Erstellen Sie die folgende SVG-Grafik.
Lösungsvorschlag
Nehmen Sie Ihre Lösung von Übung 5.05 (sie ist in der Werkbank
schon eingefüllt) und ergänzen Sie das
<svg>-Tag mit einer viewBox.
-
Wählen Sie die
viewBoxso, dass die ganze Grafik genau hineinpasst. - Wählen Sie sie so, dass nur die linke Hälfte der Grafik zu sehen ist.
-
Verdoppeln Sie nun in Ihrer
viewBoxnur die Breite und die Höhe. Was beobachten Sie?
Lösungsvorschlag
viewBox="0 0 400 100"viewBox="0 0 200 100"- Die Grafik wird kleiner dargestellt: Der Ausschnitt ist doppelt so gross, wird aber auf denselben Platz gezeichnet.
Erstellen Sie die folgende SVG-Grafik.
Lösungsvorschlag
Zeichnen Sie die Schweizer Fahne. Diese ist quadratisch, und die vier Arme des Kreuzes sind gleich gross und um ein Sechstel länger als breit.
Hinweis
Sie brauchen dafür nur Rechtecke.
Lösungsvorschlag
Erstellen Sie die folgende SVG-Grafik.
Lösungsvorschlag
Zeichnen Sie drei waagrechte, gleich lange Striche untereinander:
- einen dicken Strich mit runden Enden,
- einen gestrichelten Strich,
- einen gepunkteten Strich.
Hinweis
Für die Punkte kombinieren Sie stroke-dasharray mit
runden Strichenden.
Lösungsvorschlag
Erstellen Sie ein Schild mit einem abgerundeten farbigen Rechteck und zwei Zeilen Text darauf. Beide Zeilen sollen horizontal zentriert sein und sich in Grösse und Farbe unterscheiden.
Lösungsvorschlag
Zeichnen Sie ein Haus mit Dach, Tür und zwei Fenstern. Verwenden
Sie für das Dach ein <polygon>.
