Svg to png not working, suspicious differences in svg elements

I am having a hard time figuring out why two different svg are making my javascript work in one instance but not in the other. I only changed the svg elements in both examples, one works and the other doesn't. Here is the code in two jsFiddles. Working example I got from here .

Ultimately my goal is to keep the current svg element of the floor plan and insert the transformed png as an inline img inside a rich text area. It's like you took a screenshot of the floor plan and nested it in the rich text area you see on support sites. I'm just having problems converting to png.

Working: JsFiddle

Doesn't work: JsFiddle

Here is the js, I cannot add the svg code, otherwise it will move me to the Stackoverflow character limit.

    var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var png = canvas.toDataURL("image/png");
  document.querySelector('#png-container').innerHTML = '<img src="' + png + '"/>';
  DOMURL.revokeObjectURL(png);
};
img.src = url;

      

        
        
        
      

    

Edit:

I have since been deprecated on this code by omitting the png / canvas transforms and trying to put the serialized svg string right in the rich text area, but IE gets an error and non-default namespace declarations should not have an empty URI. Line: 1, column142

var svgString = new XMLSerializer().serializeToString(document.querySelector('#svg2'));

var img = new Image();

var url = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgString); 
img.onload = function() {

    document.querySelector('.ze_body').innerHTML = '<img src="'+url+'"/>';

};
img.src = url;

      

        
        
        
      

    

Also, I think it would help if I showed more about the structure of how this rich text area is currently sitting. This is none of our business, its the product we use and I am just trying to get the cards to be inserted in the description area so that it can live with the ticket. The only access we have is js, caused by the rules in the form. Screenshot of ze_body element as it is in the DOM