HTML mit Adi Prinz

SVG-Grafiken

Skalierbare Vektorgrafiken in HTML verwenden

SVG steht für Scalable Vector Graphics. Das Format beschreibt Grafiken mit XML-Elementen und eignet sich besonders für Logos, Symbole, Diagramme, Formen und Illustrationen.

Rastergrafiken und Vektorgrafiken unterscheiden

Rastergrafiken wie JPEG, PNG oder WebP bestehen aus einzelnen Bildpunkten. Werden sie stark vergrößert, können die einzelnen Pixel sichtbar werden.

SVG-Grafiken bestehen dagegen aus mathematisch beschriebenen Formen, Linien, Flächen und Texten. Sie können ohne Qualitätsverlust vergrößert oder verkleinert werden.

SVG-Grafiken bleiben bei unterschiedlichen Größen scharf.
Einfache SVG-Dateien besitzen häufig eine geringe Dateigröße.
Farben, Konturen und andere Eigenschaften können mit CSS verändert werden.
SVG-Elemente können mit JavaScript angesprochen und animiert werden.
Für detailreiche Fotos ist SVG normalerweise nicht geeignet.

SVG eignet sich besonders für Grafiken mit klaren Formen. Fotos werden normalerweise als JPEG, WebP oder AVIF gespeichert.

Eine SVG-Datei als Bild einbinden

Eine externe SVG-Datei kann wie andere Bildformate mit dem img-Element eingebunden werden.

<img
  src="images/logo.svg"
  alt="Logo von EDV mit Adi Prinz"
  width="300"
  height="80">

Bei dieser Variante wird die SVG-Datei als eigenständiges Bild geladen. Der Browser stellt sie dar, ihre internen SVG-Elemente gehören jedoch nicht direkt zum HTML-Dokument.

CSS-Regeln der HTML-Seite können bei einer mit img eingebundenen SVG-Datei nicht direkt auf deren einzelne Formen zugreifen.

SVG direkt in HTML einfügen

SVG-Code kann direkt in ein HTML-Dokument geschrieben werden. Das svg-Element bildet dabei den äußeren Zeichenbereich.

<svg
  width="300"
  height="150"
  viewBox="0 0 300 150"
  role="img"
  aria-labelledby="svg-title">

  <title id="svg-title">
    Blaues Rechteck
  </title>

  <rect
    x="25"
    y="25"
    width="250"
    height="100"
    fill="steelblue">
  </rect>
</svg>

Direkt eingebundene SVG-Elemente sind Teil des HTML-Dokuments. Sie können deshalb mit CSS gestaltet und mit JavaScript angesprochen werden.

Diese Einbindungsart wird häufig als Inline SVG bezeichnet.

Die SVG-Zeichenfläche festlegen

Die Attribute width und height bestimmen die dargestellte Breite und Höhe des SVG-Elements.

<svg
  width="600"
  height="300">
</svg>

Ohne weitere Angaben befindet sich der Koordinatenursprung in der linken oberen Ecke.

Die x-Achse verläuft von links nach rechts.
Die y-Achse verläuft von oben nach unten.
Die Position 0,0 liegt links oben.

Anders als in einem mathematischen Koordinatensystem werden größere y-Werte weiter unten auf der Zeichenfläche dargestellt.

Das Koordinatensystem mit viewBox bestimmen

Das Attribut viewBox legt das interne Koordinatensystem einer SVG-Grafik fest.

viewBox="min-x min-y breite höhe"

Das folgende Beispiel verwendet einen Zeichenbereich von 600 × 300 Einheiten:

<svg
  viewBox="0 0 600 300"
  width="600"
  height="300">
</svg>

0 – Startpunkt auf der x-Achse
0 – Startpunkt auf der y-Achse
600 – Breite des internen Zeichenbereichs
300 – Höhe des internen Zeichenbereichs

viewBox ist besonders wichtig für responsive SVG-Grafiken. Die Grafik kann dadurch in verschiedenen Größen dargestellt werden, ohne dass ihre internen Koordinaten geändert werden müssen.

SVG responsiv darstellen

Eine SVG-Grafik kann mit CSS an die verfügbare Breite ihres übergeordneten Elements angepasst werden.

<svg
  class="responsive-svg"
  viewBox="0 0 600 300"
  role="img"
  aria-labelledby="diagramm-title">

  <title id="diagramm-title">
    Einfaches Beispieldiagramm
  </title>

  <rect
    x="50"
    y="50"
    width="500"
    height="200"
    fill="steelblue">
  </rect>
</svg>

.responsive-svg {
  display: block;
  width: 100%;
  height: auto;
}

Die sichtbare Größe wird mit CSS bestimmt. Das viewBox-Attribut sorgt dafür, dass die Inhalte proportional skaliert werden.

