diff --git a/index.html b/index.html index d8af736..feee56b 100644 --- a/index.html +++ b/index.html @@ -221,27 +221,33 @@ a.click(); }; inputButtonDownloadPng.onclick = (ev) => { + let svgSize = doc.width.baseVal.value; + let svgOffset = doc.viewBox.baseVal.x; let imgSize = parseInt(prompt("Enter image size (e.g. 2048)", "2048")); let svgRoot = doc.getElementById("svgroot"); if (Number.isNaN(imgSize)) { return; } - + // Resize SVG to output size, then export as XML, and resize back to default size doc.getElementById("bleed").style.stroke = 'black'; doc.width.baseVal.value = imgSize; doc.height.baseVal.value = imgSize; doc.viewBox.baseVal.width = imgSize; doc.viewBox.baseVal.height = imgSize; - svgRoot.transform.baseVal[0].matrix.a = imgSize/500; - svgRoot.transform.baseVal[0].matrix.d = imgSize/500; + doc.viewBox.baseVal.x = svgOffset * imgSize/svgSize; + doc.viewBox.baseVal.y = svgOffset * imgSize/svgSize; + svgRoot.transform.baseVal[0].matrix.a = imgSize/svgSize; + svgRoot.transform.baseVal[0].matrix.d = imgSize/svgSize; let serialized = new XMLSerializer().serializeToString(doc); doc.getElementById("bleed").style.stroke = '#ff00ff'; svgRoot.transform.baseVal[0].matrix.a = 1; svgRoot.transform.baseVal[0].matrix.d = 1; - doc.viewBox.baseVal.width = 500; - doc.viewBox.baseVal.height = 500; - doc.width.baseVal.value = 500; - doc.height.baseVal.value = 500; + doc.viewBox.baseVal.width = svgSize; + doc.viewBox.baseVal.height = svgSize; + doc.viewBox.baseVal.x = svgOffset; + doc.viewBox.baseVal.y = svgOffset; + doc.width.baseVal.value = svgSize; + doc.height.baseVal.value = svgSize; let canvas = document.createElement('canvas'); canvas.width = imgSize;