Search code examples
office-jsofficedev

Inserting svg in office-js

Background

I am developing an Office add in using the Word Javascript APIs to insert some charts in the document.

My Current approach is as follows:
Generate SVG image in the task pane=> draw image on canvas with canvg => get canvas image as png => insert in Word Document

This works fine except for one thing - the png image itself is blurry and there is quite a lot of quality loss because of the conversion.

Question
Is it possible to use the Body.insertInlinePictureFromBase64 with a vector graphics image?

Some Notes:

  • Tried inserting the image as plain XML - didn't work
  • Tried encoding the svg string into base64 and passing it through the insertInlinePicture method to insert - couldn't get it to work just shows a broken image (probably because it expects an actual bitmap image rather than vector image)
Solution

  • Todor - Great question. The problem is that vector file formats are not supported in Office. In fact if you try to insert an *.svg image directly from the insert->pictures functionality in Word, you will see that the image will not be inserted as you expect. That's true for Word Online as well, for instance.

    I recommend you to try jpg, jpeg, png, gif, bmp, tif or tiff formats.

    Thanks! Juan.