Für eine flexible Darstellung sollte ein sinnvolles viewBox-Attribut vorhanden sein.

Ein Rechteck zeichnen

Mit dem rect-Element wird ein Rechteck erstellt.

<svg viewBox="0 0 400 200">
  <rect
    x="50"
    y="40"
    width="300"
    height="120"
    rx="15"
    fill="royalblue"
    stroke="navy"
    stroke-width="4">
  </rect>
</svg>

x – horizontale Position
y – vertikale Position
width – Breite des Rechtecks
height – Höhe des Rechtecks
rx – horizontale Rundung der Ecken
ry – vertikale Rundung der Ecken
fill – Füllfarbe
stroke – Farbe der Kontur
stroke-width – Stärke der Kontur

Einen Kreis zeichnen

Mit dem circle-Element wird ein Kreis erstellt. Seine Position wird über den Mittelpunkt bestimmt.

<svg viewBox="0 0 300 300">
  <circle
    cx="150"
    cy="150"
    r="100"
    fill="orange"
    stroke="darkorange"
    stroke-width="8">
  </circle>
</svg>

cx – x-Koordinate des Mittelpunkts
cy – y-Koordinate des Mittelpunkts
r – Radius des Kreises

Eine Ellipse zeichnen

Das ellipse-Element ähnelt dem Kreis. Es besitzt jedoch einen eigenen horizontalen und vertikalen Radius.

<svg viewBox="0 0 400 250">
  <ellipse
    cx="200"
    cy="125"
    rx="150"
    ry="80"
    fill="mediumseagreen">
  </ellipse>
</svg>

cx – x-Koordinate des Mittelpunkts
cy – y-Koordinate des Mittelpunkts
rx – horizontaler Radius
ry – vertikaler Radius

Eine Linie zeichnen

Das line-Element zeichnet eine gerade Linie zwischen zwei Punkten.

<svg viewBox="0 0 400 200">
  <line
    x1="50"
    y1="150"
    x2="350"
    y2="50"
    stroke="crimson"
    stroke-width="8"
    stroke-linecap="round">
  </line>
</svg>

x1 und y1 – Startpunkt
x2 und y2 – Endpunkt
stroke – Linienfarbe
stroke-width – Linienstärke
stroke-linecap – Form der Linienenden

Eine Linie besitzt keine geschlossene Fläche. Ihre Darstellung wird deshalb mit stroke und nicht mit fill festgelegt.

SVG-Grafiken zugänglich beschreiben

Inhaltlich wichtige Inline-SVG-Grafiken benötigen eine verständliche Textalternative. Dafür können title und aria-labelledby verwendet werden.

<svg
  viewBox="0 0 300 150"
  role="img"
  aria-labelledby="logo-title">

  <title id="logo-title">
    Logo von EDV mit Adi Prinz
  </title>

  <rect
    width="300"
    height="150"
    fill="navy">
  </rect>
</svg>

Eine rein dekorative SVG-Grafik kann für assistierende Technologien ausgeblendet werden:

<svg
  viewBox="0 0 100 20"
  aria-hidden="true"
  focusable="false">

  <line
    x1="0"
    y1="10"
    x2="100"
    y2="10"
    stroke="currentColor">
  </line>
</svg>

Ob eine SVG-Grafik beschrieben oder ausgeblendet wird, hängt von ihrer Bedeutung ab. Wichtige Informationen dürfen nicht ausschließlich visuell vermittelt werden.

Weitere SVG-Elemente

Linienzüge, Vielecke, Pfade und Texte erstellen

Neben einfachen Grundformen stellt SVG weitere Elemente für komplexere Grafiken bereit. Dazu gehören polyline, polygon, path und text.

Einen offenen Linienzug zeichnen

Das polyline-Element verbindet mehrere Punkte durch gerade Linien. Der Linienzug wird zwischen dem letzten und dem ersten Punkt nicht automatisch geschlossen.

<svg viewBox="0 0 500 250">
  <polyline
    points="40,200 140,80 240,160 340,50 460,180"
    fill="none"
    stroke="royalblue"
    stroke-width="8"
    stroke-linecap="round"
    stroke-linejoin="round">
  </polyline>
</svg>

Das Attribut points enthält eine Liste aus x- und y-Koordinaten:

points="x1,y1 x2,y2 x3,y3"

Jedes Zahlenpaar beschreibt einen Punkt.
Die Punkte werden in der angegebenen Reihenfolge verbunden.
Mit fill="none" wird verhindert, dass eine Fläche ausgefüllt wird.
stroke-linejoin bestimmt die Form der Verbindungen zwischen den Linien.

polyline eignet sich beispielsweise für Linienverläufe, Zickzacklinien und einfache Liniendiagramme.

