HTML - SVG

Einführung in SVG

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format zur Erstellung von Vektorgrafiken im Web. Im Gegensatz zu Rastergrafiken (JPEGs oder PNGs), die aus Pixeln bestehen, werden SVG-Grafiken mithilfe mathematischer Anweisungen definiert. Dadurch können sie in jeder Größe skaliert werden, ohne an Qualität zu verlieren.

Ein wesentlicher Vorteil von SVG ist die Fähigkeit, klare Grafiken zu erstellen, die auf jeder Bildschirmgröße gut aussehen. Ob Sie ein SVG-Bild auf einem kleinen mobilen Gerät oder einem großen Desktop-Monitor betrachten, die Grafiken bleiben scharf. Das macht SVG gut für die Erstellung von Logos, Icons, Diagrammen und anderen Grafiken, die häufig in der Größe angepasst werden müssen.

Ein weiterer Vorteil von SVG ist die geringe Dateigröße im Vergleich zu Rastergrafiken. Da SVG-Grafiken mit Code und nicht mit Pixeln definiert werden, können sie komprimiert und optimiert werden, um ihre Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen. Dies bedeutet schnellere Seitenladezeiten und bessere Leistung, besonders auf mobilen Geräten oder bei langsameren Internetverbindungen.

Beim Vergleich von SVG mit Rastergrafiken sollten Sie die Art der zu erstellenden Grafik berücksichtigen. Rastergrafiken eignen sich am besten für Fotos mit vielen Farben und Details. SVG glänzt bei der Erstellung einfacher geometrischer Formen, Icons und Illustrationen mit Volltonfarben oder Farbverläufen. SVG-Grafiken können auch mit JavaScript animiert und interaktiv gestaltet werden, was Möglichkeiten für ansprechende Webinhalte eröffnet.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Grundlegende SVG-Syntax

Um SVG zu nutzen, müssen Sie seine grundlegende Syntax und Dokumentstruktur verstehen. SVG-Code wird im XML-Format geschrieben, was bedeutet, dass er einem Regelwerk zur Definition von Elementen und Attributen folgt.

Das Erste, was in einem SVG-Dokument enthalten sein muss, ist die XML-Deklaration und der SVG-Namensraum. Der Namensraum teilt dem Browser mit, dass der Code im SVG-Format geschrieben ist.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <!-- SVG-Inhalt kommt hier hin -->
</svg>

Das <svg>-Element ist das Wurzelelement eines SVG-Dokuments. Alle anderen SVG-Elemente werden darin platziert. Das xmlns-Attribut gibt den SVG-Namensraum an, der immer "http://www.w3.org/2000/svg" ist.

Zwei Attribute des <svg>-Elements sind width und height. Diese definieren die Größe des SVG-Viewports, also des sichtbaren Bereichs des SVG-Bildes. Sie können die Breite und Höhe in Pixeln oder anderen Einheiten angeben:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300">
  <!-- SVG-Inhalt kommt hier hin -->
</svg>

Ein weiteres wichtiges Attribut ist viewBox. Es definiert das Koordinatensystem und das Seitenverhältnis des SVG-Bildes. Das viewBox-Attribut nimmt vier Werte: x, y, width und height. Die x- und y-Werte geben die obere linke Ecke der viewBox an, während width und height ihre Größe definieren:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- SVG-Inhalt kommt hier hin -->
</svg>

Die viewBox beginnt bei den Koordinaten (0, 0) und hat eine Breite und Höhe von jeweils 100 Einheiten. Das SVG-Bild wird so skaliert, dass es unter Beibehaltung seines Seitenverhältnisses in den Viewport passt.

SVG verwendet ein Koordinatensystem, bei dem die obere linke Ecke (0, 0) ist und die Werte nach rechts und unten zunehmen. Sie können Koordinaten und Längen in verschiedenen Einheiten angeben, wie Pixel (px), em, rem oder Prozent. Die gebräuchlichsten Einheiten in SVG sind jedoch Benutzereinheiten, die durch das viewBox-Attribut definiert werden.

Grundformen zeichnen

SVG bietet mehrere Grundformen, die Sie zum Erstellen von Grafiken verwenden können. Zu diesen Formen gehören Rechtecke, Kreise, Ellipsen, Linien, Polygone, Polylinien und Pfade.

Um ein Rechteck zu zeichnen, verwenden Sie das <rect>-Element. Sie können die Position und Größe des Rechtecks mit den Attributen x, y, width und height festlegen. Die Attribute x und y definieren die Koordinaten der oberen linken Ecke, während width und height die Abmessungen des Rechtecks festlegen:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" />
</svg>

