SVGs not displaying when converting to PDF using MS Word 'uses online Microsoft service' option

[JoshuaTruscott]

When the template has an SVG, the image renders as expected, but when saving the output document as PDF it shows 'This picture can't be displayed.

const buffer = await createReport({
  template: fs.readFileSync("template.docx"),
  additionalJsContext: {
        exampleSvg: async () => {
          return {
            width: 14,
           height: 8,
           data: [[SVG_BASE64_STRING]],
            extension: ".svg"
          };
        },
});
fs.writeFileSync("output.docx", buffer);

Example Base64 SVG used Template used Output document Document saved as PDF

Environment: MS Word 16.51 docx-templates v4.7.0 Node v14.2.0 Mac OS X v11.4

Reproduced using Preview and Adobe Acrobat Reader DC

Thank you

[jjhbw]

Thats super weird, I can't reproduce this when converting the output document you posted to pdf using Word 16.51. I could view it just fine, using Preview, macOS 10.14.6 (18G9216)).

Are there other factors at play that you can think of?

[JoshuaTruscott]

Oh how strange!

I have noticed that if you use Print as PDF it renders. It seems to only occur with electronic distribution enabled:

Can you reproduce it with that selected?

[jjhbw]

I have to change my privacy settings for that and checkbox some EULA, so i'd rather not try it...

Can you try what happens when you take docx-templates out of the equation entirely, and just copy the SVG into a new document just by using Word? If that works, it is likely a problem in the interaction between the mysterious 'microsoft online service' and SVG embeds, not docx-templates.

[JoshuaTruscott]

Sure, I have tested a blank doc with an SVG inserted manually (not generated) and it saves correctly.

[JoshuaTruscott]

Right clicking the generated SVG image and selecting 'Convert to Shape' fixes the issue if that helps narrow it down, let me know if theres anything else I can provide that might help.