How to remove blank space around SVG

Question

I have an SVG showing on a simple web page, but once I resize the image beyond a certain size (height: ~65vh) the SVG has an invisible space around it that makes the page massiv

Answer 1

I made this codepen that might help others who don't want to deal with drawing tools:

https://codepen.io/Steve6886/pen/abzzdOG

EDIT: Here’s a more up-to-date version of my previous codepen solution: https://svgcrop.com

// USER: Set either a width OR height (will scale evenly)
const WIDTH = 100;
const HEIGHT = null;

// Grab the SVG and remove any existing viewBox
const svg = document.querySelector('svg');
svg.removeAttribute('viewBox');

// Set default coordinates
const coords = {
  top: Infinity,
  left: Infinity,
  bottom: -Infinity,
  right: -Infinity
}; 

// Filter SVG to visible elements
filterize = newSvg => {
  const newest = [...newSvg.children].filter(x => x.tagName !== 'defs' && x.tagName !== 'style' && x.tagName !== 'title' && x.tagName !== 'desc');
  if ((newest.length === 1 && newest.childElementCount > 0) || newest[0].tagName === 'g') {
    return filterize(newest[0]);  
  }  

  return newest.filter(x => (x.getBoundingClientRect().top !== 0 && x.getBoundingClientRect().left !== 0 && x.getBoundingClientRect().bottom !== 0 && x.getBoundingClientRect().right !== 0));
  
} 

// Get coordinates of SVG elements
filterize(svg).forEach(x => {
  const {top, left, bottom, right} = x.getBoundingClientRect();
  if (top < coords.top) {
    coords.top = x.getBoundingClientRect().top;
  }
  if (left < coords.left) {
    coords.left = x.getBoundingClientRect().left;
  }
  if (right > coords.right) {
    coords.right = x.getBoundingClientRect().right;
  }
  if (bottom > coords.bottom) {
    coords.bottom = x.getBoundingClientRect().bottom;
  }
}); 

// Set viewBox based on coordinates
svg.setAttribute('viewBox', `${coords.left.toFixed(2)} ${coords.top.toFixed(2)} ${(coords.right - coords.left).toFixed(2)} ${(coords.bottom - coords.top).toFixed(2)}`);

// Set given width OR height
WIDTH && svg.setAttribute('width', WIDTH);
HEIGHT && svg.setAttribute('height', HEIGHT);  

// Add textarea with new SVG code to copy
const textarea = document.createElement('textarea');
textarea.style = `display:block;margin-top:2rem;width:100%;padding:0;min-height:calc(100vh - ${getComputedStyle(svg).height} - 2rem);`;
textarea.innerHTML = svg.outerHTML;
document.body.appendChild(textarea); 

Answer 2

I opened your svg on Inkscape and resized the document size to fit the content. (File -> Document Properties -> Resize page to content -> Resize page to drawing or selection)