Um einen Kreis zu erstellen, verwenden Sie das <circle>-Element. Geben Sie die Position des Mittelpunkts mit den Attributen cx und cy an und legen Sie den Radius mit dem Attribut r fest:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="25" />
</svg>

Für eine Ellipse verwenden Sie das <ellipse>-Element. Ähnlich wie bei einem Kreis legen Sie die Mittelpunktposition mit cx und cy fest, aber anstelle eines einzelnen Radius verwenden Sie die Attribute rx und ry, um die horizontalen und vertikalen Radien zu definieren:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <ellipse cx="50" cy="50" rx="30" ry="20" />
</svg>

Um eine Linie zu zeichnen, verwenden Sie das <line>-Element. Geben Sie den Startpunkt mit den Attributen x1 und y1 und den Endpunkt mit x2 und y2 an:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <line x1="10" y1="10" x2="90" y2="90" />
</svg>

Zum Erstellen komplexer Formen mit geraden Linien verwenden Sie die Elemente <polygon> oder <polyline>. Beide nehmen ein points-Attribut an, das die Eckpunkte der Form definiert. Der Unterschied besteht darin, dass ein Polygon die Form automatisch schließt, während eine Polylinie sie offen lässt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <polygon points="50,10 90,90 10,90" />
  <polyline points="10,50 50,10 90,50" />
</svg>

Wenn Sie komplexe Kurven und Formen erstellen müssen, verwenden Sie das <path>-Element. Es nimmt ein d-Attribut an, das den Pfad mithilfe einer Reihe von Befehlen und Koordinaten definiert. Einige gängige Befehle sind M (Verschieben zu), L (Linie zu), H (horizontale Linie), V (vertikale Linie), C (kubische Bézier-Kurve) und Z (Pfad schließen):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M10,50 C10,10 90,10 90,50 C90,90 10,90 10,50 Z" />
</svg>

Diese Grundformen bieten Ihnen die Bausteine, um eine Vielzahl von Grafiken mit SVG zu erstellen. Sie können sie kombinieren, gestalten und transformieren, um das gewünschte Aussehen für Ihre Projekte zu erzielen.

Styling von SVG-Elementen

SVG bietet Möglichkeiten, das Aussehen von Elementen zu gestalten und zu ändern. Sie können Attribute wie fill und stroke verwenden, um Farben festzulegen, Deckkraft für Transparenz, Farbverläufe und Muster für Texturen und sogar CSS für fortgeschrittenere Gestaltung.

Um die Füllfarbe eines SVG-Elements festzulegen, verwenden Sie das fill-Attribut. Dieses Attribut akzeptiert Farbschlüsselwörter, Hexadezimalwerte, RGB oder HSL:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="blue" />
  <circle cx="50" cy="50" r="25" fill="#ff0000" />
</svg>

Der Strich ist die Kontur einer SVG-Form. Legen Sie die Strichfarbe mit dem stroke-Attribut fest und steuern Sie seine Breite mit stroke-width:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="none" stroke="blue" stroke-width="2" />
  <circle cx="50" cy="50" r="25" fill="none" stroke="#ff0000" stroke-width="4" />
</svg>

Um ein Element transparent zu machen, verwenden Sie das opacity-Attribut. Es akzeptiert Werte zwischen 0 (vollständig transparent) und 1 (vollständig undurchsichtig):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect x="10" y="10" width="50" height="30" fill="blue" opacity="0.5" />
  <circle cx="50" cy="50" r="25" fill="#ff0000" opacity="0.7" />
</svg>

Sie können auch die Füll- oder Strichdeckkraft separat mit fill-opacity und stroke-opacity festlegen.

