99 lines
2.8 KiB
HTML
99 lines
2.8 KiB
HTML
<!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 ALL <image> elements
|
|
const imageEls = svg.querySelectorAll("image[href], image[xlink\\:href]");
|
|
|
|
for (const imgEl of imageEls) {
|
|
const href = imgEl.getAttribute("href") || imgEl.getAttribute("xlink:href");
|
|
|
|
// Only inline SVG images (skip PNG/JPG/etc.)
|
|
if (!href.endsWith(".svg")) continue;
|
|
|
|
// Load the referenced SVG
|
|
const logoText = await (await fetch(href)).text();
|
|
const logoDoc = parser.parseFromString(logoText, "image/svg+xml");
|
|
const logoSvg = logoDoc.documentElement;
|
|
|
|
// Extract inner content
|
|
const logoInner = Array.from(logoSvg.childNodes)
|
|
.filter(n => n.nodeType === 1)
|
|
.map(n => n.outerHTML)
|
|
.join("");
|
|
|
|
// Read 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> wrapper
|
|
const g = bgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
g.setAttribute("transform", `translate(${x},${y}) scale(${scaleX},${scaleY})`);
|
|
|
|
// Preserve width/height
|
|
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>
|
|
|