Ein geschlossenes Vieleck zeichnen

Das polygon-Element verbindet ebenfalls mehrere Punkte. Im Unterschied zu polyline wird der letzte Punkt automatisch mit dem ersten Punkt verbunden.

<svg viewBox="0 0 400 350">
  <polygon
    points="200,30 245,135 360,145 270,220 300,330 200,270 100,330 130,220 40,145 155,135"
    fill="gold"
    stroke="darkgoldenrod"
    stroke-width="6"
    stroke-linejoin="round">
  </polygon>
</svg>

In diesem Beispiel bilden die angegebenen Punkte einen Stern. Die Fläche wird mit fill gefüllt und mit stroke umrandet.

polygon eignet sich für geschlossene geometrische Formen wie Dreiecke, Sterne, Pfeile oder andere Vielecke.

polyline und polygon unterscheiden

polyline erstellt normalerweise einen offenen Linienzug.
polygon erstellt immer eine geschlossene Form.
Beide Elemente verwenden das Attribut points.
Beide Elemente können mit fill und stroke gestaltet werden.

<!-- Offener Linienzug -->
<polyline
  points="20,100 100,20 180,100"
  fill="none"
  stroke="blue">
</polyline>

<!-- Geschlossenes Dreieck -->
<polygon
  points="20,100 100,20 180,100"
  fill="orange"
  stroke="darkorange">
</polygon>

Komplexe Formen mit path zeichnen

Das path-Element ist das vielseitigste SVG-Element für die Erstellung von Linien und Formen. Es kann gerade Linien, Kurven, Bögen sowie offene und geschlossene Formen beschreiben.

<svg viewBox="0 0 400 250">
  <path
    d="M 50 200 L 150 50 L 250 200 Z"
    fill="tomato"
    stroke="darkred"
    stroke-width="6">
  </path>
</svg>

Die Form wird im Attribut d mit einzelnen Pfadbefehlen beschrieben.

M 50 200 – Startpunkt festlegen
L 150 50 – eine gerade Linie zeichnen
L 250 200 – eine weitere Linie zeichnen
Z – den Pfad schließen

Die Buchstaben im Attribut d sind Befehle. Die nachfolgenden Zahlen enthalten die benötigten Koordinaten.

Wichtige Pfadbefehle

M – Move to: Startpunkt setzen
L – Line to: gerade Linie zeichnen
H – horizontale Linie zeichnen
V – vertikale Linie zeichnen
C – kubische Bézierkurve zeichnen
Q – quadratische Bézierkurve zeichnen
A – elliptischen Bogen zeichnen
Z – Pfad schließen

<path d="M 50 50 H 300 V 200 H 50 Z"></path>

Dieses Beispiel bedeutet:

Bei 50,50 beginnen.
Eine horizontale Linie bis zur x-Koordinate 300 zeichnen.
Eine vertikale Linie bis zur y-Koordinate 200 zeichnen.
Eine horizontale Linie zurück zur x-Koordinate 50 zeichnen.
Den Pfad schließen.

Absolute und relative Pfadbefehle

Pfadbefehle können mit Großbuchstaben oder Kleinbuchstaben geschrieben werden. Dadurch ändert sich die Bedeutung der Koordinaten.

Großbuchstaben wie M und L verwenden absolute Koordinaten.
Kleinbuchstaben wie m und l verwenden relative Koordinaten.

<!-- Absolute Koordinaten -->
<path d="M 50 50 L 150 50 L 150 150 Z"></path>

<!-- Relative Koordinaten -->
<path d="M 50 50 l 100 0 l 0 100 Z"></path>

Beim zweiten Pfad wird jede neue Position relativ zur aktuellen Position berechnet. Beide Beispiele erzeugen dieselbe Form.

Absolute Befehle sind am Anfang häufig leichter zu lesen. Relative Befehle können bei wiederkehrenden Abständen kürzere Pfadangaben ermöglichen.

Eine Bézierkurve zeichnen

Mit dem Befehl C wird eine kubische Bézierkurve erstellt. Neben dem Endpunkt werden zwei Kontrollpunkte angegeben, welche die Form der Kurve beeinflussen.

<svg viewBox="0 0 500 300">
  <path
    d="M 50 250 C 100 20, 400 20, 450 250"
    fill="none"
    stroke="mediumvioletred"
    stroke-width="8">
  </path>
</svg>

C x1 y1, x2 y2, x y

x1 y1 – erster Kontrollpunkt
x2 y2 – zweiter Kontrollpunkt
x y – Endpunkt der Kurve

Die Kurve verläuft normalerweise nicht direkt durch die Kontrollpunkte. Diese ziehen die Linie lediglich in ihre Richtung.