SVG unterstützt lineare und radiale Farbverläufe zur Erstellung weicher Farbübergänge. Definieren Sie den Farbverlauf mit dem <linearGradient>- oder <radialGradient>-Element und verweisen Sie darauf im fill- oder stroke-Attribut mithilfe einer URL:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0%" stop-color="blue" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="50" height="30" fill="url(#myGradient)" />
</svg>

Muster ermöglichen es Ihnen, Formen mit sich wiederholenden Bildern oder anderen SVG-Elementen zu füllen. Definieren Sie das Muster mit dem <pattern>-Element und verweisen Sie darauf im fill- oder stroke-Attribut:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="blue" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="50" height="30" fill="url(#myPattern)" />
</svg>

Zusätzlich zu Attributen können Sie SVG-Elemente mit CSS gestalten. Wenden Sie CSS-Regeln auf SVG-Elemente an, indem Sie Inline-Stile, interne Stylesheets oder externe Stylesheets verwenden:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .myStyle {
      fill: blue;
      stroke: red;
      stroke-width: 2;
    }
  </style>
  <rect x="10" y="10" width="50" height="30" class="myStyle" />
</svg>

Die Verwendung von CSS ermöglicht eine flexiblere und wiederverwendbare Gestaltung, da Sie Elemente basierend auf ihren Tag-Namen, Klassen oder IDs ansprechen können.

Durch die Kombination dieser Gestaltungstechniken können Sie visuell ansprechende und angepasste SVG-Grafiken erstellen, die zu Design und Anforderungen Ihres Projekts passen.

Text in SVG

Das Hinzufügen von Text zu Ihren SVG-Grafiken ist mit dem <text>-Element einfach. Sie können den Text mithilfe der Attribute x und y positionieren, die die Koordinaten des Ankerpunkts des Textes festlegen. Standardmäßig ist der Ankerpunkt die linke Kante der Textgrundlinie:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35">Hallo, SVG!</text>
</svg>

Um den Text zu formatieren und zu gestalten, können Sie verschiedene Attribute oder CSS-Eigenschaften verwenden. Sie können beispielsweise die Schriftfamilie, -größe, -stärke und den Stil mit den Attributen font-family, font-size, font-weight und font-style ändern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35" font-family="Arial" font-size="24" font-weight="bold" font-style="italic">
    Hallo, SVG!
  </text>
</svg>

Sie können auch Füll- und Strichfarben auf den Text anwenden, den Textankerpunkt mit dem Attribut text-anchor anpassen (mit Werten wie start, middle oder end) und den Abstand zwischen Zeichen oder Wörtern mit den Attributen letter-spacing und word-spacing steuern.

Wenn Sie Text umbrechen oder mehrzeiligen Text erstellen möchten, können Sie das <tspan>-Element innerhalb des <text>-Elements verwenden. Jedes <tspan> stellt eine separate Textzeile dar und kann eine eigene Positionierung und Gestaltung haben:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <text x="20" y="35">
    <tspan>Hallo,</tspan>
    <tspan x="20" y="60">SVG!</tspan>
  </text>
</svg>

Eine weitere interessante Funktion von SVG-Text ist die Möglichkeit, ihn entlang eines Pfades zu platzieren. Definieren Sie dazu zunächst einen Pfad mit dem <path>-Element. Verwenden Sie dann das <textPath>-Element innerhalb des <text>-Elements und verweisen Sie mit dem href-Attribut auf den Pfad:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
  <path id="myPath" d="M20,20 C20,50 180,50 180,20" fill="none" stroke="black" />
  <text>
    <textPath href="#myPath">Text entlang eines Pfades</textPath>
  </text>
</svg>

Der Text folgt der Form des Pfades und erzeugt interessante visuelle Effekte. Sie können die Position des Textes entlang des Pfades mit dem Attribut startOffset steuern, das einen Längen- oder Prozentwert akzeptiert.

Das Hinzufügen von Text zu Ihren SVG-Grafiken eröffnet viele Möglichkeiten zur Erstellung informativer und ansprechender Visualisierungen, Diagramme oder Schaubilder. Mit den verschiedenen Formatierungs- und Gestaltungsoptionen können Sie den Text an Ihre Designanforderungen anpassen.

SVG-Elemente transformieren und animieren

Mit SVG können Sie Elemente transformieren und animieren, um ansprechende und interaktive Grafiken zu erstellen. Sie können Transformationen wie Verschiebung, Drehung und Skalierung auf Elemente anwenden, sie mit SMIL (Synchronized Multimedia Integration Language) animieren oder sie mit JavaScript interaktiv gestalten.

Um ein SVG-Element zu transformieren, verwenden Sie das Attribut transform. Das Attribut akzeptiert verschiedene Transformationsfunktionen:

Sie können mehrere Transformationen kombinieren, indem Sie sie durch Leerzeichen getrennt im transform-Attribut auflisten:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue" transform="translate(25, 25) rotate(45) scale(0.5)" />
</svg>

SVG unterstützt auch die Animation von Elementen mit SMIL. Um eine Animation zu erstellen, verwenden Sie das <animate>-Element innerhalb des Elements, das Sie animieren möchten. Geben Sie das zu animierende Attribut mit dem attributeName-Attribut an und legen Sie die Start- und Endwerte mit den Attributen from und to fest. Mit den Attributen dur und begin können Sie die Dauer und den Zeitpunkt der Animation steuern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue">
    <animate attributeName="width" from="100" to="150" dur="2s" begin="0s" repeatCount="indefinite" />
  </rect>
</svg>

Dieses Beispiel animiert die Breite des Rechtecks von 100 auf 150 über eine Dauer von 2 Sekunden und wiederholt sich unendlich oft.

Sie können verschiedene Attribute wie x, y, width, height, fill, opacity und mehr animieren. SMIL bietet auch andere Animationselemente wie <animateTransform> für die Animation von Transformationen und <animateMotion> für die Animation eines Elements entlang eines Pfades.

Um SVG-Elemente interaktiv zu gestalten, können Sie JavaScript verwenden, um auf Ereignisse zu reagieren und die Elemente zu manipulieren. SVG-Elemente unterstützen gängige Ereignisse wie click, mouseover, mouseout und mehr. Sie können mit JavaScript Ereignislistener an Elemente anhängen und ihre Attribute oder Stile basierend auf Benutzerinteraktionen ändern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect id="myRect" x="50" y="50" width="100" height="100" fill="blue" />
  <script>
    const rect = document.getElementById('myRect');
    rect.addEventListener('click', function() {
      this.setAttribute('fill', 'red');
    });
  </script>
</svg>

Sie können auch JavaScript-Bibliotheken wie D3.js oder Snap.svg verwenden, um die Arbeit mit SVG zu vereinfachen und komplexe Animationen und Interaktionen zu erstellen.

Durch den Einsatz von Transformationen, Animationen und Interaktivität können Sie Ihre SVG-Grafiken zum Leben erwecken und ansprechende Benutzererfahrungen schaffen. Experimentieren Sie mit diesen Techniken, um Bewegung, Reaktionsfähigkeit und visuelles Interesse in Ihre SVG-basierten Projekte einzubringen.

SVG-Filter und -Effekte

SVG bietet eine Reihe von Filtern und Effekten, mit denen Sie visuelle Änderungen an Ihren Grafiken vornehmen können. Mit Filtern können Sie Unschärfe-, Schlagschatten- und Beleuchtungseffekte erzeugen, während Maskierung und Beschneidung helfen, die Sichtbarkeit von Elementen zu steuern. SVG unterstützt auch Überblendungsmodi zur Erstellung visueller Kombinationen.

Ein Filtereffekt ist die Gaußsche Unschärfe, die die Kanten eines Elements weicher macht. Um einen Unschärfeeffekt anzuwenden, verwenden Sie das <filter>-Element mit einem <feGaussianBlur>-Primitiv. Stellen Sie das Attribut stdDeviation ein, um die Stärke der Unschärfe zu steuern:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="blurFilter">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#blurFilter)" />
</svg>

Ein anderer Effekt ist der Schlagschatten, der einen Schatten hinter einem Element hinzufügt. Verwenden Sie das <feDropShadow>-Filterprimitiv, um einen Schlagschatten zu erzeugen. Geben Sie die Attribute dx und dy für den Schattenversatz, stdDeviation für die Unschärfemenge und flood-color für die Schattenfarbe an:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="dropShadowFilter">
      <feDropShadow dx="4" dy="4" stdDeviation="4" flood-color="black" />
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#dropShadowFilter)" />
</svg>

SVG unterstützt auch Beleuchtungseffekte, die Ihren Grafiken Tiefe und Realismus verleihen können. Verwenden Sie die Filterprimitiven <feDiffuseLighting> oder <feSpecularLighting>, um Beleuchtungseffekte zu erzeugen. Diese Primitive erfordern eine Lichtquelle, wie <fePointLight> oder <feDistantLight>, und ein lighting-color-Attribut zur Angabe der Lichtfarbe:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <filter id="lightingFilter">
      <feDiffuseLighting in="SourceGraphic" lighting-color="white">
        <fePointLight x="100" y="100" z="50" />
      </feDiffuseLighting>
    </filter>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" filter="url(#lightingFilter)" />
</svg>

Maskierung und Beschneidung sind Techniken zur Steuerung der Sichtbarkeit von Elementen. Eine Maske ist ein Alphakanal, der die Deckkraft eines Elements bestimmt, während ein Beschneidungspfad einen Bereich definiert, außerhalb dessen Elemente abgeschnitten werden. Um eine Maske zu erstellen, verwenden Sie das <mask>-Element und definieren Sie den Maskeninhalt mit anderen SVG-Elementen. Verweisen Sie auf die Maske mit dem mask-Attribut:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <mask id="myMask">
      <rect x="0" y="0" width="200" height="200" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" mask="url(#myMask)" />
</svg>

Für die Beschneidung verwenden Sie das <clipPath>-Element, um den Beschneidungsbereich zu definieren, und verweisen Sie mit dem clip-path-Attribut darauf:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <clipPath id="myClip">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
  <rect x="50" y="50" width="100" height="100" fill="blue" clip-path="url(#myClip)" />
</svg>

SVG unterstützt Überblendungsmodi, die bestimmen, wie sich die Farben überlappender Elemente kombinieren. Verwenden Sie das Attribut mix-blend-mode, um den Überblendungsmodus für ein Element festzulegen. Einige gängige Überblendungsmodi sind multiply, screen, overlay und darken:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  <circle cx="100" cy="100" r="50" fill="red" mix-blend-mode="multiply" />
</svg>

Durch die Verwendung von Filtern, Effekten, Maskierung, Beschneidung und Überblendungsmodi können Sie Ihren SVG-Grafiken visuelle Reichhaltigkeit und Tiefe verleihen. Experimentieren Sie mit diesen Techniken, um Designs zu erstellen, die die Aufmerksamkeit Ihres Publikums fesseln.

SVG in HTML einbetten

Sie können SVG-Grafiken auf mehrere Arten in Ihre HTML-Dokumente einbetten. Jede Methode hat ihre eigenen Vorteile und Anwendungsfälle. Die drei Hauptmethoden sind die Verwendung des <img>-Tags, Inline-SVG und SVG als Hintergrundbild.

Eine der einfachsten Möglichkeiten, ein SVG-Bild einzubetten, ist die Verwendung des <img>-Tags. Sie können im src-Attribut auf eine externe SVG-Datei verweisen, genau wie bei anderen Bildformaten wie JPEG oder PNG:

<img src="image.svg" alt="SVG Image" width="200" height="200">

Die Verwendung des <img>-Tags ist gut, wenn Sie Ihren SVG-Code von Ihrem HTML trennen und das SVG wie eine normale Bilddatei behandeln möchten. Diese Methode erlaubt es jedoch nicht, das SVG aus Ihrem HTML heraus zu gestalten oder zu skripten.

Wenn Sie mehr Kontrolle über Ihr SVG und die Möglichkeit haben möchten, es zu gestalten und zu skripten, können Sie Inline-SVG verwenden. Das bedeutet, den SVG-Code direkt in Ihr HTML-Dokument zu platzieren:

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <rect x="50" y="50" width="100" height="100" fill="blue" />
    <circle cx="100" cy="100" r="50" fill="red" />
  </svg>
</body>

Inline-SVG ermöglicht es Ihnen, CSS zur Gestaltung der SVG-Elemente und JavaScript zur Interaktion mit ihnen zu verwenden, genau wie bei anderen HTML-Elementen. Diese Methode ist gut, wenn Sie dynamische, interaktive SVG-Grafiken erstellen möchten, die eng mit Ihrer Webseite verbunden sind.

Sie können SVG auch als Hintergrundbild in CSS verwenden. Verweisen Sie auf die SVG-Datei in der background-image-Eigenschaft oder der background-Kurzschreibweise:

<div class="background"></div>

<style>
.background {
  width: 200px;
  height: 200px;
  background-image: url('image.svg');
  background-size: cover;
}
</style>

Die Verwendung von SVG als Hintergrundbild ist nützlich, wenn Sie dekorative Grafiken zu Ihrer Webseite hinzufügen möchten, ohne sie zu Ihrem HTML-Markup hinzuzufügen. Sie können CSS-Eigenschaften wie background-size, background-position und background-repeat anwenden, um zu steuern, wie der SVG-Hintergrund angezeigt wird.

Bei der Entscheidung, welche Methode Sie verwenden möchten, sollten Sie Ihre spezifischen Anforderungen berücksichtigen:

SVG-Barrierefreiheit

Bei der Erstellung von SVG-Grafiken ist es wichtig, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass Ihr Inhalt von allen Nutzern verstanden und navigiert werden kann, einschließlich Menschen mit Behinderungen. SVG bietet mehrere Funktionen, die die Barrierefreiheit verbessern können, wie die Elemente <title> und <desc>, ARIA-Rollen und -Attribute sowie andere bewährte Praktiken.

Das <title>-Element ermöglicht es Ihnen, einen kurzen, beschreibenden Titel für ein SVG-Element anzugeben. Dieser Titel wird nicht visuell angezeigt, kann aber von Screenreadern gelesen werden, um Nutzern das Verständnis des Elements zu erleichtern. Platzieren Sie das <title>-Element als erstes Kind des Elements, das es beschreibt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40">
    <title>Kreis</title>
  </circle>
</svg>

Das <desc>-Element ermöglicht es Ihnen, eine detailliertere Beschreibung eines SVG-Elements bereitzustellen. Wie der <title> wird die Beschreibung nicht visuell dargestellt, kann aber von Screenreadern und anderen unterstützenden Technologien gelesen werden. Platzieren Sie das <desc>-Element nach dem <title>-Element:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40">
    <title>Kreis</title>
    <desc>Ein blauer Kreis mit einem Radius von 40 Einheiten, zentriert bei (50, 50)</desc>
  </circle>
</svg>

ARIA-Rollen und -Attribute (Accessible Rich Internet Applications) können auch verwendet werden, um die Barrierefreiheit von SVG-Elementen zu verbessern. ARIA-Rollen definieren den Zweck oder Typ eines Elements, während ARIA-Attribute zusätzliche Informationen über den Zustand oder die Eigenschaften des Elements liefern.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" role="button" tabindex="0">
    <title>Klick mich</title>
  </circle>
</svg>

Weitere bewährte Praktiken für die Barrierefreiheit von SVG sind:

SVG-Optimierung und Leistung

Bei der Verwendung von SVG-Grafiken auf Ihrer Website ist es wichtig, diese für eine optimale Leistung zu optimieren, um sicherzustellen, dass Ihre Seiten schnell laden. Einige Möglichkeiten zur Verbesserung der SVG-Leistung sind die Minimierung der Dateigröße, die Verwendung von SVG-Sprites und die Berücksichtigung anderer Leistungsaspekte.

Eine wichtige Methode zur Optimierung von SVG besteht darin, die Dateigröße zu reduzieren. SVG-Dateien können viele unnötige Daten enthalten, wie Metadaten, Kommentare und zusätzliche Leerzeichen, die die Dateigröße erhöhen können. Um die Dateigröße zu minimieren, können Sie:

Es gibt auch Tools wie SVGO (SVG Optimizer), die den Prozess der SVG-Dateioptimierung automatisieren können.

Eine weitere Technik zur Verbesserung der SVG-Leistung ist die Verwendung von SVG-Sprites. Ein Sprite ist eine einzelne Datei, die mehrere SVG-Elemente enthält, die jeweils durch eine eindeutige ID gekennzeichnet sind. Anstatt viele einzelne SVG-Dateien zu laden, können Sie den Sprite einmal laden und bei Bedarf verschiedene Teile davon anzeigen, was die Anzahl der HTTP-Anfragen reduziert und das Laden der Seite beschleunigt.

Um einen SVG-Sprite zu erstellen, kombinieren Sie Ihre einzelnen SVG-Dateien zu einer Datei und geben Sie jedem SVG-Element eine eindeutige ID. Dann referenzieren Sie den Sprite in Ihrem HTML mit dem <use>-Element und der ID der SVG, die Sie anzeigen möchten:

<svg>
  <use xlink:href="sprite.svg#icon-1"></use>
</svg>

Es gibt auch einige allgemeine Leistungsüberlegungen, die Sie bei der Verwendung von SVG beachten sollten:

• Verwenden Sie SVG nur für Grafiken, die skalierbar oder interaktiv sein müssen. Für einfache Bilder können Rasterformate wie JPEG oder PNG besser geeignet sein.
• Achten Sie auf die Anzahl und Komplexität der SVG-Elemente auf einer Seite. Sehr komplexe Grafiken mit vielen Elementen können das Rendering verlangsamen.
• Vermeiden Sie die übermäßige Verwendung von SVG-Filtern und -Effekten, da diese leistungsintensiv sein können, besonders auf mobilen Geräten.
• Speichern Sie SVG-Dateien im Cache, um die Ladezeiten für wiederkehrende Besucher zu reduzieren.
• Stellen Sie SVG-Dateien mit gzip-Kompression bereit, um ihre Übertragungsgröße zu reduzieren.