Output:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px"
    viewBox="500 500 268.2734 266.75002"
    style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
    .st0{fill:rgba(255,255,255,0);}
    .st1{fill:#363636;}
    .st2{fill:#FEFEFE;}
</style>
<path
   class="st1"
   d="m 651,743.42436 c -3,0 -6.1,0 -9.1,0 -0.9,0 -1.1,0.3 -1.1,1.2 0,5 0,10.1 0,15.1 0,3 -1.9,5.6 -4.7,6.6 -2.8,1 -5.8,0.2 -7.7,-2 -1.2,-1.4 -1.7,-2.9 -1.7,-4.7 0,-5 0,-9.9 0,-14.9 0,-0.9 -0.2,-1.2 -1.2,-1.2 -6.1,0 -12.2,0 -18.4,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,5 0,10.1 0,15.1 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1 -0.2,-1.4 -1.3,-1.3 -6,0.1 -11.9,0.1 -17.9,0 -1,0 -1.3,0.2 -1.3,1.2 0.1,5 0.1,10 0,15 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1.1 -0.4,-1.4 -1.4,-1.4 -5.2,0 -10.4,0 -15.6,0 -9.7,0 -17.1,-7.4 -17.1,-17.1 0,-5.2 0,-10.3 0,-15.5 0,-1.2 -0.2,-1.6 -1.5,-1.5 -4.8,0.1 -9.5,0.1 -14.3,0 -3.7,0 -6.8,-2.9 -7.1,-6.5 -0.3,-3.7 2.3,-6.9 6,-7.5 0.5,-0.1 1.1,-0.1 1.7,-0.1 4.7,0 9.4,0 14,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-6 0,-12.1 0,-18.1 0,-1 -0.3,-1.2 -1.2,-1.2 -4.7,0 -9.4,0 -14.2,0 -4.3,0 -7.5,-3.1 -7.4,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.1,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.9 -0.3,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.8 -0.2,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.5,-7.1 4.7,0 9.4,0 14,0 1,0 1.3,-0.2 1.3,-1.2 -0.1,-6 0,-12 0,-18 0,-0.9 -0.2,-1.2 -1.2,-1.2 -4.7,0.1 -9.4,0 -14.2,0 -4.3,0 -7.5,-3 -7.5,-7.1 0,-4 3.2,-7.1 7.5,-7.1 4.6,0 9.2,0 13.8,0 1.7,0 1.5,0.2 1.5,-1.6 0,-5.1 0,-10.2 0,-15.4 0,-9.8 7.3,-17.1 17.2,-17.2 5.2,0 10.4,0 15.6,0 1,0 1.4,-0.2 1.3,-1.3 -0.1,-4.4 0,-8.7 0,-13.1 0,-4.3 3,-7.5 7.1,-7.5 4,0 7.1,3.2 7.1,7.5 0,4.4 0,8.8 0,13.2 0,0.8 0.1,1.2 1.1,1.2 6.1,0 12.2,0 18.2,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.5 0,-9 0,-13.6 0,-3.8 2.8,-6.8 6.5,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.6 0.1,1.2 0.1,1.8 0,4.4 0,8.7 0,13.1 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.3,0 18.5,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.4 0,-8.9 0,-13.3 0,-4.2 3.1,-7.4 7,-7.4 4,0 7.1,3.2 7.1,7.3 0,4.5 0,9 0,13.4 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.4,0 18.6,0 0.8,0 1,-0.2 1,-1 0,-4.6 0,-9.1 0,-13.7 0,-3.8 2.8,-6.8 6.4,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.7 0.1,1.4 0.1,2.2 0,4.2 0,8.4 0,12.6 0,0.9 0.2,1.2 1.2,1.2 6,0 12.1,0 18.1,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-4.6 0,-9.1 0,-13.7 0,-3.7 2.9,-6.8 6.5,-7 3.7,-0.3 6.9,2.3 7.5,6 0.1,0.7 0.1,1.4 0.1,2 0,4.1 0,8.2 0,12.2 0,1.8 -0.2,1.6 1.5,1.6 5.1,0 10.2,0 15.4,0 9.9,0 17.2,7.3 17.2,17.2 0,5.2 0,10.4 0,15.6 0,1 0.2,1.3 1.2,1.3 5.3,-0.1 10.6,0 16,0 3.7,0 6.8,2.9 7,6.5 0.3,3.7 -2.3,6.9 -6,7.5 -0.5,0.1 -1.1,0.1 -1.7,0.1 -5.1,0 -10.2,0 -15.4,0 -0.9,0 -1.3,0.1 -1.2,1.2 0.1,6 0,12.1 0,18.1 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.3 -1.1,1.1 0,6.1 0,12.2 0,18.4 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,6.2 0,12.3 0,18.5 0,0.9 0.3,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.9,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.2,0.2 -1.2,1.1 0,6.1 0,12.2 0,18.2 0,0.8 0.2,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.8,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.1,0 -10.2,0 -15.4,0 -1,0 -1.4,0.2 -1.4,1.4 0.1,5.2 0,10.4 0,15.6 0,9.8 -7.4,17.1 -17.2,17.1 -5.2,0 -10.5,0 -15.7,0 -0.9,0 -1.2,0.2 -1.2,1.2 0,5.1 0.1,10.2 0,15.2 0,3.3 -2.3,6 -5.5,6.7 -3.1,0.7 -6.3,-0.8 -7.8,-3.6 -0.6,-1.1 -0.8,-2.3 -0.8,-3.6 0,-4.9 0,-9.8 0,-14.6 0,-0.9 -0.2,-1.3 -1.2,-1.3 -6,0.1 -12,0.1 -18,0 -1,0 -1.2,0.3 -1.2,1.3 0,5 0,9.9 0,14.9 0,3.8 -2.8,6.8 -6.5,7.1 -3.7,0.3 -6.9,-2.2 -7.6,-5.9 -0.1,-0.5 -0.1,-1.1 -0.1,-1.7 0,-4.9 0,-9.8 0,-14.6 0,-0.8 -0.2,-1.1 -1.1,-1.1 -2.7,0.4 -5.9,0.3 -9,0.3 z"
   id="path11"
   inkscape:connector-curvature="0"
   style="fill:#363636" /><path
   class="st2"
   d="m 633.7,571.42436 c 20,0 40.1,0 60.1,0 1.1,0 1.5,0.2 1.5,1.4 0,40.1 0,80.2 0,120.3 0,1.1 -0.2,1.4 -1.4,1.4 -40.2,0 -80.3,0 -120.5,0 -1,0 -1.3,-0.2 -1.3,-1.3 0,-40.2 0,-80.4 0,-120.6 0,-1.1 0.4,-1.3 1.4,-1.3 20.1,0.1 40.2,0.1 60.2,0.1 z"
   id="path13"
   inkscape:connector-curvature="0"
   style="fill:#fefefe" /><path
   class="st1"
   d="m 634.1,673.42436 c -7.6,0 -15.3,0 -22.9,0 -8.3,0 -15,-5.3 -16.8,-13.5 -0.2,-1.1 -0.4,-2.3 -0.4,-3.4 0,-15.4 0,-30.9 0,-46.3 0,-9.5 7.5,-16.9 17,-16.9 15.4,0 30.8,0 46.2,0 9.5,0 17,7.5 17,17 0,15.4 0,30.8 0,46.2 0,9.6 -7.5,17 -17,17 -7.8,-0.1 -15.4,-0.1 -23.1,-0.1 z"
   id="path15"
   inkscape:connector-curvature="0"
   style="fill:#363636" />
</svg>

Now that the svg was fixed, you can put it in your file and set the height. In this case height:70vh; (For performance reasons, it's recommended to set height and width, but it's up to you).

#Layer_1{ /*Change svg id to a meaningful name*/
    height:70vh
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>CPU Animation / joshstroup.me</title>
</head>

<body>

<svg version="1.1" id="Layer_1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px"
    viewBox="500 500 268.2734 266.75002"
    style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
<style type="text/css">
    .st0{fill:rgba(255,255,255,0);}
    .st1{fill:#363636;}
    .st2{fill:#FEFEFE;}
</style>
<path
   class="st1"
   d="m 651,743.42436 c -3,0 -6.1,0 -9.1,0 -0.9,0 -1.1,0.3 -1.1,1.2 0,5 0,10.1 0,15.1 0,3 -1.9,5.6 -4.7,6.6 -2.8,1 -5.8,0.2 -7.7,-2 -1.2,-1.4 -1.7,-2.9 -1.7,-4.7 0,-5 0,-9.9 0,-14.9 0,-0.9 -0.2,-1.2 -1.2,-1.2 -6.1,0 -12.2,0 -18.4,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,5 0,10.1 0,15.1 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1 -0.2,-1.4 -1.3,-1.3 -6,0.1 -11.9,0.1 -17.9,0 -1,0 -1.3,0.2 -1.3,1.2 0.1,5 0.1,10 0,15 0,3.7 -2.9,6.8 -6.5,7 -3.7,0.3 -6.9,-2.3 -7.5,-6 -0.1,-0.5 -0.1,-1 -0.1,-1.6 0,-4.8 0,-9.6 0,-14.4 0,-1.1 -0.4,-1.4 -1.4,-1.4 -5.2,0 -10.4,0 -15.6,0 -9.7,0 -17.1,-7.4 -17.1,-17.1 0,-5.2 0,-10.3 0,-15.5 0,-1.2 -0.2,-1.6 -1.5,-1.5 -4.8,0.1 -9.5,0.1 -14.3,0 -3.7,0 -6.8,-2.9 -7.1,-6.5 -0.3,-3.7 2.3,-6.9 6,-7.5 0.5,-0.1 1.1,-0.1 1.7,-0.1 4.7,0 9.4,0 14,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-6 0,-12.1 0,-18.1 0,-1 -0.3,-1.2 -1.2,-1.2 -4.7,0 -9.4,0 -14.2,0 -4.3,0 -7.5,-3.1 -7.4,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.1,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.9 -0.3,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.4,-7 4.8,0 9.5,0 14.3,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-6.2 0,-12.3 0,-18.5 0,-0.8 -0.2,-1.1 -1.1,-1.1 -4.8,0 -9.5,0 -14.3,0 -4.3,0 -7.5,-3.1 -7.5,-7.1 0,-4 3.2,-7 7.5,-7.1 4.7,0 9.4,0 14,0 1,0 1.3,-0.2 1.3,-1.2 -0.1,-6 0,-12 0,-18 0,-0.9 -0.2,-1.2 -1.2,-1.2 -4.7,0.1 -9.4,0 -14.2,0 -4.3,0 -7.5,-3 -7.5,-7.1 0,-4 3.2,-7.1 7.5,-7.1 4.6,0 9.2,0 13.8,0 1.7,0 1.5,0.2 1.5,-1.6 0,-5.1 0,-10.2 0,-15.4 0,-9.8 7.3,-17.1 17.2,-17.2 5.2,0 10.4,0 15.6,0 1,0 1.4,-0.2 1.3,-1.3 -0.1,-4.4 0,-8.7 0,-13.1 0,-4.3 3,-7.5 7.1,-7.5 4,0 7.1,3.2 7.1,7.5 0,4.4 0,8.8 0,13.2 0,0.8 0.1,1.2 1.1,1.2 6.1,0 12.2,0 18.2,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.5 0,-9 0,-13.6 0,-3.8 2.8,-6.8 6.5,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.6 0.1,1.2 0.1,1.8 0,4.4 0,8.7 0,13.1 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.3,0 18.5,0 0.9,0 1.1,-0.3 1.1,-1.2 0,-4.4 0,-8.9 0,-13.3 0,-4.2 3.1,-7.4 7,-7.4 4,0 7.1,3.2 7.1,7.3 0,4.5 0,9 0,13.4 0,0.8 0.2,1.1 1.1,1.1 6.2,0 12.4,0 18.6,0 0.8,0 1,-0.2 1,-1 0,-4.6 0,-9.1 0,-13.7 0,-3.8 2.8,-6.8 6.4,-7.1 3.7,-0.3 6.9,2.2 7.6,5.9 0.1,0.7 0.1,1.4 0.1,2.2 0,4.2 0,8.4 0,12.6 0,0.9 0.2,1.2 1.2,1.2 6,0 12.1,0 18.1,0 0.9,0 1.2,-0.2 1.1,-1.1 0,-4.6 0,-9.1 0,-13.7 0,-3.7 2.9,-6.8 6.5,-7 3.7,-0.3 6.9,2.3 7.5,6 0.1,0.7 0.1,1.4 0.1,2 0,4.1 0,8.2 0,12.2 0,1.8 -0.2,1.6 1.5,1.6 5.1,0 10.2,0 15.4,0 9.9,0 17.2,7.3 17.2,17.2 0,5.2 0,10.4 0,15.6 0,1 0.2,1.3 1.2,1.3 5.3,-0.1 10.6,0 16,0 3.7,0 6.8,2.9 7,6.5 0.3,3.7 -2.3,6.9 -6,7.5 -0.5,0.1 -1.1,0.1 -1.7,0.1 -5.1,0 -10.2,0 -15.4,0 -0.9,0 -1.3,0.1 -1.2,1.2 0.1,6 0,12.1 0,18.1 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.3 -1.1,1.1 0,6.1 0,12.2 0,18.4 0,1 0.3,1.2 1.2,1.2 5.4,0 10.7,0 16.1,0 3.5,0 6.3,2.6 6.9,6 0.5,3.3 -1.5,6.6 -4.7,7.7 -0.9,0.3 -1.8,0.4 -2.7,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.1,0.2 -1.1,1.1 0,6.2 0,12.3 0,18.5 0,0.9 0.3,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.9,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.2,0 -10.4,0 -15.6,0 -0.9,0 -1.2,0.2 -1.2,1.1 0,6.1 0,12.2 0,18.2 0,0.8 0.2,1.1 1.1,1.1 5.4,0 10.8,0 16.2,0 3.5,0 6.4,2.6 6.9,6.1 0.5,3.3 -1.6,6.6 -4.8,7.7 -0.8,0.3 -1.7,0.4 -2.6,0.4 -5.1,0 -10.2,0 -15.4,0 -1,0 -1.4,0.2 -1.4,1.4 0.1,5.2 0,10.4 0,15.6 0,9.8 -7.4,17.1 -17.2,17.1 -5.2,0 -10.5,0 -15.7,0 -0.9,0 -1.2,0.2 -1.2,1.2 0,5.1 0.1,10.2 0,15.2 0,3.3 -2.3,6 -5.5,6.7 -3.1,0.7 -6.3,-0.8 -7.8,-3.6 -0.6,-1.1 -0.8,-2.3 -0.8,-3.6 0,-4.9 0,-9.8 0,-14.6 0,-0.9 -0.2,-1.3 -1.2,-1.3 -6,0.1 -12,0.1 -18,0 -1,0 -1.2,0.3 -1.2,1.3 0,5 0,9.9 0,14.9 0,3.8 -2.8,6.8 -6.5,7.1 -3.7,0.3 -6.9,-2.2 -7.6,-5.9 -0.1,-0.5 -0.1,-1.1 -0.1,-1.7 0,-4.9 0,-9.8 0,-14.6 0,-0.8 -0.2,-1.1 -1.1,-1.1 -2.7,0.4 -5.9,0.3 -9,0.3 z"
   id="path11"
   inkscape:connector-curvature="0"
   style="fill:#363636" /><path
   class="st2"
   d="m 633.7,571.42436 c 20,0 40.1,0 60.1,0 1.1,0 1.5,0.2 1.5,1.4 0,40.1 0,80.2 0,120.3 0,1.1 -0.2,1.4 -1.4,1.4 -40.2,0 -80.3,0 -120.5,0 -1,0 -1.3,-0.2 -1.3,-1.3 0,-40.2 0,-80.4 0,-120.6 0,-1.1 0.4,-1.3 1.4,-1.3 20.1,0.1 40.2,0.1 60.2,0.1 z"
   id="path13"
   inkscape:connector-curvature="0"
   style="fill:#fefefe" /><path
   class="st1"
   d="m 634.1,673.42436 c -7.6,0 -15.3,0 -22.9,0 -8.3,0 -15,-5.3 -16.8,-13.5 -0.2,-1.1 -0.4,-2.3 -0.4,-3.4 0,-15.4 0,-30.9 0,-46.3 0,-9.5 7.5,-16.9 17,-16.9 15.4,0 30.8,0 46.2,0 9.5,0 17,7.5 17,17 0,15.4 0,30.8 0,46.2 0,9.6 -7.5,17 -17,17 -7.8,-0.1 -15.4,-0.1 -23.1,-0.1 z"
   id="path15"
   inkscape:connector-curvature="0"
   style="fill:#363636" />
</svg>
</body>

</html>