Eine quadratische Bézierkurve zeichnen

Der Befehl Q erstellt eine quadratische Bézierkurve. Dafür werden ein Kontrollpunkt und ein Endpunkt benötigt.

<svg viewBox="0 0 500 300">
  <path
    d="M 50 250 Q 250 20 450 250"
    fill="none"
    stroke="seagreen"
    stroke-width="8">
  </path>
</svg>

Q x1 y1, x y

x1 y1 – Kontrollpunkt
x y – Endpunkt

Einen elliptischen Bogen zeichnen

Mit dem Pfadbefehl A kann ein Teil eines Kreises oder einer Ellipse gezeichnet werden.

<svg viewBox="0 0 500 300">
  <path
    d="M 80 220 A 180 120 0 0 1 420 220"
    fill="none"
    stroke="darkorange"
    stroke-width="8">
  </path>
</svg>

A rx ry rotation large-arc-flag sweep-flag x y

rx – horizontaler Radius
ry – vertikaler Radius
rotation – Drehung der Ellipse
large-arc-flag – Auswahl zwischen kleinem und großem Bogen
sweep-flag – bestimmt die Richtung des Bogens
x y – Endpunkt

Der Bogenbefehl besitzt mehrere Parameter und gehört zu den anspruchsvolleren Pfadbefehlen. Komplexe Pfade werden häufig mit einem Grafikprogramm erstellt und anschließend als SVG exportiert.

Text in einer SVG-Grafik anzeigen

Mit dem text-Element wird Text innerhalb einer SVG-Grafik dargestellt.

<svg viewBox="0 0 600 200">
  <text
    x="300"
    y="110"
    text-anchor="middle"
    font-size="42"
    font-family="Arial, sans-serif"
    fill="navy">
    EDV mit Adi Prinz
  </text>
</svg>

x – horizontale Position
y – Position der Grundlinie des Textes
text-anchor – horizontale Ausrichtung am angegebenen Punkt
font-size – Schriftgröße
font-family – Schriftfamilie
fill – Textfarbe

Der y-Wert bezeichnet bei SVG-Text normalerweise die Grundlinie und nicht die obere Kante des Textes.

SVG-Text horizontal ausrichten

Das Attribut text-anchor bestimmt, wie der Text am angegebenen x-Wert ausgerichtet wird.

start – der Text beginnt am x-Wert
middle – die Textmitte liegt am x-Wert
end – der Text endet am x-Wert

<svg viewBox="0 0 600 220">
  <line
    x1="300"
    y1="20"
    x2="300"
    y2="200"
    stroke="lightgray">
  </line>

  <text x="300" y="60" text-anchor="start">
    start
  </text>

  <text x="300" y="120" text-anchor="middle">
    middle
  </text>

  <text x="300" y="180" text-anchor="end">
    end
  </text>
</svg>

Textabschnitte mit tspan gestalten

Mit dem tspan-Element können einzelne Abschnitte innerhalb eines SVG-Textes positioniert oder unterschiedlich gestaltet werden.

<svg viewBox="0 0 600 250">
  <text
    x="300"
    y="80"
    text-anchor="middle"
    font-size="36">

    <tspan
      x="300"
      fill="navy">
      HTML und CSS
    </tspan>

    <tspan
      x="300"
      dy="60"
      fill="darkorange"
      font-size="26">
      Grundlagen des Webdesigns
    </tspan>
  </text>
</svg>

x legt eine neue horizontale Position fest.
y legt eine neue vertikale Position fest.
dx verschiebt den Text horizontal.
dy verschiebt den Text vertikal.

SVG-Text besitzt keinen automatischen Zeilenumbruch wie ein normaler HTML-Absatz. Neue Zeilen müssen beispielsweise mit entsprechend positionierten tspan-Elementen erstellt werden.

Text entlang eines Pfades anordnen

Mit textPath kann Text entlang einer Linie oder Kurve dargestellt werden. Der verwendete Pfad erhält dafür eine eindeutige ID.

<svg viewBox="0 0 600 250">
  <defs>
    <path
      id="text-kurve"
      d="M 50 180 Q 300 20 550 180">
    </path>
  </defs>

  <text
    font-size="30"
    fill="navy">

    <textPath
      href="#text-kurve"
      startOffset="50%"
      text-anchor="middle">
      Lernen mit EDV und Webdesign
    </textPath>
  </text>
</svg>

Das Attribut href verbindet textPath mit dem vorbereiteten Pfad. Mit startOffset wird die Startposition des Textes auf dem Pfad bestimmt.

Der Pfad steht in diesem Beispiel innerhalb von defs und wird deshalb nicht selbst gezeichnet. Er dient nur als Grundlage für den Text.

HTML & SVG

HTML Module

html mit Adi Prinz