CSS Hilfe benötigt zu Selectorenhierarchie

[Sven]

Hallo Gunnar,

erstmal vielen lieben dank für die lange und verständliche Erklärung, das hat mir schon gut weiter geholfen.
Auch die Links zu den Vor- bzw. Nachteilen von SVG vs. Icon-Fonts haben mich überzeugt.

Wenn ein Icon mehrfach auftritt, ist es natürlich blöd, jedesmal den SVG-Code dafür zu duplizieren. Du kannst auch alle Icons als symbols in ein svg-Element tun und von dort referenzieren: SVG symbols.

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

1. Wohin käme hier der title, bzw. der description-tag?
2. Ich verstehe die viewBox="0 0 1 1"-Angabe im svg-tag nicht. Warum ist die nötig?

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?

fa 4.7, ich glaube, das gibt es keine SVGs

Ich glaube, Fontawesome bietet die SVGs zu den Icons schon seit längerem an. Die heben das bloß nicht so hervor; man muss wissen, wonach man suchen muss.

Ich habe Fontawesome jetzt einfach mal komplett außen vor gelassen, weil die die svg-Vectoren bevorzugt über JS einbinden wollen. Das ist mir viel zu ressourcenhungrig. Ich suche mir im Netz die SVGs zusammen, die freie Lizenzen (z.b. MIT) haben und kopiere mir dort die entsprechenden Pfade.

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

Grüße, Sven