Remove Whitespace from Svg

Remove whitespace from SVG

Adjust the viewBox so that it just covers the area you want. I've done most of it below, you could tighten if further if you need to.

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="250.0px" height="100.0px" overflow="visible" viewBox="200.0 50.0 8.0 8.0" enable-background="new 0.0 0.0 250.0 100.0">    <defs>        <radialGradient id="Grad1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0021972656 0.0 0.0 0.0040893555 120.8 38.55)" r="819.2" cx="0" cy="0">
        </radialGradient>        <linearGradient id="Grad2" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 0.001739502 -0.015563965 0.0 108.05 40.25)" x1="-819.2" y1="0" x2="819.2" y2="0">
        </linearGradient>        <radialGradient id="Grad3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-0.0021972656 0.0 0.0 0.0040893555 95.3 38.55)" r="819.2" cx="0" cy="0">
        </radialGradient>        <linearGradient id="Grad4" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.0 -0.001953125 0.015563965 0.0 108.05 36.95)" x1="-819.2" y1="0" x2="819.2" y2="0">
        </linearGradient>    </defs>
    <g>        <g transform="matrix(1.0 0.0 0.0 1.0 0.0 0.0)">
            <path fill="#DC0100" stroke-linecap="round" stroke-linejoin="round" d="M 232.05 57.75 L 230.45 60.6 L 221.85 68.25 L 221.5 67.9 C 221.2 67.6 220.84999 67.36666 220.45 67.2 L 221.9 61.85 L 223.5 62.4 L 226.05 57.25 L 227.2 57.85 L 229.95 55.95 L 232.05 57.75 Z M 227.85 82.2 L 226.65 83.0 L 226.65 86.35 L 224.2 87.15 L 222.5 84.45 L 219.6 84.75 L 219.0 84.7 L 219.25 80.35 L 219.35 80.35 C 221.61667 80.35 223.61667 79.75 225.35 78.55 L 227.85 82.2 Z M 212.3 82.8 C 211.23334 82.166664 210.25 81.416664 209.35 80.55 L 207.8 78.75 L 212.6 75.35 L 213.5 76.35 L 214.5 77.25 L 217.1 73.7 L 218.45 74.35 L 216.4 81.6 C 215.4 81.36667 214.46666 81.01667 213.6 80.55 L 212.3 82.8 Z M 205.15 70.3 L 201.75 68.9 L 202.25 65.6 L 205.85 65.6 C 206.45 63.8 207.4 62.15 208.7 60.65 L 207.25 58.15 L 209.1 56.2 L 211.7 58.1 L 213.75 61.2 C 213.11667 61.566666 212.53334 62.033333 212.0 62.6 C 210.43333 64.166664 209.45 65.96667 209.05 68.0 L 208.85 70.25 L 205.15 70.3 Z M 208.85 70.25 L 208.85 70.3 Z M 218.15 67.9 L 217.8 68.2 C 217.4 68.63333 217.18332 69.15 217.15 69.75 L 211.1 68.45 C 211.43333 66.816666 212.23334 65.36667 213.5 64.1 L 214.9 62.95 L 218.15 67.9 Z M 232.15 70.2 C 232.15 72.13333 231.76666 73.916664 231.0 75.55 L 223.55 72.0 C 223.78333 71.46667 223.9 70.88333 223.9 70.25 L 223.85 69.7 L 232.1 68.65 L 232.15 70.2 Z"/>            <path fill="#6C0B0B" stroke-linecap="round" stroke-linejoin="round" d="M 226.05 57.25 L 223.5 62.4 L 221.9 61.85 L 220.45 67.2 C 220.85 67.36666 221.20001 67.6 221.5 67.9 L 221.85 68.25 L 230.45 60.6 C 231.85 62.166668 232.85 63.9 233.45 65.8 L 233.45 65.9 L 235.95 65.9 L 236.4 66.15 L 236.9 68.4 C 235.96666 68.86667 235.01666 69.35 234.05 69.85 L 234.05 69.95 L 234.05 70.3 C 234.05 72.23333 233.73334 74.01666 233.1 75.65 L 235.3 78.35 L 233.85 80.2 L 230.95 79.35 L 229.85 80.55 L 228.05 82.1 L 227.85 82.2 L 225.35 78.55 C 223.61667 79.75 221.61667 80.35 219.35 80.35 L 219.25 80.35 L 219.0 84.7 L 218.75 84.7 L 216.65 84.45 L 214.7 87.15 L 212.3 86.35 L 212.3 82.8 L 213.6 80.55 C 214.46666 81.01667 215.4 81.36667 216.4 81.6 L 218.45 74.35 L 217.1 73.7 L 214.5 77.25 L 213.5 76.35 L 212.6 75.35 L 207.8 78.75 L 205.55 80.35 L 203.85 78.2 L 206.05 75.5 C 205.45 73.9 205.15 72.16667 205.15 70.3 L 208.85 70.3 L 209.05 68.0 C 209.45 65.96667 210.43333 64.166664 212.0 62.6 C 212.53334 62.033333 213.11667 61.566666 213.75 61.2 L 211.7 58.1 C 213.43333 56.93333 215.35 56.216663 217.45 55.95 L 218.3 52.9 L 220.9 52.9 L 221.7 55.95 C 223.23334 56.11667 224.68333 56.550003 226.05 57.25 Z M 219.0 84.7 L 219.0 84.75 Z M 208.85 70.3 L 208.85 70.25 Z M 217.8 68.2 L 218.15 67.9 L 214.9 62.95 L 213.5 64.1 C 212.23334 65.36667 211.43333 66.816666 211.1 68.45 L 217.15 69.75 C 217.18333 69.15 217.40001 68.63333 217.8 68.2 Z M 231.0 75.55 C 231.76666 73.916664 232.15 72.13333 232.15 70.2 L 232.1 68.65 L 223.85 69.7 L 223.9 70.25 C 223.9 70.88333 223.78333 71.46667 223.55 72.0 L 231.0 75.55 Z"/>


        </g>    </g></svg>

