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;