Cannot compile SVG into Handlebars HTML template

Question

I am compiling handlebars templates on the backend to send as an HTML email message. Some of my messages need to contain server-generated SVGs - QRCodes.

I made a simple Handlebars helper using an existing library - qrcode-svg . The code looks like:

Handlebars.registerHelper('qrcode', (data) => {
  const svg = new QRCode({
    content: data,
    width: 90,
    height: 90,
    xmlDeclaration: false,
    join: true
  }).svg();
  return svg;
});

The library that I am using is working fine standalone. My template has a fragment like:

            {{#each tickets}}
            <div style="...">
              <div style="...">
                {{{qrcode payload}}}
              </div>
              <div>{{title}}</div>
              <div>{{sequence}}</div>
            </div>
            {{/each}}

If I use the no-escape {{{...}}} version or set noEspace to true in Handlebars options, I get a bunch of <u></u> inside my HTML email.

If I use {{qrcode payload}} normally, I do the an svg, only it is "<svg.../>" eg my svg is surrounded by double quotes and the email does not render correctly. I see not the SVG, but the HTML code representing it.

What should I do?

Answer 1

The <u></u> code you mention makes me think you checked this on Gmail's desktop webmail, which does not support neither embedded SVG nor external SVG .

If your image is an essential part of your content and you want most people to see it, make sure to use a better supported format like JPG, GIF or PNG.

Answer 2

I ended up doing something else. Forked the node-svg library and taught it to print HTML tables. If useful, feel free to use/clone/fork it from https://github.com/Diophant/qrcode-svg-table