I came accross a strange behaviour when using SVG with AngularJS. I'm using the [`$routeProvider`](http://docs.angularjs.org/api/ngRoute.$routeProvider) service to configure my routes. When I put this simple SVG in my templates, everything is fine:

```html
<div id="my-template">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <rect fill="red" height="200" width="300" />
    </svg>
    // ...
</div>

```

But when I add a filter, with this code for instance:

```html
<div id="my-template">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="blurred">
                <feGaussianBlur stdDeviation="5"/>
            </filter>
        </defs>
        <rect style="filter:url(#blurred)" fill="red" height="200" width="300" />
    </svg>
</div>

```

Then:

* It works on my **homepage**.
* With *Firefox*, the SVG isn't visible anymore on **the other pages**, but it still leaves space where it would have been. With *Chrome*, the SVG is visible, but not blurred at all.
* The SVG is visible again when I remove manually (with Firebug) the `filter` style.

Here is the routes configuration:

```js
$routeProvider
    .when('/site/other-page/', {
            templateUrl : 'view/Site/OtherPage.html',
            controller : 'Site.OtherPage'
    })
    .when('/', {
            templateUrl : 'view/Site/Home.html',
            controller : 'Site.Home'
    })
    .otherwise({
        redirectTo : '/'
    })
;

```

`[Fiddle](http://jsfiddle.net/Blackhole/chehd/2/)`

*Please notice that I've failed to reproduce the problem with Chrome in a Fiddle, although it "works" with Firefox.*

I've tried to no avail to create my whole SVG with `document.createElementNS()`.

Does someone has an idea of what is happening?