title: SVG images for a Teams bot
body: <p>I am trying to make a text extension for MS Teams that returns math formulas processed with MathJax as a hobby project. I am very inexperienced with most components of the framework, so my question could be silly. In brief, I cannot get SVG images in responses to render.</p>
  <p>I get this output from MathJax:</p>
  <pre><code>mathJaxOut = {
     speakText: 'a+b',
     svg: '&lt;svg xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;5.068ex&quot; height=&quot;2.343ex&quot; style=&quot;vertical-align: -0.505ex;&quot; viewBox=&quot;0 -791.3 2181.9 1008.6&quot; role=&quot;img&quot; focusable=&quot;false&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; aria-labelledby=&quot;MathJax-SVG-1-Title&quot;&gt;\n' +
          '&lt;title id=&quot;MathJax-SVG-1-Title&quot;&gt;a+b&lt;/title&gt;\n' +
          '&lt;defs aria-hidden=&quot;true&quot;&gt;\n' +
          '&lt;path stroke-width=&quot;1&quot; id=&quot;E1-MJMATHI-61&quot; d=&quot;M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z&quot;&gt;&lt;/path&gt;\n' +
          '&lt;path stroke-width=&quot;1&quot; id=&quot;E1-MJMAIN-2B&quot; d=&quot;M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z&quot;&gt;&lt;/path&gt;\n' +
          '&lt;path stroke-width=&quot;1&quot; id=&quot;E1-MJMATHI-62&quot; d=&quot;M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z&quot;&gt;&lt;/path&gt;\n' +
          '&lt;/defs&gt;\n' +
          '&lt;g stroke=&quot;currentColor&quot; fill=&quot;currentColor&quot; stroke-width=&quot;0&quot; transform=&quot;matrix(1 0 0 -1 0 0)&quot; aria-hidden=&quot;true&quot;&gt;\n' +
          ' &lt;use xlink:href=&quot;#E1-MJMATHI-61&quot; x=&quot;0&quot; y=&quot;0&quot;&gt;&lt;/use&gt;\n' +
          ' &lt;use xlink:href=&quot;#E1-MJMAIN-2B&quot; x=&quot;751&quot; y=&quot;0&quot;&gt;&lt;/use&gt;\n' +
          ' &lt;use xlink:href=&quot;#E1-MJMATHI-62&quot; x=&quot;1752&quot; y=&quot;0&quot;&gt;&lt;/use&gt;\n' +
          '&lt;/g&gt;\n' +
          '&lt;/svg&gt;',
      width: '5.068ex',
      height: '2.343ex',
      style: 'vertical-align: -0.505ex;'
  }
  </code></pre>
  <p>I then change the output above to something like this:</p>
  <pre><code>// does stuff
  var svg = {
     &quot;url&quot;: &quot;data:image/svg+xml;utf8,&quot; + mathJaxOut.svg,
  }
  var aCard = new builder.HeroCard();
  aCard.text(&quot;MathJax response: Success&quot;).images([svg]);
  
  var attachments = [];
  attachments.push(card.toAttachment());
  var response = teams.ComposeExtensionResponse.result('list').attachments(attachments).toResponse();
  
  Send the response to teams
  callback(null, response, 200);
  </code></pre>
  <p>The image in received card does not get rendered. However, when I try to draw something simple like</p>
  <pre><code>&quot;data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='100' height='100'&gt;&lt;circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /&gt;Sorry, your browser does not support inline SVG.&lt;/svg&gt;&quot;
  </code></pre>
  <p>everything works as expected.</p>
  <p>Could it be that I need to do something else to <code>mathJaxOut.svg</code>?</p>