While there are numerous solutions on Stack Overflow detailing how to append an SVG in a div, none of them have proven successful for me. This could be due to my lack of experience with SVGs.
Therefore, I am generating an SVG on my node server and then constructing a JSON object that includes the SVG along with some other data.
svgFiles.push({
'file': svgDump, //This contains the well-created SVG
'vp': JSON.stringify(viewport),
'page': pageNum
});
I am then sending this object back as a response to my AngularJS code.
$http({ ... }).then(function callback(resp) { // request to node server
var svg = resp.data.file;
var container = document.createElement('div');
var oldContent = container.innerHTML; // There will be an array of objects with SVG data, so I need the 'APPEND' functionality
// Currently assuming only 1 object for demo purposes
container.innerHTML = oldContent + svg;
})
Having saved my SVGs in a variable, I expected that appending it to any DIV would suffice.
However, when I attempted this, the result appeared as plain text, including elements like @font-face and src.
I suspect there is something crucial that I am overlooking or not executing correctly. How can I accomplish this task?