Inserting svg in office-js

Question

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)

Sadly nope - though i did come across the ScriptLabs demo seemed pretty good. I've also been keeping an eye out at the office-js github repo for the functionality I need — Todor Todorov, Jul 14 '17 at 20:08

score 1 · Answer 1 · answered Mar 17 '19 at 13:51

Here's an example how to insert SVG content into a word document:

https://gist.github.com/barisbikmaz/73526f81e1425845fc199506ff871429

Relevant code snippet:

const svgImage = '<svg><rect x="0" y="0" height="50" width="50" style="stroke:#ff0000; fill:#0000ff" /></svg>';

Office.context.document.setSelectedDataAsync(svgImage, { coercionType: Office.CoercionType.XmlSvg, imageLeft: 220, imageTop: 220, imageWidth: 100 }, function(result) {
     console.log(result);
});

Note:

imageLeft and imageTop are ignored by Word, see https://learn.microsoft.com/en-us/javascript/api/office/office.document?view=office-js

Best regards, Rashid

Is such a thing possible with the regular COM API instead of the JS add-in API? — Simpleton, Nov 18 '20 at 14:46

Juan Balmori · Accepted Answer · 2016-09-23T00:20:50.270

0

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.

edited Sep 23 '16 at 00:20

answered Sep 23 '16 at 00:09

Juan Balmori

4,898
1
8
17

Office now supports SVG: https://support.office.com/en-us/article/Work-with-SVG-images-in-Microsoft-Office-2016-69f29d39-194a-4072-8c35-dbe5e7ea528c – Diode Dan Sep 26 '17 at 04:57
Yes, it’s in our backlog to add support to it in the API. Don’t have a specific date yet. Thanks for following up. – Juan Balmori Sep 26 '17 at 16:49
Inserting an SVG file, or the ability to compose custom SVG code? I would definitely want the ability to insert custom SVG rendered by JS or something similar. Imagine the ability to make custom icons/diagrams with `` tags that you could update from Excel `Cells` – Diode Dan Sep 26 '17 at 20:14
2

the idea is that you can compose the SVG and then insert it or replace an exiting object in the document. – Juan Balmori Sep 27 '17 at 20:47
@JuanBalmori Any progress since then? I'd like to insert an SVG into a Word document using the C++ COM API. I couldn't find a function like `setSelectedDataAsync` mentioned below, InsertFile() and InsertXML() didn't help either. – Simpleton Nov 18 '20 at 14:45

Inserting svg in office-js

2 Answers2