Search code examples
javascriptsvghandlebars.jshtml-email

Cannot compile SVG into Handlebars HTML template

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.../>" e.g. 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?

Solution

  • 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.