How to render a foreignObject SVG encoded with Base64 on browser

I have written the SVG code below. I want to encode it with Base64 and display it with data:image/svg+xml;base64,BASE64ENCODINGHERE. The issue is probably with foreignobject but I cannot see the text on the image. How can I solve this problem?

For this case the Base64 encoding is:

PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgcnk9IjEwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI1MCIgc3R5bGU9ImZpbGw6d2hpdGU7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGwtb3BhY2l0eTowLjE7c3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+

So, the link becomes:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj48c3R5bGU+ZGl2IHtmb250OiAxNHB4IHNlcmlmO2hlaWdodDoyMDBweDt3aWR0aDo0ODBweDttYXJnaW4tdG9wOjEwcHg7b3ZlcmZsb3c6IGF1dG87fS5iYXNlIHsgZm9udC1mYW1pbHk6IHNlcmlmOyBmb250LXNpemU6IDE0cHg7IH08L3N0eWxlPjxyZWN0IHg9IjAiIHk9IjAiIHJ4PSIxMCIgcnk9IjEwIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI1MCIgc3R5bGU9ImZpbGw6d2hpdGU7c3Ryb2tlOmJsYWNrO3N0cm9rZS13aWR0aDo1O2ZpbGwtb3BhY2l0eTowLjE7c3Ryb2tlLW9wYWNpdHk6MC45IiAvPjxmb3JlaWdub2JqZWN0IHg9IjgiIHk9IjgiIHdpZHRoPSI0OTAiIGhlaWdodD0iMjQwIj48dGV4dCB4PSIxMCIgeT0iMTYwIiBjbGFzcz0iYmFzZSI+Q2F0ZWdvcnk6eGF4YXhhPC90ZXh0PjxkaXYgPmhlYmVsZSBodWJlbGUgYnVtIGJhbSBidW08L2Rpdj48L2ZvcmVpZ25vYmplY3Q+PC9zdmc+

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
  <style>
    div {
      font: 14px serif;
      height: 200px;
      width: 480px;
      margin-top: 10px;
      overflow: auto;
    }

    .base {
      font-family: serif;
      font-size: 14px;
    }
  </style>
  <rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <foreignobject x="8" y="8" width="490" height="240">
    <text x="10" y="160" class="base">Category:xaxaxa</text>
    <div>hebele hubele bum bam bum</div>
  </foreignobject>
</svg>

Expected output: enter image description here

Result I got: enter image description here

Solution

It's foreignObject with a capital O. SVG is case sensitive except when it's embedded in HTML.
You need to specify that the div lives in the XHTML namespace
There's no such thing as a text element in HTML so if you want to keep that, move it from the foreignObject contents. I've just removed it. That gives us this...

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 250">
  <style>
div {
  font: 14px serif;
  height: 200px;
  width: 480px;
  margin-top: 10px;
  overflow: auto;
}

.base {
  font-family: serif;
  font-size: 14px;
}
  </style>
  <rect x="0" y="0" rx="10" ry="10" width="500" height="250" style="fill:white;stroke:black;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
  <foreignObject x="8" y="8" width="490" height="240">
<div xmlns="http://www.w3.org/1999/xhtml">hebele hubele bum bam bum</div>
  </foreignObject>
</svg>

and if you base64 encode that you get

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWluIG1lZXQiIHZpZXdCb3g9IjAgMCA1MDAgMjUwIj4KICA8c3R5bGU+CmRpdiB7CiAgZm9udDogMTRweCBzZXJpZjsKICBoZWlnaHQ6IDIwMHB4OwogIHdpZHRoOiA0ODBweDsKICBtYXJnaW4tdG9wOiAxMHB4OwogIG92ZXJmbG93OiBhdXRvOwp9CgouYmFzZSB7CiAgZm9udC1mYW1pbHk6IHNlcmlmOwogIGZvbnQtc2l6ZTogMTRweDsKfQogIDwvc3R5bGU+CiAgPHJlY3QgeD0iMCIgeT0iMCIgcng9IjEwIiByeT0iMTAiIHdpZHRoPSI1MDAiIGhlaWdodD0iMjUwIiBzdHlsZT0iZmlsbDp3aGl0ZTtzdHJva2U6YmxhY2s7c3Ryb2tlLXdpZHRoOjU7ZmlsbC1vcGFjaXR5OjAuMTtzdHJva2Utb3BhY2l0eTowLjkiIC8+CiAgPGZvcmVpZ25PYmplY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjQ5MCIgaGVpZ2h0PSIyNDAiPgo8ZGl2IHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIj5oZWJlbGUgaHViZWxlIGJ1bSBiYW0gYnVtPC9kaXY+CiAgPC9mb3JlaWduT2JqZWN0Pgo8L3N2Zz4=