Neat little trick to remove excess whitespace from an svg. Visit this link and paste the content of your svg and hit ‘Run’, the script will run and add a viewBox
attribute which removes the whitespace and a prompt with your new svg will open.
Svg:
1
2
3
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 125" enable-background="new 0 0 100 100" xml:space="preserve">
<path d="M73.782,48.501H51.499V26.218c0-0.828-0.672-1.5-1.5-1.5s-1.5,0.672-1.5,1.5v22.283H26.218c-0.828,0-1.5,0.672-1.5,1.5 s0.672,1.5,1.5,1.5h22.281v22.281c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5V51.501h22.283c0.828,0,1.5-0.672,1.5-1.5 S74.61,48.501,73.782,48.501z"/>
</svg>
Script:
1
2
3
4
5
var svg = document.getElementsByTagName("svg")[0];
var bbox = svg.getBBox();
var viewBox = [bbox.x, bbox.y, bbox.width, bbox.height].join(" ");
svg.setAttribute("viewBox", viewBox);
prompt("Copy to clipboard: Ctrl+C, Enter", svg.outerHTML);