Support for SVG images

[Krelborn]

Recent versions of office support embedding of SVG images in documents. Are there any plans to support SVG in addImage?

I've done some initial investigation to see if there was an easy way to make this work, but it looks more complicated than I'd hoped.

[gitbrent]

Hi @Krelborn

Well, it took long enough, but it does look as though SVG support is finally available in PowerPoint (current/2016 desktop and office.com).

I've added this an an enhancement. Thanks for the request.

[NeomMob]

It would be awesome. How can we help you on that?

[gitbrent]

Update: Support for SVG images now exists for web client users

var pptx = new PptxGenJS();
var slide = pptx.addNewSlide();
slide.addImage({
    path:'https://upload.wikimedia.org/wikipedia/commons/2/28/Cadenas-ferme-vert.svg',
    x:1, y:1, w:3.0, h:3.0
});
pptx.save('PptxGenJS-SVG');

[NeomMob]

Awesome! Thanks a lot for adding it so quickly. I made some test from path and it works very well. However, when trying with base64, it does not work (no image in the slide) example:

var svgData = 'image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA5NiA5NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaWQ9Ikljb25zX1N0b3B3YXRjaCIgb3ZlcmZsb3c9ImhpZGRlbiI+PHN0eWxlPi5Nc2Z0T2ZjVGhtX0JhY2tncm91bmQxX1N0cm9rZSB7IHN0cm9rZTojRkZGRkZGOyB9PC9zdHlsZT48Y2lyY2xlIGN4PSI0OCIgY3k9IjMzIiByPSIyIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBmaWxsPSIjMDBCMEYwIiBmaWxsLW9wYWNpdHk9IjEiLz48Y2lyY2xlIGN4PSI0OCIgY3k9IjczIiByPSIyIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBmaWxsPSIjMDBCMEYwIiBmaWxsLW9wYWNpdHk9IjEiLz48Y2lyY2xlIGN4PSI2OCIgY3k9IjUyIiByPSIyIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBmaWxsPSIjMDBCMEYwIiBmaWxsLW9wYWNpdHk9IjEiLz48Y2lyY2xlIGN4PSIyOCIgY3k9IjUyIiByPSIyIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjEiIHN0cm9rZS1vcGFjaXR5PSIxIiBmaWxsPSIjMDBCMEYwIiBmaWxsLW9wYWNpdHk9IjEiLz48cGF0aCBkPSIgTSA1MCAzOCBMIDQ2IDM4IEwgNDYgNTIgQyA0NiA1Mi41IDQ2LjIgNTMgNDYuNiA1My40IEwgNTYuNSA2My4zIEwgNTkuMyA2MC41IEwgNTAgNTEuMiBMIDUwIDM4IFoiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWRhc2hhcnJheT0iIiBzdHJva2UtZGFzaG9mZnNldD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjEiIGZpbGw9IiMwMEIwRjAiIGZpbGwtb3BhY2l0eT0iMSIvPjxwYXRoIGQ9IiBNIDQ4IDgxIEMgMzIuNSA4MSAyMCA2OC41IDIwIDUzIEMgMjAgMzcuNSAzMi41IDI1IDQ4IDI1IEMgNjMuNSAyNSA3NiAzNy41IDc2IDUzIEMgNzYgNjguNSA2My41IDgxIDQ4IDgxIEwgNDggODEgWiBNIDcxLjcgMjguNiBMIDc0LjcgMjUuNiBDIDc1LjggMjQuNCA3NS44IDIyLjYgNzQuNiAyMS40IEMgNzMuNSAyMC4zIDcxLjYgMjAuMiA3MC40IDIxLjMgTCA2NyAyNC44IEMgNjIuMiAyMS42IDU2LjcgMTkuNiA1MSAxOS4yIEwgNTEgMTUgTCA2MCAxNSBMIDYwIDkgTCAzNiA5IEwgMzYgMTUgTCA0NSAxNSBMIDQ1IDE5LjEgQyAyOS4xIDIwLjUgMTYuMyAzMi44IDE0LjMgNDguNyBDIDEyLjMgNjQuNiAyMS42IDc5LjcgMzYuNyA4NSBDIDUxLjggOTAuMyA2OC41IDg0LjUgNzcgNzAuOSBDIDg1LjUgNTcuMyA4My4xIDM5LjcgNzEuNyAyOC42IEwgNzEuNyAyOC42IFoiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWRhc2hhcnJheT0iIiBzdHJva2UtZGFzaG9mZnNldD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjEiIGZpbGw9IiMwMEIwRjAiIGZpbGwtb3BhY2l0eT0iMSIvPjwvc3ZnPg==';
var imageOptions = {};
imageOptions['x'] =100;
imageOptions['y'] = 100;
imageOptions['w'] =100;
imageOptions['h'] = 100;
imageOptions['data'] = svgData;
slide.addImage(imageOptions);

Do you think I am doing something wrong?

[gitbrent]

I have not tested the use of data as of yet; I was also hoping to add support for passing the SVG XML as well.

[NeomMob]

From SVG xml would be awesome! Thanks for your work.

[gitbrent]

Update: SVG images can now be created using either data or path.

I've added a demo for both cases in the demo.

[gitbrent]

NOTE SVG images are only supported in web browsers and browser-based apps (Angular, etc.) as <canvas> is required

[clement-igonet]

Issue closed but nodejs (server) version is not implemented. Could we reopen until support or split thr issue in two (browser and server) ?

[gitbrent]

Hi @clement-igonet

The only way to provide support for SVG on Node is to include an entire browser engine as a module - as the conversion used is Canvas-based - so I've opted to not include that feature on Node.

[gitbrent]

SVG images can be generated in Node again! See Issue #515 and Pull #528

Coming in Version 3.0

[Sher-V]

Using path like: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"...' I get empty slide @NeomMob, @gitbrent did you find the solution?

If i encode my string into base64 I get such things on slide '%OA'.

[gitbrent]

@Sher-V - i'm guessing the < and > characters are messing with the XML. The library doesn't make any attempts to escape such characters in data strings.

[chrisv-dev]

I experienced an issue while opening a generated pptx with LibreOffice Impress. It looks like adding a SVG image doesn't work well in this case (at least when using path). When the image is scaled up, it becomes blurry (see image).

Using the same svg (local file) and adding it to a slide (drag and drop .svg into LibreOffice Impress) is working fine:

Tested with: LibreOffice Impress, version 7.1.8.1 Example: https://codesandbox.io/s/goofy-carson-5pzyl

[gitbrent]

@chrisv-dev - this appears to be specific to Libre-Office as an SVG in PowerPoint retains its clean shape upon resizing. Please open a new issue and provide sample output from LO so i can examine the XML.