@@Felix Riesterer

mir wäre es im Kontext des HTML-Dokuments aus dem Wiki-Artikel lieber gewesen. Denn genau die Einbettung in das HTML-Dokument und insbesondere die Nutzung aus JavaScript heraus leuchtet mir noch nicht ganz ein.

SVG kann man auf (mindestens) zwei verschiedene Arten einbinden:

1. Als Hintergrundbild im Stylesheet

Da kann aus externen Dateien sein

.piece-x { background-image: url(cross.svg)  }
.piece-o { background-image: url(cirvle.svg) }

Da heißt zusätzliche HTTP-Requests für die SVGs. Man kann sie auch als Data-URLs ins Stylesheet einbinden:

.piece-x { background-image: url('data:image/svg+xml,<svg …></svg>') }
.piece-o { background-image: url('data:image/svg+xml,<svg …></svg>') }

Funktioniert so nicht im IE (Edge weiß ich grad nicht). Der IE ist da etwas strenger und erwartet den <svg …></svg>-Teil prozent-escapet. (Kann man ihm nicht mal verübeln.)

.piece-x { background-image: url('data:image/svg+xml,%3Csvg …%3E%3C/svg%3E') }
.piece-o { background-image: url('data:image/svg+xml,%3Csvg …%3E%3C/svg%3E') }

Ich habe wegen besserer Lesbarkeit hier mal darauf verzichtet.

→ Codepen 1

Kann man das in einem Anfängertutorial so anbieten? Ja, natürlich. Gegenüber der Variante mit ‘x’ und ‘o’ bleibt der HTML- und JavaScript-Code völlig gleich; es ändert sich lediglich die Darstellung.

Für einen Anfänger mag der Code im Stylesheet unverständlich sein; aber das ist

.piece-x::after { content: "x" }
.piece-o::after { content: "o" }

ebenfalls. Der Anfänger wird bei beidem einfach so hinnehmen, das der Code zur Darstellung von Kreuzen und Kreisen dient. Die Länge der betreffenden Zeilen im Stylesheet ist dabei nicht von Belang.

2. SVG in HTML eingebettet

Wie Camping_RIDER schon sagte, kann man das SVG <svg><use xlink:href="#cross"/></svg> (bzw. "#circle") einfach dynamisch per innerHTML als Inhalt in die td-Elemente setzen.

Die Definition der Symbole steht statisch im HTML.

→ Codepen 2

LLAP 🖖