SVG in node.js doesn't work

[Evgenus]

Hi.

I'm trying to build a presentation on the server-side (express) containing SVGs.
Tried on versions 3.0, 3.3, 3.6 the result is the same. I've got an image inside of the presentation indicating an error. Also doesn't work in tests. It is confusing because I see lots of issues fixed and also some remarks in comments and in the changelog.

Can you please clarify if that function should work? Maybe I'm doing something wrong? Maybe missing some dependency?

Will appreciate any reply.

[tjohannto]

Maybe this helps. It works for me like this:

function b64EncodeUnicode(str) {
return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p) {
	return String.fromCharCode(+("0x" + p));
}));
}
const serializer = new XMLSerializer()
, clone = node.cloneNode(!0) //node equals the svg html node
, xmlns = "http://www.w3.org/2000/xmlns/"
, xlinkns = "http://www.w3.org/1999/xlink"
, svgns = "http://www.w3.org/2000/svg";
clone.setAttributeNS(xmlns, "xmlns", svgns);
clone.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
const dataStr = 'data:image/svg+xml;base64,' + b64EncodeUnicode(serializer.serializeToString(clone));

The string created I can then use in imgOptions Object.

const imgOptions = {};
imgOptions.x = posX;
imgOptions.y = posY;
imgOptions.w = chartWidth;
imgOptions.h = chartHeight;
imgOptions.data = dataStr ;

I don't know what the demo does but this creates working Presentations with v 3.4.0

[gitbrent]

@Evgenus - i'm not seeing this issue, the node Image demo works fine.

Looking at the demo code, it refs 2 SVGs: a base64 one (which should always work) and a remove file:
wikimedia_svg: { path: "https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@master/demos/common/images/lock-green.svg" }

// BOTTOM-RIGHT:
slide.addText("Type: SVG", { x: 9.5, y: 3.3, w: 4.0, h: 0.4, color: "0088CC" });
slide.addImage({ path: IMAGE_PATHS.wikimedia_svg.path, x: 9.5, y: 3.8, w: 2.0, h: 2.0 }); // TEST: `path`
slide.addImage({ data: SVG_BASE64, x: 11.1, y: 5.1, w: 1.5, h: 1.5 }); // TEST: `data`

Ensure your demos directly has all the modules files, etc.

=> node demo.js Image -local


--------------------==~==~==~==[ STARTING DEMO... ]==~==~==~==--------------------

* pptxgenjs ver: 3.7.0-beta-20210521-2050
* save location: /Users/brentely/GitHub/PptxGenJS/demos/node

--------------------==~==~==~==[ ...DEMO COMPLETE ]==~==~==~==--------------------


EX1 exported: PptxGenJS_Demo_Image_20210706193029030.pptx

[haakenlid]

Can this issue be reopened?

The problem is caused on line 110 in gen-media.ts

PptxGenJS/src/gen-media.ts

Lines 104 to 115 in 035cf6b

	// B: SVG: base64 data still requires a png to be generated (`isSvgPng` flag this as the preview image, not the SVG itself)
	layout._relsMedia
	.filter(rel => rel.isSvgPng && rel.data)
	.forEach(rel => {
	if (fs) {
	// console.log('Sorry, SVG is not supported in Node (more info: https://github.com/gitbrent/PptxGenJS/issues/401)')
	rel.data = IMG_BROKEN
	imageProms.push(Promise.resolve().then(() => 'done'))
	} else {
	imageProms.push(createSvgPngPreview(rel))
	}
	})

The console error message was commented out after this issue was presumed to have been fixed, but the next line still embeds a placeholder error image, which is displayed in some viewers, and ignored in others.

I've opened a PR #1315 that will fix this. However it might be time to reconsider whether this png preview is needed at all.

[haakenlid]

Steps to confirm that this is a bug in PpptxGenJS:

 cd demos/node
 npm install
 node demo.js Image
 unzip PptxGenJS_Demo_Image_<timestamp>.pptx 

In the folder demos/node/ppt/media you will find all images embedded in the demo pptx file

The file Image-1-7.png looks fine, since it's really the same file as Image-1-8.svg only renamed.
The file Image-1-9.png is a real png created from the PptxGenJS placeholder IMG_BROKEN. This will be shown in LibreOffice Impress instead of Image-1-10.svg.

[caike-venngage]

hey @Evgenus were you able to make this work? node version doesn't work for me either. I'm using v3.12

only work on a the new office

[afishhhhh]

Steps to confirm that this is a bug in PpptxGenJS:

cd demos/node
npm install
node demo.js Image
unzip PptxGenJS_Demo_Image_.pptx
In the folder demos/node/ppt/media you will find all images embedded in the demo pptx file

The file Image-1-7.png looks fine, since it's really the same file as Image-1-8.svg only renamed. The file Image-1-9.png is a real png created from the PptxGenJS placeholder IMG_BROKEN. This will be shown in LibreOffice Impress instead of Image-1-10.svg.

same issue @gitbrent