Posts Remove whitespace from an svg
Post
Cancel

Remove whitespace from an svg

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);
This post is licensed under CC BY 4.0 by the author.