<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
	<rect x="0" y="0" width="100%" height="100%" fill="#eee"></rect>
  <rect x="200" y="200" width="600" height="600" fill="crimson" stroke="gold" stroke-width="50" />
</svg>
<div class="flex">
	<input type="range" id="min-x" name="min-x" min="-500" max="500" step="50" value="0">
	<label for="min-x">viewBox min-x: <span id="min-x-val">0</span></label>
</div>
<div class="flex">
	<input type="range" id="min-y" name="min-y" min="-500" max="500" step="50" value="0">
	<label for="min-y">viewBox min-y: <span id="min-y-val">0</span></label>
</div>
<div class="flex">
	<input type="range" id="vbwh" name="vbwh" min="500" max="1500" step="100" value="1000">
	<label for="vbwh">viewBox width/height: <span id="vbwh-val">1000</span></label>
</div>
#svg {
	width: 200px;
	height: 200px;
	border: 1px solid #bbb;
}

.flex {
	display: flex;
}

.flex label {
	margin-left: 10px;
}
let svg = document.getElementById('svg');
let minX = document.getElementById('min-x');
let minY = document.getElementById('min-y');
let vbwh = document.getElementById('vbwh');

minX.addEventListener('change', () => {
  svg.setAttribute('viewBox', `${minX.value} ${minY.value} ${vbwh.value} ${vbwh.value}`);
	document.getElementById('min-x-val').innerHTML = minX.value;
});

minY.addEventListener('change', () => {
  svg.setAttribute('viewBox', `${minX.value} ${minY.value} ${vbwh.value} ${vbwh.value}`);
	document.getElementById('min-y-val').innerHTML = minY.value;
});

vbwh.addEventListener('change', () => {
  svg.setAttribute('viewBox', `${minX.value} ${minY.value} ${vbwh.value} ${vbwh.value}`);
	document.getElementById('vbwh-val').innerHTML = vbwh.value;
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.