Symbole

Die meisten Bilder sind Teil Ihres Inhalts, Symbole sind jedoch Teil Ihrer Benutzeroberfläche. Sie sollten sich genauso skalieren und anpassen wie der Text Ihrer Benutzeroberfläche.

Scalable Vector Graphics

Bei fotografischen Bildern gibt es viele Möglichkeiten für das Bildformat: JPG, WebP und AVIF. Für nicht fotografische Bilder können Sie zwischen dem PNG-Format (Portable Network Graphics) und dem SVG-Format (Scalable Vector Graphics) wählen.

Sowohl PNGs als auch SVGs eignen sich gut für Bereiche mit einheitlicher Farbe und ermöglichen transparente Hintergründe. Wenn Sie ein PNG verwenden, müssen Sie wahrscheinlich mehrere Versionen Ihres Bildes in verschiedenen Größen erstellen und das Attribut srcset für Ihr img-Element verwenden, um das Bild responsiv zu gestalten. Wenn Sie ein SVG verwenden, ist es standardmäßig responsiv.

PNGs (sowie JPGs, WebP und AVIF) sind Bitmap-Bilder. In Bitmap-Bildern werden Informationen als Pixel gespeichert. In einer SVG-Datei werden Informationen als Zeichenanweisungen gespeichert. Wenn der Browser die SVG-Datei liest, werden die Anweisungen in Pixel umgewandelt. Das Beste daran: Diese Anweisungen sind relativ. Unabhängig davon, welche Abmessungen Sie zum Beschreiben von Linien und Formen verwenden, wird alles in der richtigen Schärfe gerendert. Anstatt mehrere SVGs in verschiedenen Größen zu erstellen, können Sie ein SVG erstellen, das in allen Größen funktioniert. Sie müssen das Attribut srcset nicht verwenden.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

XML wird verwendet, um die Anweisungen in eine SVG-Datei zu schreiben. Dies ist eine Auszeichnungssprache wie HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

Sie können SVG sogar in HTML einfügen.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

Wenn Sie ein SVG auf diese Weise einbetten, muss der Browser eine Anfrage weniger senden. Das Bild muss nicht heruntergeladen werden, da es mit dem HTML-Code im HTML-Code enthalten ist. Außerdem haben Sie, wie Sie bald feststellen werden, mehr Kontrolle über das Styling von eingebetteten SVGs.

Symbole und Text

Für Symbole werden oft einfache Formen auf einem transparenten Hintergrund verwendet. SVG ist ideal für Symbole.

Wenn Sie eine Schaltfläche oder einen Link mit Text und einem Symbol darin haben, ist das Symbol präsentativ. Es kommt auf den Text an. Wenn Sie ein img-Element verwenden, gibt ein leeres alt-Attribut an, dass das Bild nur zur Darstellung dient.

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

Da CSS für die Darstellung zuständig ist, können Sie das Symbol als Hintergrundbild in Ihr CSS einfügen.

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

Wenn Sie das SVG in Ihr HTML einfügen, verwenden Sie das Attribut aria-hidden, um es vor Hilfstechnologien zu verbergen.

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

Eigenständige Symbole

Verwenden Sie Text in Ihren Schaltflächen und Links, wenn Sie möchten, dass ihr Zweck klar ist. Sie können ein Symbol ohne Text verwenden, sollten aber nicht davon ausgehen, dass jeder die Bedeutung eines bestimmten Symbols versteht. Im Zweifelsfall sollten Sie Tests mit echten Nutzern durchführen.

Wenn Sie ein Symbol ohne begleitenden Text verwenden, ist es nicht mehr präsentativ. Ein Hintergrundbild in CSS ist keine geeignete Methode, um das Symbol darzustellen. Das Symbol muss in HTML einen barrierefreien Namen erhalten.

Wenn Sie ein img-Element verwenden, erhält das Symbol seinen barrierefreien Namen aus dem alt-Attribut.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

Eine weitere Möglichkeit besteht darin, den barrierefreien Namen auf den Link oder Button selbst zu setzen und zu deklarieren, dass das Bild nur zur Darstellung dient. Verwenden Sie das Attribut aria-label, um den barrierefreien Namen anzugeben.

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

Wenn Sie das SVG in Ihr HTML einfügen, verwenden Sie das Attribut aria-label für den Link oder die Schaltfläche, um ihm einen barrierefreien Namen zu geben, und das Attribut aria-hidden für das Symbol.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

Symbole für die Formatierung

Wenn Sie Ihre SVG-Symbole direkt in Ihr HTML einbetten, können Sie Teile davon wie jedes andere Element auf Ihrer Seite gestalten. Das ist nicht möglich, wenn Sie ein img-Element zum Anzeigen Ihrer Symbole verwenden.

Im folgenden Beispiel haben die rect-Elemente im SVG den fill-Wert blue, um den Stil des Schaltflächentexts zu übernehmen.

button {
 color: blue;
}
button rect {
  fill: blue;
}

Sie können auch die Stile hover und focus anwenden.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

Ressourcen

• Wenn Sie SVGs, die Hintergrundbilder in Ihrem CSS sind, gestalten möchten, lesen Sie den Artikel von Una zum Kolorieren von SVG-Hintergründen.
• Sara Soueidan hat einen Artikel über barrierefreie Symbolschaltflächen geschrieben.
• Scott O'Hara hat einen Artikel zum kontextbezogenen Markieren von barrierefreien Bildern und SVGs geschrieben.
• Wenn Sie ein Grafikdesign-Tool zum Exportieren von SVGs verwenden, optimieren Sie die Ausgabe mit SVGOMG.

Symbole sind ein wichtiger Bestandteil des Brandings Ihrer Website. Als Nächstes erfahren Sie, wie Sie andere Aspekte Ihres Brandings durch Theming responsiv gestalten können.

Dein Wissen wird getestet

Wissen zu Symbolen testen