tag:forum.selfhtml.org,2005:/self Frage zum Wiki-Artikel „Tic-Tac-Toe“ – SELFHTML-Forum 2022-05-03T12:36:11Z https://forum.selfhtml.org/self/2022/may/03/frage-zum-wiki-artikel-tic-tac-toe/1798876#m1798876 Tobi tobi.helber@gmx.de 2022-05-03T08:53:16Z 2022-05-03T08:53:16Z Frage 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#m1798878 Matthias Scharwies mscharwies@selfhtml.org 2022-05-03T09:34:48Z 2022-05-03T09:34:48Z Frage 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#m1798882 Rolf B 2022-05-03T12:36:11Z 2022-05-03T12:36:11Z Frage 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#m1798881 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2022-05-03T11:17:22Z 2022-05-03T11:17:55Z Frage 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>