CSS Hilfe benötigt zu Selectorenhierarchie

[Gunnar Bittersmann]

@@Sven

SVG symbols.

Kannst Du mir bei diesem Beispiel noch 2 Dinge erklären?

1. Wohin käme hier der title, bzw. der description-tag?

In die svg-Elemente mit den use-Elementen: SVG symbols, titles.

Das sollte dann auch der Alternativtext für die Grafiken sein. Die Ups & Downs hab ich aus dem Text entfernt, damit sich das nicht doppelt.

Das title-Element erzeugt (wie auch das title-Attribut in HMTL) beim Hovern mit der Maus ein Tooltip – das sollte nicht stören, sondern sogar hilfreich sein.

2. Ich verstehe die viewBox="0 0 1 1"-Angabe im svg-tag nicht. Warum ist die nötig?

Da das use-Element ohne Angaben von x und y an die Stelle (0, 0) plaziert wird, sollte viewBox auch dort beginnen, damit’s passt. 1 1 ist Breite und Höhe, also eine qudratische Grafik. Wichtig ist nur das Seitenverhältnis, du kannst genauso gut viewBox="0 0 666 666" angeben.

Das kannst du auch in eine externe SVG-Ressource auslagern, wie auf dieser Testseite gezeigt. (Wegen CORS-Gedöns nicht als Codepen.)

Auch hier habe ich eine Rückfrage. Werden die einfach in eine file.svg ausgelagert? Wie wird die Datei eingebunden? Über das href-Attribut?

Ja, das war doch auf der Testseite im Quelltext zu sehen. href mit Pfad zur SVG-Ressource und fragment identifier nach dem #.

Früher hätte es das xlink:href-Attribut aus dem XLink-Namensraum sein gemusst (in Safari auch unbedingt mit Präfix xlink, IIRC); heute kommen alle Browser mit href ohne Namensraum klar.

---

Ich habe Fontawesome jetzt einfach mal komplett außen vor gelassen, weil die die svg-Vectoren bevorzugt über JS einbinden wollen.

?? Ich verstehe nicht, was du meinst.

Ich suche mir im Netz die SVGs zusammen, die freie Lizenzen (z.b. MIT) haben

Die Fontawesome-Icons sind doch auch frei?

und kopiere mir dort die entsprechenden Pfade.

Hm, dann hast du eher das Problem, dass Icons nicht zueinander passen, als wenn du alle Icons aus einer Quelle nimmst.

Noch eine Frage habe ich, wie würde eine SVG-Grafik eingebunden, wenn ich sie in einem Input-Element oder einem Button bräuchte?

In einem input-Element: gar nicht. input darf keinen Inhalt haben.

🖖 Живіть довго і процвітайте