Add background images / desktop wallpapers

2026-05-04 01:24:39 +02:00
parent 8dbfa41da8
commit 2abd6c529c
8 changed files with 234 additions and 2 deletions
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<body style="margin:0; background:#000;">
+
+<script>
+async function inlineAndExport() {
+  const parser = new DOMParser();
+
+  // Load background
+  const bgText = await (await fetch("background.svg")).text();
+  const bgDoc = parser.parseFromString(bgText, "image/svg+xml");
+  const svg = bgDoc.documentElement;
+
+  // Find the <image> referencing the logo (first one)
+  const imgEl = svg.querySelector("image[href], image[xlink\\:href]");
+  if (!imgEl) {
+    console.error("No <image> element found in background.svg");
+    return;
+  }
+
+  const logoHref = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
+
+  // Load logo
+  const logoText = await (await fetch(logoHref)).text();
+  const logoDoc = parser.parseFromString(logoText, "image/svg+xml");
+  const logoSvg = logoDoc.documentElement;
+
+  // Extract inner content of logo.svg
+  const logoInner = Array.from(logoSvg.childNodes)
+    .filter(n => n.nodeType === 1)
+    .map(n => n.outerHTML)
+    .join("");
+
+  // Read logo viewBox
+  const vb = logoSvg.getAttribute("viewBox").split(" ").map(Number);
+  const vbWidth = vb[2];
+  const vbHeight = vb[3];
+
+  // Read <image> geometry
+  const x = parseFloat(imgEl.getAttribute("x") || 0);
+  const y = parseFloat(imgEl.getAttribute("y") || 0);
+  const w = parseFloat(imgEl.getAttribute("width"));
+  const h = parseFloat(imgEl.getAttribute("height"));
+
+  // Compute scale
+  const scaleX = w / vbWidth;
+  const scaleY = h / vbHeight;
+
+  // Create <g> with correct transform
+  const g = bgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
+  g.setAttribute("transform", `translate(${x},${y}) scale(${scaleX},${scaleY})`);
+
+  // ⭐ NEW: preserve width/height from the original <image>
+  g.setAttribute("width", imgEl.getAttribute("width"));
+  g.setAttribute("height", imgEl.getAttribute("height"));
+
+  g.innerHTML = logoInner;
+
+  // Replace <image> with <g>
+  imgEl.replaceWith(g);
+
+  // Serialize final SVG
+  const finalSVG = new XMLSerializer().serializeToString(svg);
+  const svg64 = btoa(unescape(encodeURIComponent(finalSVG)));
+
+  // Render to <img>
+  const img = new Image();
+  img.src = "data:image/svg+xml;base64," + svg64;
+  await img.decode();
+
+  // Export helper
+  function exportPNG(width, height, filename) {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, width, height);
+
+    const a = document.createElement("a");
+    a.download = filename;
+    a.href = canvas.toDataURL("image/png");
+    a.click();
+  }
+
+  // Export all sizes
+  exportPNG(1920, 1080, "background-fhd.png");
+  exportPNG(2560, 1440, "background-wqhd.png");
+  exportPNG(3440, 1440, "background-uwqhd.png");
+  exportPNG(3840, 2160, "background-4kuhd.png");
+}
+
+inlineAndExport();
+</script>
+
+</body>
+</html>
+
@@ -4,7 +4,8 @@
 	viewBox="0 0 220 220"
 	role="img"
 	aria-labelledby="title desc"
-	xmlns="http://www.w3.org/2000/svg">
+	xmlns="http://www.w3.org/2000/svg"
+	id="icon">
 	<style type="text/css"><![CDATA[
 		@font-face {
 			font-family: "InterLogo";
@@ -4,7 +4,8 @@
 	viewBox="0 0 220 220"
 	role="img"
 	aria-labelledby="title desc"
-	xmlns="http://www.w3.org/2000/svg">
+	xmlns="http://www.w3.org/2000/svg"
+	id="icon">
 	<style type="text/css"><![CDATA[
 		@font-face {
 			font-family: "InterLogo";