Add background images / desktop wallpapers
|
After Width: | Height: | Size: 3.0 MiB |
@@ -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>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 16 KiB |
@@ -4,7 +4,8 @@
|
|||||||
viewBox="0 0 220 220"
|
viewBox="0 0 220 220"
|
||||||
role="img"
|
role="img"
|
||||||
aria-labelledby="title desc"
|
aria-labelledby="title desc"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="icon">
|
||||||
<style type="text/css"><
@@ -4,7 +4,8 @@
|
|||||||
viewBox="0 0 220 220"
|
viewBox="0 0 220 220"
|
||||||
role="img"
|
role="img"
|
||||||
aria-labelledby="title desc"
|
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[
|
<style type="text/css"><![CDATA[
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "InterLogo";
|
font-family: "InterLogo";
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |