0

I make a request to my back-end which sends me an SVG image in the form of XML data. I want to render this image on my front-end, but document.getElementById("test").innerHTML = data; results in [Object XMLDocument] getting displayed inside my #test div rather than an SVG image actually showing.

How can I get the actual SVG to render?

$.ajax({
  type: 'get', //Request type
  dataType: 'xml', //Data type - we will use JSON for almost everything 
  url: '/uploads/rects.svg', //The server endpoint we are connecting to
  success: function(data) {
    console.log("svgieig!!!", data);
    document.getElementById("test").innerHTML = data;
  })
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Stoodent
  • 155
  • 1
  • 9
  • @armagedescu that's going to do the same as the code the OP is already using. For this to work you need to render the SVG on to a `canvas`, as shown in the duplicate – Rory McCrossan Mar 05 '20 at 16:04
  • 1) `innerHTML` does, but your comment uses `innerText`. 2) SVG XML is not HTML. This is why it needs to be rendered on a `canvas`. I'd suggest researching SVG if you're confused about that. – Rory McCrossan Mar 05 '20 at 16:13
  • ... `I want to render this image on my front-end` – Rory McCrossan Mar 05 '20 at 16:18
  • Probably should be used data.responseText or something like that instead of just data – armagedescu Mar 05 '20 at 16:19
  • @RoryMcCrossan As I said. OP is breaking the widely opened doors. A good practice is to use the debugger in the browser, and any issue is instantly visible. – armagedescu Mar 05 '20 at 16:22
  • `Probably should be used data.responseText or something like that instead of just data` Again, no. jQuery passes the responseText directly to the `success` handler function as an argument, parsed if necessary based on the MIME type of the response. Please stop guessing at answers. All it does is add confusion to the people trying to learn. – Rory McCrossan Mar 05 '20 at 16:39

0 Answers0