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" >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

CodePudding user response：

1. It's foreignObject with a capital O. SVG is case sensitive except when it's embedded in HTML.
2. You need to specify that the div lives in the XHTML namespace
3. 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=