svg PITA bug of the day

Today I've been struggling to understand why this does not work in Firefox, but is OK in Chrome:

<!DOCTYPE html>
    <meta charset="UTF-8">
    <base href="/">
      <symbol id="pretty-circle">
        <circle cx="15" cy="15" r="10"/>
      <use xlink:href="#pretty-circle"></use>

Here is a codepen snippet to test if your browser display a circle or not.

I found the answer here:

Yes, that innocuous <base> tag is the culprit.

Angry frustrated face

Beware of this bug, as now with Angular 2 a base meta tag has to be there by default.