SVG − remove whitespace

index.html

<!-- paste svg(s) here -->

script.js

//remove multiple attributes from element
//https://stackoverflow.com/a/50541881
Element.prototype.removeAttributes = function(...attrs) {
  attrs.forEach(attr => this.removeAttribute(attr));
}

//round to 2 decimal places
//https://stackoverflow.com/a/11832950
function r(num) {
	return Math.round((num + Number.EPSILON) * 100) / 100;
}

//remove svg whitespace
function svgRemoveWhitespace(svg) {
	let box = svg.getBBox(),
			viewBox = [
				r(box.x),
				r(box.y),
				r(box.width),
				r(box.height)
			].join(' ');
	
	svg.setAttribute('viewBox', viewBox);
	svg.removeAttributes('width', 'height'); //optional
	showNewViewbox(svg, viewBox);
}

//show new viewbox output above the svg
function showNewViewbox(el, result) {
	let output = document.createElement('div');
	let field = document.createElement('input');
	let label = document.createElement('label');
	let id = 'viewbox';
	label.setAttribute('for', id);
	label.textContent = 'new viewBox:';
	field.id = id;
	field.setAttribute('type', 'text');
	field.setAttribute('readonly', '');
	field.value = result;
	field.addEventListener('focus', (e) => e.target.select());
	output.classList.add('output');
	output.insertAdjacentElement('beforeend', label);
	output.insertAdjacentElement('beforeend', field);
	el.insertAdjacentElement('beforebegin', output);
}


const svgs = document.querySelectorAll('svg');
svgs.forEach(svg => svgRemoveWhitespace(svg));

style.scss

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: Roboto, sans-serif;
	overflow-x: hidden;
}

svg {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1em;
	outline: 1px solid #f00; //guidelines
}

.output {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: .25em .5em;
	margin: 1em;
	
	& ~ & {
		margin-top: 3em; //spacing
	}
	
	label {
		font-weight: 500;
	}
}

styles

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&amp;display=swap" rel="stylesheet" />

svg-remove-whitespace.markdown

SVG − remove whitespace

Sets the SVG's viewBox to its bounding box.

A Pen by Marc Müller on CodePen.

License.