PptxGenJS icon indicating copy to clipboard operation
PptxGenJS copied to clipboard

Don't use IMG_BROKEN as png preview for all local / data url svg files on node

Open haakenlid opened this issue 1 year ago • 1 comments

Fix issue #963

The problem is that the png preview of svgs are used by LibreOffice impress, while MS PowerPoint uses the svg directly. However, Impress shows svg files fine, and don't need the png.

The same problem shows up in web preview of the pptx file if it's shared in Slack. I guess they maybe use LibreOffice to render the preview server side.

In the demo, the svg that is downloaded from Wikipedia show up fine, because PptxGenJS simply renames the svg to png and uses it as a "preview". However, the svg loaded from data url or from a local file will use the placeholder IMG_BROKEN png.

image

Here's the relevant part of the generated slide1.xml file for slide 1 created by the node demo.js Image example

Libreoffice will use the first embed "rId10", while powerpoint will display the inner one "rId11".

<a:blip r:embed="rId10">  // <- broken png image
  <a:alphaModFix amt="50000"/>
  <a:extLst>
    <a:ext uri="{96DAC541-7B7A-43D3-8B79-37D633B846F1}">
      <asvg:svgBlip xmlns:asvg="http://schemas.microsoft.com/office/drawing/2016/SVG/main" 
                             r:embed="rId11"/> // <- correct svg image
    </a:ext>
  </a:extLst>
</a:blip>

This PR will make local files and data urls work the same as http url svgs. The svg will be renamed to png and used as its own preview. Which seems to have caused no problems since #528 in 2019.

However. I don't really understand the reason behind the "png preview" and the <a:ext uri="{96DAC541-7B7A-43D3-8B79-37D633B846F1}"> tag at all. If you embed a svg using LibreOffice it will simply be included as <a:blip r:embed="rId10"> like any other image, and it seems to display fine everywhere.

haakenlid avatar Jan 11 '24 12:01 haakenlid