SVG filter not visible when using custom viewBox

Why is setting an svg viewBox to say 0 0 1 1 causing my filter to disappear? I also tried playing around with x, y, height, and width attributes as well as changing primitiveUnits attribute, nothing did work. Any help would be appreciated.

svg {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

svg circle {
  fill: black;
}

<html>

  <body>
    <svg viewBox="0 0 1 1">
      <defs>
        <filter id="halo1">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
    </svg>
    
   <svg>
      <defs>
        <filter id="halo2">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
    </svg>
  </body>

</html>

Fiddle playground: https://jsfiddle.net/6x34urzg/14/

Solution

When the image is scaled from 1x1 (the viewBox="0 0 1 1") to 100x100 px the standard deviation (stdDeviation="3") is also scaled. The circle with the filter is still there but 100 time too big.

If you set the standard deviation to 1/100 (stdDeviation=".03") you will get the same result as the other SVG.

svg {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

svg circle {
  fill: black;
}

<html>

  <body>
    <svg viewBox="0 0 1 1">
      <defs>
        <filter id="halo1">
          <feGaussianBlur in="SourceGraphic" stdDeviation=".03" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo1)"></circle>
    </svg>
    
   <svg>
      <defs>
        <filter id="halo2">
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>
      </defs>
      <circle cx="50%" cy="50%" r="25%" filter="url(#halo2)"></circle>
    </svg>
  </body>

</html>