SVG in HTML Einführung

Überblick

Dieser Artikel und das zugehörige Beispiel zeigt, wie man inline SVG verwendet.

Einfaches Beispiel

Um ein inline SVG in eine HTML-Datei einzufügen, kopieren Sie die gesamte SVG-Datei in die HTML-Datei.

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>SVG Demo</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img">
      <title>A gradient</title>
      <linearGradient id="gradient">
        <stop class="begin" offset="0%" stop-color="red" />
        <stop class="end" offset="100%" stop-color="black" />
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
      <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
    </svg>
  </body>
</html>

Diskussion

Die Seite ist reguläres HTML und CSS mit einem einzelnen SVG. Der einzige interessante Teil ist das <svg>-Element, das es enthält. Dieses Element und seine Kinder sind als Teil des SVG-Namespace deklariert. Das Element enthält einen Farbverlauf und zwei Formen, die mit dem Verlauf gefüllt sind. Die Farbverläufe haben ihre Farben über CSS festgelegt.

Es gibt drei Attribute und ein verschachteltes Element, die beachtet werden sollten:

  1. Das viewBox-Attribut legt ein logisches Koordinatensystem fest, auf das sich die Koordinaten des SVG-Bildes beziehen. In diesem Fall ist unser Bild in einem 100 x 100 Ansichtsfenster ausgelegt.

  2. Das preserveAspectRatio-Attribut gibt an, dass das Seitenverhältnis beibehalten werden muss, indem das Bild in der verfügbaren Größe zentriert, auf das Maximum der Höhe oder Breite skaliert und dann Überlauf abgeschnitten wird.

  3. Das Einfügen von role="img" stellt sicher, dass unterstützende Technologien das SVG als Bild behandeln.

  4. Ein <title> innerhalb eines SVG bietet die zugängliche, kurztextige Beschreibung der Grafik. Der Titeltext wird nicht gerendert, aber Browser können ihn als Tooltip anzeigen, wenn über das SVG gefahren wird. Das <title> sollte das erste Element nach dem <svg>-Öffnungstag sein.

Beste Praktiken

Wenn ein SVG über ein <img>-Element eingefügt wird, bietet das alt-Attribut alternativen Text, der das Bild zugänglich macht. Inline SVG unterstützt das alt-Attribut nicht. Es unterstützt jedoch mehrere andere Möglichkeiten, es zugänglich zu machen. Bei inline SVGs ist die Quelle im DOM verfügbar, was bedeutet, dass das gesamte Markup innerhalb einer inline SVG-Datei dem Accessibility Object Model oder AOM zugänglich ist. Das Einfügen eines <title>-Elements bietet diesen alternativen Text.

Wenn das Bild mehr als einen kurzen Titel vermittelt, fügen Sie eine längere Beschreibung mit dem <desc>-Element ein. Das <desc>-Element bietet eine zugängliche, langtextige Beschreibung. Ähnlich wie der <title>-Text wird der Text innerhalb des <desc> nicht auf dem Bildschirm dargestellt.

Wenn das SVG durch sichtbaren Text beschriftet werden kann, referenzieren Sie diesen Text mit einem aria-labelledby-Attribut. Alternativ fügen Sie das aria-labelledby-Attribut mit der id des <title> ein.

html
<svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription">
  <title id="svgTitle">Manual</title>
  <desc id="svgDescription">
    A nondescript twelve page booklet opened to the middle page
  </desc>
  <defs>
    <style>
      rect {
        fill: #cccccc;
        stroke: #666;
        transform-origin: top;
      }
    </style>
  </defs>

  <rect
    width="36"
    height="60"
    x="13"
    y="18"
    ry="2"
    style="transform: skewy(24deg)" />
  <rect
    width="39"
    height="60"
    x="11"
    y="20"
    ry="2"
    style="transform: skewy(18deg)" />
  <rect
    width="42"
    height="90"
    x="8"
    y="22"
    ry="2"
    style="transform: skewy(12deg)" />
  <rect
    width="36"
    height="60"
    x="50"
    y="18"
    ry="2"
    style="transform: skewy(-24deg)" />
  <rect
    width="39"
    height="60"
    x="50"
    y="20"
    ry="2"
    style="transform: skewy(-18deg)" />
  <rect
    width="42"
    height="90"
    x="50"
    y="22"
    ry="2"
    style="transform: skewy(-12deg)" />
</svg>

Wenn das SVG durch sichtbaren Text beschrieben werden kann, kann dieser Text mit dem aria-describedby-Attribut referenziert werden. Wenn aria-describedby verwendet wird, hat es Vorrang vor <desc>.

In unserem Beispiel haben wir sowohl die Beschreibung als auch den Titel in unser aria-labelledby-Attribut aufgenommen, da es bessere Unterstützung durch unterstützende Technologien bietet als aria-describedby.

Siehe auch