tag:forum.selfhtml.org,2005:/selfFrage zum Wiki-Artikel „Tic-Tac-Toe“ – SELFHTML-Forum2022-05-03T12:36:11Zhttps://forum.selfhtml.org/self/2022/may/03/frage-zum-wiki-artikel-tic-tac-toe/1798876#m1798876Tobitobi.helber@gmx.de2022-05-03T08:53:16Z2022-05-03T08:53:16ZFrage zum Wiki-Artikel „Tic-Tac-Toe“<p>Hallo zusammen,</p>
<p>leider funktionieren bei mir die Background Images nicht. Ich würde gerne verstehen wie BASE64 funktioniert. Kann mir jemand helfen?</p>
<p>Viele Grüße und danke schonmal im voraus.</p>
<p>Tobi</p>
<pre><code class="block">.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...');
}
</code></pre>
https://forum.selfhtml.org/self/2022/may/03/frage-zum-wiki-artikel-tic-tac-toe/1798878#m1798878Matthias Scharwiesmscharwies@selfhtml.org2022-05-03T09:34:48Z2022-05-03T09:34:48ZFrage zum Wiki-Artikel „Tic-Tac-Toe“<p>Servus!</p>
<blockquote>
<p>Hallo zusammen,</p>
<p>leider funktionieren bei mir die Background Images nicht.</p>
</blockquote>
<p>Die im Tutorial gehen: <a href="https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Tic-tac-toe-2.html#view_result" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Tic-tac-toe-2.html#view_result</a></p>
<blockquote>
<p>Ich würde gerne verstehen wie BASE64 funktioniert. Kann mir jemand helfen?</p>
</blockquote>
<p>Du meinst nicht im Tutorial, sondern eigene?</p>
<p>Wichtig ist eben, dass alle Zeichen <a href="https://wiki.selfhtml.org/wiki/URL-Codierung" rel="nofollow noopener noreferrer">URL-encodiert</a> sind. Das lässt man am Besten eine Maschine machen:</p>
<p>Wir haben ein <a href="https://wiki.selfhtml.org/wiki/Helferlein#Base64-.28De.29Kodierung" rel="nofollow noopener noreferrer">Helferlein#Base64-.28De.29Kodierung</a> im SELF-Wiki.</p>
<p>Ich verwende oft: <a href="https://yoksel.github.io/url-encoder/" rel="nofollow noopener noreferrer">https://yoksel.github.io/url-encoder/</a></p>
<blockquote>
<p>Viele Grüße und danke schonmal im voraus.</p>
<p>Tobi</p>
<pre><code class="block">.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...');
}
</code></pre>
</blockquote>
<p>Herzliche Grüße</p>
<p>Matthias Scharwies</p>
<div class="signature">-- <br>
Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“
</div>
https://forum.selfhtml.org/self/2022/may/03/frage-zum-wiki-artikel-tic-tac-toe/1798882#m1798882Rolf B2022-05-03T12:36:11Z2022-05-03T12:36:11ZFrage zum Wiki-Artikel „Tic-Tac-Toe“<p>Hallo Tobi,</p>
<p>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:</p>
<ul>
<li>Sie werden dargestellt, wenn Du sie inline ins HTML stellst</li>
<li>Sie werden dargestellt, wenn Du sie als separate Datei ablegst und als src in ein img Element laden willst</li>
</ul>
<p>Vor allem der Einsatz in einem img Element funktioniert normalerweise nur, wenn das SVG ein xmlns Attribut besitzt. Hast Du das drin?</p>
<p><code><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"></code></p>
<p>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.</p>
<p>Wenn Du dann noch "url(data:image/svg+xml," davorsetzt und ein ")" dahinter, sollte es passen.</p>
<p><em>Rolf</em></p>
<div class="signature">-- <br>
sumpsi - posui - obstruxi
</div>
https://forum.selfhtml.org/self/2022/may/03/frage-zum-wiki-artikel-tic-tac-toe/1798881#m1798881Gunnar Bittersmannselfhtml@bittersmann.dehttps://bittersmann.de2022-05-03T11:17:22Z2022-05-03T11:17:55ZFrage zum Wiki-Artikel „Tic-Tac-Toe“<p>@@Matthias Scharwies</p>
<blockquote>
<p>Wir haben ein <a href="https://wiki.selfhtml.org/wiki/Helferlein#Base64-.28De.29Kodierung" rel="nofollow noopener noreferrer">Helferlein#Base64-.28De.29Kodierung</a> im SELF-Wiki.</p>
</blockquote>
<p>Ja, das konvertiert zu Base64.</p>
<blockquote>
<p>Ich verwende oft: <a href="https://yoksel.github.io/url-encoder/" rel="nofollow noopener noreferrer">https://yoksel.github.io/url-encoder/</a></p>
</blockquote>
<p>Und was hat das mit Base64 zu tun? Nichts. Nada.</p>
<p>Base64 macht auch oft keinen Sinn, da es unnötig lang ist.</p>
<p>Das Kreuz-SVG bspw. 289 Bytes als Base64 gegenüber 231 Zeichen, wenn Sonderzeichen wie <code><</code> und <code>></code> prozentcodiert sind.</p>
<p lang="uk"> Живіть довго і процвітайте</p>
<div class="signature">-- <br>
<em lang="en">When the power of love overcomes the love of power the world will know peace.</em><br>
— Jimi Hendrix
</div>