Beispiel:URL-Encoder.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8" />
<title>URL-Encoder</title>
<style>
textarea {
width: 100%;
height: 15em;
font-family: monospace;
font-size: 1em;
margin-bottom: 1rem;
}
body {
max-width: 60em;
margin: 2rem auto;
padding: 0 1rem;
display: grid; grid-template-columns: 1fr 1fr; gap:1em;
}
h1,.controls {grid-column: 1/ -1;}
div { display: grid; grid-template-columns: 1fr 2em; gap:1em; }
div label {font: bold 1.25em sans-serif;}
svg {border:thin dotted;}
svg,textarea, #preview { grid-column: 1 / -1; aspect-ratio: 2/1; border: thin solid; }
</style>
</head> <body>
<label for="input">SVG Input</label> <button data-copy="input">📋</button> <textarea id="input"></textarea>
<label for="encoded">URL-encoded</label> <button data-copy="encoded">📋</button> <textarea id="encoded"></textarea>
<label for="css">background-image</label> <button data-copy="css">📋</button> <textarea id="css"></textarea>
<label for="preview">So sieht's aus</label>
<script> const input = document.getElementById('input'); const encoded = document.getElementById('encoded'); const cssOut = document.getElementById('css'); const preview = document.getElementById('preview');
let lock = false;
// --- helpers --- function clearAll() {
lock = true; input.value = ; encoded.value = ; cssOut.value = ; preview.style.backgroundImage = ; lock = false;
}
function compactSVG(svg) {
return svg
.trim()
.replace(/\r?\n|\r/g, )
.replace(/\t+/g, ' ')
.replace(/\s{2,}/g, ' ')
.replace(/>\s+</g, '><');
}
function encodeSVG(svg) {
return encodeURIComponent(svg) .replace(/%0A/g, ) .replace(/%20/g, ' ') .replace(/%3D/g, '=') .replace(/%3A/g, ':') .replace(/%2F/g, '/');
}
function updateFromSVG(svg) {
const compact = compactSVG(svg);
const enc = encodeSVG(compact);
const css = `background-image: url("data:image/svg+xml,${enc}");`;
input.value = compact;
encoded.value = enc;
cssOut.value = css;
preview.style.backgroundImage = `url("data:image/svg+xml,${enc}")`;
}
function updateFromEncoded(enc) {
const svg = decodeURIComponent(enc);
const compact = compactSVG(svg);
const css = `background-image: url("data:image/svg+xml,${enc}");`;
input.value = compact;
encoded.value = enc;
cssOut.value = css;
preview.style.backgroundImage = `url("data:image/svg+xml,${enc}")`;
}
// --- textarea events --- input.addEventListener('input', () => {
if (lock) return;
if (!input.value.trim()) {
clearAll();
return;
}
lock = true; updateFromSVG(input.value); lock = false;
});
encoded.addEventListener('input', () => {
if (lock) return;
if (!encoded.value.trim()) {
clearAll();
return;
}
lock = true; updateFromEncoded(encoded.value); lock = false;
});
// --- copy buttons --- document.querySelectorAll('[data-copy]').forEach(btn => {
btn.addEventListener('click', () => {
const id = btn.dataset.copy;
const el = document.getElementById(id);
if (!el || !el.value) return;
navigator.clipboard.writeText(el.value);
const old = btn.textContent; btn.textContent = '✔'; setTimeout(() => btn.textContent = old, 800); });
}); </script>
</body> </html>
