Die meisten Bilder sind Teil Ihrer Inhalte, aber die Symbole sind Teil Ihrer Benutzeroberfläche. Sie sollten auf die gleiche Weise skaliert und angepasst werden, wie der Text Ihrer UI skaliert und angepasst wird.
Skalierbare Vektorgrafiken
Für Fotos gibt es viele verschiedene Bildformate: JPG, WebP und AVIF. Bei nicht fotografischen Bildern können Sie zwischen dem Portable Network Graphics-Format (PNG) und dem Scalable Vector Graphics-Format (SVG) wählen.
Sowohl PNG- als auch SVG-Dateien eignen sich gut für Bereiche mit einer flachen Farbe. Sie ermöglichen beide einen transparenten Hintergrund Ihrer Bilder.
Wenn du eine PNG-Datei verwendest, musst du wahrscheinlich mehrere Versionen deines Bildes in verschiedenen Größen erstellen und das Attribut srcset im 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 werden Informationen als Zeichenanweisungen gespeichert. Wenn der Browser die SVG-Datei liest, werden die Anweisungen in Pixel konvertiert. Das Beste ist aber, dass diese Anweisungen relativ sind. Unabhängig von den Abmessungen, die Sie für die Beschreibung von Linien und Formen verwenden, wird alles in genau der richtigen Präzision gerendert. Anstatt mehrere SVG-Dateien unterschiedlicher Größe zu erstellen, können Sie ein einziges SVG erstellen, das 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">
Zum Schreiben der Anweisungen in eine SVG-Datei wird XML verwendet. 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-Dateien sogar in HTML-Code 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 Anfrage weniger stellen. Sie müssen nicht warten, bis das Bild heruntergeladen ist, da es den HTML-Code im HTML-Code erhält. Wie Sie bald herausfinden werden, können Sie durch das Einbetten von SVGs wie diesem auch ihre Stile besser steuern.
Symbole und Text
Symbolbilder haben oft einfache Formen auf transparentem 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. Es ist der Text, der zählt. Wenn ein img-Element verwendet wird, gibt ein leeres alt-Attribut an, dass das Bild ein Präsentationsbild ist.
<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>
Da CSS für Präsentationszwecke vorgesehen ist, können Sie das Symbol in Ihrem CSS als Hintergrundbild 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 den HTML-Code einfügen, können Sie es mit dem Attribut aria-hidden vor Hilfstechnologien 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 innerhalb von Schaltflächen und Links, wenn ihr Zweck deutlich erkennbar sein soll. Sie können Symbole ohne Text verwenden, aber gehen Sie nicht davon aus, dass alle die Bedeutung eines bestimmten Symbols verstehen. Führen Sie im Zweifelsfall Tests mit echten Nutzern durch.
Wenn Sie ein Symbol ohne begleitenden Text verwenden, ist es nicht mehr präsent. 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 seinen 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 den Link oder die Schaltfläche selbst zu setzen und zu erklären, dass das Bild ein Präsentationsformat ist. 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 den HTML-Code einfügen, verwenden Sie das Attribut aria-label für den Link oder die Schaltfläche, um ihr einen barrierefreien Namen zu geben, und verwenden Sie das Attribut aria-hidden auf dem 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 gestalten
Wenn Sie Ihre SVG-Symbole direkt in den HTML-Code einbetten, können Sie Teile davon wie jedes andere Element auf Ihrer Seite gestalten. Dies ist nicht möglich, wenn Sie ein img-Element zum Anzeigen Ihrer Symbole verwenden.
Im folgenden Beispiel haben die rect-Elemente in der SVG den fill-Wert 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 in Ihrem CSS SVGs gestalten müssen, bei denen es sich um Hintergrundbilder handelt, lesen Sie Una-Artikel zum Einfärben von SVG-Hintergründen.
- Sara Soueidan hat sich über Bedienungshilfen für Symbolschaltflächen informiert.
- Scott O'Hara hat sich über die kontextuale Auszeichnung barrierefreier Bilder und SVGs informiert.
- Wenn Sie ein Grafikdesigntool zum Exportieren von SVGs verwenden, nutzen Sie SVGOMG, um die Ausgabe zu optimieren.
Symbole sind ein wichtiger Bestandteil des Brandings Ihrer Website. Als Nächstes erfährst du, wie du mithilfe von Designs auch andere Aspekte deines Brandings responsiv gestalten kannst.
Überprüfen Sie Ihr Wissen
Testen Sie Ihr Wissen über Symbole
SVG kann jede Pixeldichte mit einer einzelnen Datei oder einem <svg>-Codeblock verarbeiten.
.png oder .jpg werden bei SVG weder srcset noch <picture>-Elemente benötigt.Welche Vorteile hat SVG-Code, der sich direkt im HTML-Code befindet?