SVG filter on inline symbol

I am having a hard time applying a filter to an inline SVG symbol. I can make it work fine in a normal external SVG file but as soon as I make it inline with an HTML document, the filtered objects disappear. Is there anything I'm missing with the filter attribute? This fails for me in an up to date Chrome 57.

<html>
<body>

<svg style="display:none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
  <filter id="blur_inline">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
  </filter>
    
  <symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
  </symbol>
  
  <symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
  </symbol>

</defs>

</svg>


<p>Symbol with a green and blurred blue box:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#filtered" x="10" y="35" ></use>
</svg>

<p>Second symbol with no filter applied:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>


</body>
</html>

Solution

Setting your SVG to display:none will make it non-functional because it disables all CSS.

<html>
<body>

<svg width="0" height="0">
<defs>
  <filter id="blur_inline">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
  </filter>
    
  <symbol id="filtered" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue" filter="url(#blur_inline)"/>
  </symbol>
  
  <symbol id="no_filter" width="80mm" height="50mm" viewBox="0 0 80 50" preserveAspectRatio="xMinYMin meet">
    <rect id="a" x="0" y="10" width="30" height="20" fill="green"/>
    <rect id="e" x="40" y="10" width="30" height="20" fill="blue"/>
  </symbol>

</defs>

</svg>


<p>Symbol with a green and blurred blue box:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#filtered" x="10" y="35" ></use>
</svg>

<p>Second symbol with no filter applied:</p>

<svg width="100mm" height="50mm">
  <use xlink:href="#no_filter" x="10" y="35" ></use>
</svg>


</body>
</html>