Vektor-Grafik

Scalable Vector Graphics (SVG, engl. „skalierbare Vektorgrafik“) ist das Format für zweidimensionale Vektorgrafiken im Web. SVG kann in einem img Tag verwendet werden, oder direkt in HTML eingefügt werden:

<svg viewBox="0 0 200 100" width="200" height="100">
    <circle cx="75" cy="50" r="30"
            stroke="black" stroke-width="2" fill="#4e9a06" />
    <rect x="80" y="0" width="90" height="90"
          stroke="black" stroke-width="2" fill="#204a87"
          opacity="0.75" />
</svg>

Fähigkeiten von SVG

Painter’s Algorithmus

Zur Darstellung im Browser wird der Painter’s Algorithmus verwendet: “spätere” Objekte übermalen “frühere” Objekte. Deswegen überdeckt das blaue Rechteck im Beispiel den grünen Kreis.

Inline SVG wird heute von den aktuellen Browsern unterstützt, siehe can i use

viewBox vs width

Mit dem Attribut viewBox legst du das Koordinaten-Fenster der Grafik fest, also welcher Ausschnitt des Koordinatensystems dargestellt wird. Im ersten Beispiel wurde viewBox="0 0 200 100" der Ausschnitt von 0 bis 200 x und von 0 bis 100 y dargestellt. in SVG-Koordinaten.

Während viewBox das interne Koordinatensystem beschreibt, bestimmen width und height (bzw. CSS) die tatsächliche Anzeigegröße im Browser. Aus dem Zusammenspiel ergibt sich die Skalierbarkeit: Die gleiche Grafik lässt sich ohne Qualitätsverlust beliebig groß oder klein darstellen.

Koordinaten und Transformationen

Koordinaten in SVG werden als reelle Zahlen angegeben, nicht als Ganzzahlen! Es ist ein wirkliches Vektorformat.

Das ursprüngliche Koordinatensystem beginnt in der linken oberen Ecke, die X-Achse zeigt nach rechts, die Y-Achse nach unten. Mit dem g Tag können Elemente gruppiert werden. Dabei kann man auch ein neues lokales Koordinatensystem definieren.

<g transform="rotate(-5) translate(50,30)">
  ...
</g>

Grundformen in SVG

Mit den Tags circle, rect, ellipse, path und polygon werden simple geometrische Elemente definiert.

Farbe

Farben werden wie in HTML mit hex-code definiert. Zusätzlich kann für jedes Objekt eine alpha-Transparenz mit opacity gesetzt werden. Farbverläufe werden mit eigenen Tags definiert, und können dann mehrfach angewendet werden. In diesem Beispiel wird ein radialer Gradient definiert und auf ein Objekt angewandt:

Hier wird ein radialer Gradient einmal auf ein Quadrat und einmal auf einen Pfad angewandt.

Text

Mit dem Tag text kann Text in SVG gesetzt werden. Das ist an und für sich noch nicht sehr spannend:

    <text x="122" y="81">Kreis + Ellipse</text>

Mit dem Tag textPath kann der Text entlang eines beliebigen Pfades gesetzt werden.

Animation

Fast jedes Attribut in SVG kann animiert werden. In folgendem Beispiel wird das Attribut startOffset des Elements textPath animiert:

SVG erstellen und bearbeiten

Bearbeiten im Code

Man kann den Code der SVG-Datei im Code Editor bearbeiten, hier z.B. in PHPStorm:

Screenshot einer SVG-Datei in PHPStorm

Bearbeiten als Grafik

Man kann SVG auch sehr gut in Grafikprogrammen bearbeiten, hier z.B. in FIGMA:

Screenshot einer SVG-Datei in FIGMA

Fertige SVGs herunterladen

Fertige Icons und Illustrationen:

SVG Optimieren

Falls man eine SVG-Datei erhält, die unnötig groß ist, kann man sie unter der Adresse https://jakearchibald.github.io/svgomg/ hochladen, optimieren und wieder herunterladen.

SVG generieren mit KI

LLMs können gut SVGs generieren. Im Prompt kann man gleich darauf hinweisen, wie man sie weiter verwenden will:

Prompt Examples SVG