Hallo Robert,
inline im HTML
das wollte er ja nicht, um nicht für jedes Symbol eine Data-URL in den Code hauen zu müssen.
Andererseits, wenn ich nochmal drüber nachdenke, ist
<img src="images/symbol3.svg" alt="Musik">
auch nicht viel länger als ein
<div class="symbol3"></div>
und hat den Vorteil des alt-Texts. Wenn die Bilder reine Deko sind, steht da nur alt="" (aber das muss stehen, denke ich, auch wenn ein <desc> Element im SVG steht!) und dann ist's nur ein kleines bisschen länger.
Dauert beim ersten Laden ein bisschen, bis die Symbole alle da sind, aber wenn sie erstmal im Cache sind, ist's ja gut.
Wenn man unbedingt will, dass die Bilder untereinander stehen, setzt man per CSS ein display:block drauf. Oder ein white-space:pre auf die Tabellenzelle und ein Linefeed zwischen die img Elemente.
Yup, die div-Lösung mit Hintergrundbild dürfte schlechter sein.
Rolf
sumpsi - posui - obstruxi