Using an Data URI SVG as a CSS background image

Backstory:

• Goal: create a triangular shadow that can be applied via CSS and is scale-independant (i.e. a vector, not a raster image)
• After much research (tho I'm certainly open to alternatives) I chose to use an SVG background image as a data uri (to avoid the extra HTTP request).
• I know that this can work: http://jsfiddle.net/6WAtQ/

Where I'm stuck:

• I created a simple svg triangle, with a Gaussian blur effect, if it's written directly in the HTML (as opposed to the CSS) the svg works perfectly: http://jsfiddle.net/RAKWB/

<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <polygon points="200,0 200,200 0,200" filter="url(#f1)"/>
</svg>​

• So I tried to replicate the above ( http://jsfiddle.net/6WAtQ/ ) using my own triangle svg,
• I replaced the hash signs with '%23', but no dice
• It's not working: http://jsfiddle.net/ZPWxK/1/

body {
  background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="