CODEWITHSUNDEEP
htmlcsssvg
Wargog
Wargog

Reputation: 428

How to remove blank space around SVG

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 massive and have a scroll bar that goes down, and the image also has a large margin on the top. I've tried reducing the size of the viewbox in the SVG and setting the height and width in CSS. This is what the page looks like with the following code and snippet: I simply want the SVG to not have the massive border around it and just have the chip to manipulate the size of. enter image description here

.body {
  background-color: #660033;
}
<!DOCTYPE html>
<html lang="en">

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

<body>
  <?xml version="1.0" encoding="utf-8" ?>
  <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  <svg style="height: 70vh; margin-top: 40vh; overflow: hidden" 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 1000 1000" 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>
    <g>
      <g>
        <path class="st0" d="M1000.4,1240.5c-79.7,0-159.4,0-239,0c-0.9,0-1.1-0.2-1.1-1.1c0-159.4,0-318.7,0-478.1c0-0.9,0.2-1.1,1.1-1.1 c159.4,0,318.7,0,478.1,0c0.9,0,1.1,0.2,1.1,1.1c0,159.4,0,318.7,0,478.1c0,0.9-0.2,1.1-1.1,1.1 C1159.7,1240.5,1080,1240.5,1000.4,1240.5z"
        />
        <path class="st1" d="M1017.4,1110.6c-3,0-6.1,0-9.1,0c-0.9,0-1.1,0.3-1.1,1.2c0,5,0,10.1,0,15.1c0,3-1.9,5.6-4.7,6.6 c-2.8,1-5.8,0.2-7.7-2c-1.2-1.4-1.7-2.9-1.7-4.7c0-5,0-9.9,0-14.9c0-0.9-0.2-1.2-1.2-1.2c-6.1,0-12.2,0-18.4,0 c-0.9,0-1.1,0.2-1.1,1.1c0,5,0,10.1,0,15.1c0,3.7-2.9,6.8-6.5,7c-3.7,0.3-6.9-2.3-7.5-6c-0.1-0.5-0.1-1-0.1-1.6 c0-4.8,0-9.6,0-14.4c0-1-0.2-1.4-1.3-1.3c-6,0.1-11.9,0.1-17.9,0c-1,0-1.3,0.2-1.3,1.2c0.1,5,0.1,10,0,15c0,3.7-2.9,6.8-6.5,7 c-3.7,0.3-6.9-2.3-7.5-6c-0.1-0.5-0.1-1-0.1-1.6c0-4.8,0-9.6,0-14.4c0-1.1-0.4-1.4-1.4-1.4c-5.2,0-10.4,0-15.6,0 c-9.7,0-17.1-7.4-17.1-17.1c0-5.2,0-10.3,0-15.5c0-1.2-0.2-1.6-1.5-1.5c-4.8,0.1-9.5,0.1-14.3,0c-3.7,0-6.8-2.9-7.1-6.5 c-0.3-3.7,2.3-6.9,6-7.5c0.5-0.1,1.1-0.1,1.7-0.1c4.7,0,9.4,0,14,0c0.9,0,1.1-0.3,1.1-1.2c0-6,0-12.1,0-18.1c0-1-0.3-1.2-1.2-1.2 c-4.7,0-9.4,0-14.2,0c-4.3,0-7.5-3.1-7.4-7.1c0-4,3.2-7,7.4-7c4.8,0,9.5,0,14.3,0c0.9,0,1.1-0.2,1.1-1.1c0-6.2,0-12.3,0-18.5 c0-0.9-0.3-1.1-1.1-1.1c-4.8,0-9.5,0-14.3,0c-4.3,0-7.5-3.1-7.5-7.1c0-4,3.2-7,7.4-7c4.8,0,9.5,0,14.3,0c0.9,0,1.2-0.2,1.1-1.1 c0-6.2,0-12.3,0-18.5c0-0.8-0.2-1.1-1.1-1.1c-4.8,0-9.5,0-14.3,0c-4.3,0-7.5-3.1-7.5-7.1c0-4,3.2-7,7.5-7.1c4.7,0,9.4,0,14,0 c1,0,1.3-0.2,1.3-1.2c-0.1-6,0-12,0-18c0-0.9-0.2-1.2-1.2-1.2c-4.7,0.1-9.4,0-14.2,0c-4.3,0-7.5-3-7.5-7.1c0-4,3.2-7.1,7.5-7.1 c4.6,0,9.2,0,13.8,0c1.7,0,1.5,0.2,1.5-1.6c0-5.1,0-10.2,0-15.4c0-9.8,7.3-17.1,17.2-17.2c5.2,0,10.4,0,15.6,0 c1,0,1.4-0.2,1.3-1.3c-0.1-4.4,0-8.7,0-13.1c0-4.3,3-7.5,7.1-7.5c4,0,7.1,3.2,7.1,7.5c0,4.4,0,8.8,0,13.2c0,0.8,0.1,1.2,1.1,1.2 c6.1,0,12.2,0,18.2,0c0.9,0,1.1-0.3,1.1-1.2c0-4.5,0-9,0-13.6c0-3.8,2.8-6.8,6.5-7.1c3.7-0.3,6.9,2.2,7.6,5.9 c0.1,0.6,0.1,1.2,0.1,1.8c0,4.4,0,8.7,0,13.1c0,0.8,0.2,1.1,1.1,1.1c6.2,0,12.3,0,18.5,0c0.9,0,1.1-0.3,1.1-1.2 c0-4.4,0-8.9,0-13.3c0-4.2,3.1-7.4,7-7.4c4,0,7.1,3.2,7.1,7.3c0,4.5,0,9,0,13.4c0,0.8,0.2,1.1,1.1,1.1c6.2,0,12.4,0,18.6,0 c0.8,0,1-0.2,1-1c0-4.6,0-9.1,0-13.7c0-3.8,2.8-6.8,6.4-7.1c3.7-0.3,6.9,2.2,7.6,5.9c0.1,0.7,0.1,1.4,0.1,2.2c0,4.2,0,8.4,0,12.6 c0,0.9,0.2,1.2,1.2,1.2c6,0,12.1,0,18.1,0c0.9,0,1.2-0.2,1.1-1.1c0-4.6,0-9.1,0-13.7c0-3.7,2.9-6.8,6.5-7c3.7-0.3,6.9,2.3,7.5,6 c0.1,0.7,0.1,1.4,0.1,2c0,4.1,0,8.2,0,12.2c0,1.8-0.2,1.6,1.5,1.6c5.1,0,10.2,0,15.4,0c9.9,0,17.2,7.3,17.2,17.2 c0,5.2,0,10.4,0,15.6c0,1,0.2,1.3,1.2,1.3c5.3-0.1,10.6,0,16,0c3.7,0,6.8,2.9,7,6.5c0.3,3.7-2.3,6.9-6,7.5 c-0.5,0.1-1.1,0.1-1.7,0.1c-5.1,0-10.2,0-15.4,0c-0.9,0-1.3,0.1-1.2,1.2c0.1,6,0,12.1,0,18.1c0,1,0.3,1.2,1.2,1.2 c5.4,0,10.7,0,16.1,0c3.5,0,6.3,2.6,6.9,6c0.5,3.3-1.5,6.6-4.7,7.7c-0.9,0.3-1.8,0.4-2.7,0.4c-5.2,0-10.4,0-15.6,0 c-0.9,0-1.1,0.3-1.1,1.1c0,6.1,0,12.2,0,18.4c0,1,0.3,1.2,1.2,1.2c5.4,0,10.7,0,16.1,0c3.5,0,6.3,2.6,6.9,6 c0.5,3.3-1.5,6.6-4.7,7.7c-0.9,0.3-1.8,0.4-2.7,0.4c-5.2,0-10.4,0-15.6,0c-0.9,0-1.1,0.2-1.1,1.1c0,6.2,0,12.3,0,18.5 c0,0.9,0.3,1.1,1.1,1.1c5.4,0,10.8,0,16.2,0c3.5,0,6.4,2.6,6.9,6.1c0.5,3.3-1.6,6.6-4.9,7.7c-0.8,0.3-1.7,0.4-2.6,0.4 c-5.2,0-10.4,0-15.6,0c-0.9,0-1.2,0.2-1.2,1.1c0,6.1,0,12.2,0,18.2c0,0.8,0.2,1.1,1.1,1.1c5.4,0,10.8,0,16.2,0 c3.5,0,6.4,2.6,6.9,6.1c0.5,3.3-1.6,6.6-4.8,7.7c-0.8,0.3-1.7,0.4-2.6,0.4c-5.1,0-10.2,0-15.4,0c-1,0-1.4,0.2-1.4,1.4 c0.1,5.2,0,10.4,0,15.6c0,9.8-7.4,17.1-17.2,17.1c-5.2,0-10.5,0-15.7,0c-0.9,0-1.2,0.2-1.2,1.2c0,5.1,0.1,10.2,0,15.2 c0,3.3-2.3,6-5.5,6.7c-3.1,0.7-6.3-0.8-7.8-3.6c-0.6-1.1-0.8-2.3-0.8-3.6c0-4.9,0-9.8,0-14.6c0-0.9-0.2-1.3-1.2-1.3 c-6,0.1-12,0.1-18,0c-1,0-1.2,0.3-1.2,1.3c0,5,0,9.9,0,14.9c0,3.8-2.8,6.8-6.5,7.1c-3.7,0.3-6.9-2.2-7.6-5.9 c-0.1-0.5-0.1-1.1-0.1-1.7c0-4.9,0-9.8,0-14.6c0-0.8-0.2-1.1-1.1-1.1C1023.7,1110.7,1020.5,1110.6,1017.4,1110.6z"
        />
        <path class="st2" d="M1000.1,938.6c20,0,40.1,0,60.1,0c1.1,0,1.5,0.2,1.5,1.4c0,40.1,0,80.2,0,120.3c0,1.1-0.2,1.4-1.4,1.4 c-40.2,0-80.3,0-120.5,0c-1,0-1.3-0.2-1.3-1.3c0-40.2,0-80.4,0-120.6c0-1.1,0.4-1.3,1.4-1.3C960,938.6,980.1,938.6,1000.1,938.6z"
        />
        <path class="st1" d="M1000.5,1040.6c-7.6,0-15.3,0-22.9,0c-8.3,0-15-5.3-16.8-13.5c-0.2-1.1-0.4-2.3-0.4-3.4c0-15.4,0-30.9,0-46.3 c0-9.5,7.5-16.9,17-16.9c15.4,0,30.8,0,46.2,0c9.5,0,17,7.5,17,17c0,15.4,0,30.8,0,46.2c0,9.6-7.5,17-17,17 C1015.8,1040.6,1008.2,1040.6,1000.5,1040.6z"
        />
      </g>
    </g>
  </svg>
</body>

</html>

Upvotes: 18

Views: 31403

Answers (2)

user3521314
user3521314

Reputation: 504

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);

Upvotes: 22

dap.tci
dap.tci

Reputation: 2485

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>

Upvotes: 27

Related Questions