<h1>Responsive SVG demo</h1>
<p><a href="https://madebymike.com.au/writing/svg-has-more-potential/">https://madebymike.com.au/writing/svg-has-more-potential/</a></p>
<br><br><br>

<div class="js-resizable">
<img class="js-resizable-image" src="https://madebymike.com.au/demos/svg/adaptive-border.svg">
</div>
body {
	margin: 0 auto;
	width: 80%;
	text-align: center
}

.js-resizable {
	position: relative;
	width: 100%;
	padding-right: 10px
}

.js-resizable-image {
	width: 100%;
	background: #FFF
}

.js-resizable-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 10px;
	border-right: dashed 2px black;
	cursor: col-resize
}

.js-resizable-handle::after {
	content: 'resize';
	right: 5px;
	top: 50%;
	display: block;
	position: absolute;
	color: #888;
	transform: translate(100%, -50%) rotate(90deg)
}
View Compiled
(function () {
	var make_resizeable = function(obj){

		var resize_handle = document.createElement('div');
		resize_handle.classList.add('js-resizable-handle');
		obj.appendChild(resize_handle);

		resize_handle.addEventListener('mousedown', initDrag, false);
		resize_handle.addEventListener('touchstart', initDrag, false);

		var startX, startWidth, startHeight;

		function initDrag(e) {
			startX = e.clientX || e.touches[0].clientX;
			startWidth = parseInt(document.defaultView.getComputedStyle(obj).width, 10);
			document.documentElement.addEventListener('mousemove', doDrag, false);
			document.documentElement.addEventListener('touchmove', doDrag, false);
			document.documentElement.addEventListener('mouseup', stopDrag, false);
			document.documentElement.addEventListener('touchend', stopDrag, false);
			document.documentElement.addEventListener('touchcancel', stopDrag, false);
		}

		function doDrag(e) {			
			var newX = e.clientX || e.touches[0].clientX;
			obj.style.width = (startWidth + newX - startX) + 'px';
		}

		function stopDrag(e) {
			document.documentElement.removeEventListener('mousemove', doDrag, false);
			document.documentElement.removeEventListener("touchmove", doDrag, false);
			document.documentElement.removeEventListener('mouseup', stopDrag, false);
			document.documentElement.removeEventListener('touchend', stopDrag, false);
			document.documentElement.removeEventListener('touchcancel', stopDrag, false);
		}

	}

	var resizable = document.querySelectorAll('.js-resizable');
	for(var i=0; i < resizable.length; i++){
		make_resizeable(resizable[i]);
	}

	window.onresize = function(event) {
		for(var i=0; i < resizable.length; i++){
			resizable[i].removeAttribute("style");
		}
	};

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.