Icon-System: SVG-Handling

[marctrix]

Hej dedlfix,

Ihr Inhalt bleibt agnostisch bezüglich der Icons.

Agnostisch kenne ich nur in dem Sinn „nicht überzeugt von der Existenz Gottes“. Das macht hier für mich keinen Sinn. Wie so oft, verstehe ich dich daher nicht…

Agnostisch heißt unter Programmierern, dass ein bestimmtes Ding nichts von der Existenz anderer Dinge wissen muss.

Ah danke!

Dass auch ich beatovichs Aussagen oftmals nicht verstehe, liegt meiner Meinung nach am PowerPoint-Stil seiner Antworten: mehr oder weniger Stichwörter, die viel bedeuten können und ohne sich weitere Erklärungen häufig nicht konkret erschließen lassen.

Ja, so empfinde ich das auch.

Meinst du vielleicht, dass der Inhalt den Icons gegenüber gleichgültig ist (klingt für mich danach, macht aber auch keinen Sinn).

In dem Fall muss der Inhalt nichts über irgendwelche Icons wissen und demzufolge auch keine konkreten Vorkehrungen dafür treffen.

Hmm — ob sich das immer so sicherstellen lässt?!?

Zumindest muss man den Platz für das Icon frei halten. Gut ist Präsentation, kein Inhalt.

Auf jeden Fall brauchen Icons immer eine sichtbare Beschreibung aus Gründen der Barrierefreiheit. Was ich in einem weiteren Beitrag thematisieren werde.

Auch wenn sie nur schmückendes Beiwerk sind,

Nein, dann nicht.

Auch nicht, wenn sie ein Teil einer Mehrfachkennzeichnung sind (z.B. um Links zusätzlich zur farblichen Gestaltung zu kennzeichnen, wohl aber, wenn sie weitere Informationen transportieren, wie interner-Link, externer Link oder Datei-Download).

also allein im CSS referenziert werden und dort kein tooltip/aria-Attribut/wasauchimmer hinzufügbar ist?

Woher es referenziert wird, ist egal bei der Beantwortung der Frage, ob ein Icon inhaltlich relevant ist. Es sollte halt nicht aus dem CSS kommen, sondern im HTML stehen, wenn es zum Inhalt gehört.

Dann sollte man es aber auch wie folgt aufbauen:

<svg role="img" title="Suche">
		<use xlink:href="test.svg#search" />
</svg>

und im Sprite so etwas:

		<symbol id="search" viewBox="0 0 1792 1792">
			<title>Suche</title>
			<path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z" />
		</symbol>

Oder noch besser:

		<symbol id="search" viewBox="0 0 1792 1792" aria-describedby="ID-searchIconTitle">
			<title id="ID-searchIconTitle">Suche</title>
			<path d="M1216 832q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z" />
		</symbol>

Also mit aria-describedby.

Wenn man es nicht weiter mit CSS bearbeiten muss, geht aber auch ein img mit alt-Attribut.

Wie noch in einem eigenen Post ausgeführt, gibt es meiner Meinung nach keine immer verwendbare Lösung. Man muss schon allerhand Anwendungsfälle unterscheiden. Die Technik dahinter ist in diesem Fall (mal wieder) weniger komplex als das Konzept.

Alles was es braucht, ist eine Guideline semantischer Klassen.

Also eine Doku, die beschreibt, welche Klasse für welches Icon steht. Wäre es nciht sinnvoll nach dem Vorbild von fontawesome die Klassennamen und Datei-Namen identisch zu wählen?

Wenn die Icon-Namen sehr generisch gehalten sind, die Anwendung aber konkrete Bedeutungen zuweisen kann, ist das nicht mehr sinnvoll. Beispielsweise stellt ein Icon eine Checkbox dar und ist auch so benannt, dann bekommt es seine eigentliche Semantik, was dort konkret angehakt werden soll, erst durch eine konkrete Verwendung.

Dazu fällt mir nur der Checkbox-Hack ein. Und wenn man den verwendet, kann man doch einer semantisch korrekt verwendeten Klasse das Icon checked.svg oder unchecke.svg verwenden. Gerade das ist doch ein Beispiel, warum eine 1:1-Zuordnung keinen Sinn macht. Ein Icon kann in verschiedenen Fällen sinnvoll verwendet werden.

Marc