Centering and removing white space from a SVG in an enclosing div

For that to happen, you need to do two things:

Make sure that your viewBox is correct. It needs to match the dimensions of your <path>. It currently doesn't.
Add the following attribute to your SVG to turn off the automatic aspect-ratio-preserving scaling that SVG does.
```
preserveAspectRatio="none"
```

If we check the bounding box of your path, we get the values:

x: 2.600
y: 2.895
width: 2984.740
height: 1650.893

So that is what your viewBox needs to be set to, if you want the path to touch all four sides of the SVG's parent container.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.example {
    width: 100%;
    height: 100vh;  
}

svg {
    width: 100%;
    height: 100%;  
}

.section-two {
    width: 100%;
    height: 100vh;
    background-color: black;
}

<div class="example">
    <svg viewbox="2.6 2.9 2984.7 1650.9" preserveAspectRatio="none">
        <path d="M2987.34,2.895l-2984.74,-0l0,1224.16l671.731,426.733l2313,-426.733l0,-1224.16Z" style="fill:#f8be46;"/>
    </svg>
</div>

<div class="section-two">

</div>

How to remove blank space around SVG

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>

Find svg viewbox that trim whitespace around

You can simply set your svg's viewBox to its Bounding Box.

function setViewbox(svg) {  var bB = svg.getBBox();  svg.setAttribute('viewBox', bB.x + ',' + bB.y + ',' + bB.width + ',' + bB.height);  }
document.querySelector('button').addEventListener('click', function() {  setViewbox(document.querySelector('svg'));  });

svg {  border: 1px solid }

<svg version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 300" enable-background="new 0 0 500 300" xml:space="preserve" width="250" height="150">  <path fill="none" stroke="#B2E230" d="M413.7,276.5c0,0,67-37,116,0c-24.1-33,16.4-53,0-34s-100-2-75-38" transform="translate(-75,-75)" /></svg><button>setViewbox</button>

white space around svg icon on web

I guess the viewBox is the wrong size. Try viewBox="7 10 10 10".

svg {  width: 16px;  height: 16px;}

<svg id="ic_arrow_drop_down" viewBox="7 10 10 10 ">  <path d="M7 10l5 5 5-5z" /></svg>

Method in R to crop whitespace on svg file

It sounds like you want to crop the viewBox of the svg. There are probably many ways to do this, but one is to work out the new viewBox co-ordinates and write them into the svg file.

We can get the limits of the non-transparent parts like this:

library(magick)

img <- image_read_svg("onions-pd.svg")
data   <- image_data(img) 
opaque <- which(data[4,,] != 0, arr.ind = TRUE)
limits <- paste(paste(apply(opaque, 2, min), collapse = ", "), 
                paste(apply(opaque, 2, max), collapse = ", "), sep = ", ")

limits
#> [1] "11, 64, 417, 440"

and write them into a copy of the svg file like this:

library(xml2)

onions_xml <- read_xml("onions-pd.svg")

xml_set_attr(onions_xml, attr = "viewBox", limits)

write_xml(onions_xml, "onions-cropped.svg")

Why is there extra white space in this svg?

The viewBox area has a lot of blank space in it at the top. Adjusting the viewBox dimensions can fix that...

<div class="grey-curve-svg">  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 320">    <path fill="#0099ff"           fill-opacity="1"           style="--darkreader-inline-fill:#007acc;"            data-darkreader-inline-fill=""           d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"           ></path>  </svg></div>

How to get rid of extra space below svg in div element

You need display: block; on your svg.

<svg style="display: block;"></svg>

This is because inline-block elements (like <svg> and <img>) sit on the text baseline. The extra space you are seeing is the space left to accommodate character descenders (the tail on 'y', 'g' etc).

You can also use vertical-align:top if you need to keep it inline or inline-block

Remove Whitespace from Svg