<div id="container"></div>

<div style="display: 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 style="display: 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 style="display: 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>
#container svg {
	border: 1px solid #ddd;
}
import { SvJs } from 'https://cdn.jsdelivr.net/npm/svjs@latest/dist/svjs.min.js';

const svg = new SvJs().addTo(document.getElementById('container'));
const minX = document.getElementById('min-x');
const minY = document.getElementById('min-y');
const vbwh = document.getElementById('vbwh');

svg.set({
	width: '250px', // viewport width
	height: '250px', // viewport height
	viewBox: '0 0 1000 1000'
});

svg.create('rect').set({
	x: 0, y: 0, width: 1000, height: 1000, fill: "#eee"
});

svg.create('rect').set({
	x: 200, y: 200, width: 600, height: 600, fill: "crimson", stroke: "gold", stroke_width: 50
});

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

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

vbwh.addEventListener('input', () => {
  svg.set({ 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.