Frage zum Wiki-Artikel „Tic-Tac-Toe“

[Tobi]

Hallo zusammen,

leider funktionieren bei mir die Background Images nicht. Ich würde gerne verstehen wie BASE64 funktioniert. Kann mir jemand helfen?

Viele Grüße und danke schonmal im voraus.

Tobi

.tic-tac-toe [aria-label="x"] {
	background-image: url('data:image/svg+xml,%3Csvg%20...');
}

.tic-tac-toe [aria-label="o"]{
	background-image: url('data:image/svg+xml,%3Csvg%20...');
}

[Matthias Scharwies]

Servus!

Hallo zusammen,

leider funktionieren bei mir die Background Images nicht.

Die im Tutorial gehen: https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Tic-tac-toe-2.html#view_result

Ich würde gerne verstehen wie BASE64 funktioniert. Kann mir jemand helfen?

Du meinst nicht im Tutorial, sondern eigene?

Wichtig ist eben, dass alle Zeichen URL-encodiert sind. Das lässt man am Besten eine Maschine machen:

Wir haben ein Helferlein#Base64-.28De.29Kodierung im SELF-Wiki.

Ich verwende oft: https://yoksel.github.io/url-encoder/

Viele Grüße und danke schonmal im voraus.

Tobi

.tic-tac-toe [aria-label="x"] {
	background-image: url('data:image/svg+xml,%3Csvg%20...');
}

.tic-tac-toe [aria-label="o"]{
	background-image: url('data:image/svg+xml,%3Csvg%20...');
}

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Wir haben ein Helferlein#Base64-.28De.29Kodierung im SELF-Wiki.

Ja, das konvertiert zu Base64.

Ich verwende oft: https://yoksel.github.io/url-encoder/

Und was hat das mit Base64 zu tun? Nichts. Nada.

Base64 macht auch oft keinen Sinn, da es unnötig lang ist.

Das Kreuz-SVG bspw. 289 Bytes als Base64 gegenüber 231 Zeichen, wenn Sonderzeichen wie < und > prozentcodiert sind.

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

[Rolf B]

Hallo Tobi,

das liegt möglicherweise gar nicht an der Codierung. Ein SVG sollte sowohl URI-codiert wie auch base64-codiert verwendbar sein. Aber prüfe für deine SVGs bitte:

• Sie werden dargestellt, wenn Du sie inline ins HTML stellst
• Sie werden dargestellt, wenn Du sie als separate Datei ablegst und als src in ein img Element laden willst

Vor allem der Einsatz in einem img Element funktioniert normalerweise nur, wenn das SVG ein xmlns Attribut besitzt. Hast Du das drin?

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20">

Erst wenn es so weit passt, konvertiere das SVG in eine Data-URI. Das kannst Du mit einem externen Tool erledigen, oder auf der Console der Entwicklertools des Browsers mit Hilfe der Funktion encodeURIComponent. Ganz wichtig: Component. Es gibt auch encodeURI, aber diese Funktion arbeitet nur für gültige URIs.

Wenn Du dann noch "url(data:image/svg+xml," davorsetzt und ein ")" dahinter, sollte es passen.

Rolf