Symbole

Die meisten Bilder sind Teil Ihres Contents, aber Symbole sind Teil Ihrer Benutzeroberfläche. Sie sollten genauso skaliert und angepasst werden, wie der Text Ihrer Benutzeroberfläche skaliert und angepasst wird.

Skalierbare Vektorgrafiken

Für fotografische Bilder gibt es viele Auswahlmöglichkeiten für das Bildformat: JPG, WebP und AVIF. Bei nicht fotografischen Bildern haben Sie die Wahl zwischen dem Format PNG (Portable Network Graphics) und SVG (SVG).

Sowohl PNGs als auch SVGs eignen sich gut für die Verarbeitung flacher Farbflächen und ermöglichen Ihren Bildern einen transparenten Hintergrund. Wenn du eine PNG-Datei verwendest, musst du wahrscheinlich mehrere Versionen deines Bildes in verschiedenen Größen erstellen und das Attribut srcset für das img-Element verwenden, um das Bild responsiv zu machen. SVG-Dateien sind standardmäßig responsiv.

PNGs (und JPGs, WebP und AVIF) sind Bitmapbilder. In Bitmapbildern 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 konvertiert. Das Beste daran ist, dass diese Anweisungen relativ sind. Unabhängig von den Dimensionen, die Sie zur Beschreibung von Linien und Formen verwenden, wird alles gestochen scharf gerendert. Anstatt mehrere SVGs unterschiedlicher Größe zu erstellen, können Sie eine einzelne SVG-Datei erstellen, die in allen Größen funktioniert. Das Attribut srcset muss nicht verwendet werden.

<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 zum Schreiben der Anweisungen in eine SVG-Datei verwendet. Dabei handelt es sich um 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 eine solche SVG-Datei einbetten, muss der Browser eine Anforderung weniger stellen. Sie müssen nicht warten, bis das Bild heruntergeladen wird, da es mit dem HTML-Code eingeht ... in dem HTML-Code. Wie Sie bald erfahren werden, haben Sie durch das Einbetten von SVGs dieser Art mehr Kontrolle über die Gestaltung.

Symbole und Text

Symbolbilder zeigen oft einfache Formen auf einem transparenten Hintergrund. SVG ist ideal für Symbole.

Wenn Sie eine Schaltfläche oder einen Link mit Text und einem Symbol darin haben, ist das Symbol ein Präsentationssymbol. Auf den Text kommt es an. Bei Verwendung eines img-Elements gibt ein leeres alt-Attribut an, dass das Bild eine Präsentation ist.

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

Da CSS für Präsentationen bestimmt ist, können Sie das Symbol als Hintergrundbild in Ihrem CSS-Code 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 du das SVG in deinen HTML-Code einfügst, verwende das Attribut aria-hidden, um es vor Hilfstechnologien auszublenden.

<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 innerhalb Ihrer Schaltflächen und Links, wenn deren Zweck deutlich werden soll. Sie können ein Symbol ohne Text verwenden, aber gehen Sie nicht davon aus, dass alle verstehen, welche Bedeutung ein bestimmtes Symbol hat. Im Zweifelsfall sollten Sie die App mit echten Nutzern testen.

Wenn Sie ein Symbol ohne Begleittext verwenden möchten, ist das Symbol nicht mehr zur Präsentation gedacht. Ein Hintergrundbild in CSS ist keine geeignete Methode, um das Symbol anzuzeigen. Das Symbol muss einen barrierefreien Namen in HTML erhalten.

Wenn du ein img-Element verwendest, erhält das Symbol den zugänglichen Namen aus dem Attribut alt.

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

Eine weitere Möglichkeit besteht darin, den barrierefreien Namen auf dem Link oder der Schaltfläche selbst zu platzieren und zu deklarieren, dass es sich um eine Präsentation handelt. 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 die SVG-Datei in Ihren HTML-Code einfügen, verwenden Sie das Attribut aria-label im Link oder der Schaltfläche, um einen barrierefreien Namen zu geben, und verwenden Sie 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>

Stile für Symbole festlegen

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

Im folgenden Beispiel haben die rect-Elemente in der SVG-Datei einen fill-Wert von blue, der den Stilen für den Text der Schaltfläche entspricht.

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

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

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

Ressourcen

• Wenn Sie SVGs als Hintergrundbilder in Ihrem CSS gestalten müssen, lesen Sie den Artikel zur Einfärbung von SVG-Hintergründen in Una.
• Sara Soueidan hat einen Artikel zu barrierefreien Symbolschaltflächen verfasst.
• Scott O'Hara hat über das Kontext-Markup für barrierefreie Bilder und SVGs geschrieben.
• Wenn Sie zum Exportieren von SVGs ein Grafikdesigntool verwenden, SVGOMG, um die Ausgabe zu optimieren.

Symbole sind ein wichtiger Bestandteil des Brandings Ihrer Website. Als Nächstes erfährst du, wie du andere Aspekte deines Brandings mithilfe von Themen responsiv gestalten kannst.

Wissen testen

Testen Sie Ihr Wissen über Symbole