Как создать хеш (#) в URI данных в Firefox?

Question

У меня есть SVG, который содержит хэш (#).Теперь я хочу использовать SVG в URI данных img.Однако Firefox не будет отображать изображение.

Вот минимальный пример.Первый img отлично работает, а второй нет.

<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <text x="50" y="50">X</text>
</svg>' alt="" />
<img src='data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" height="100px" width="100px">
  <text x="50" y="50">#</text>
</svg>' alt="" />

https://codepen.io/anon/pen/GdwmKZ

Отлично работает в Chrome и Edge.