Search code examples
svgms-wordpowerpointmask

Bad rendering of svg in powerpoint or word when using <mask> tag in the svg

When inserting a very simple svg image containing the <mask> tag into PowerPoint or Word, the outlines of the shapes in the mask are very degraded. It's even very bad when you stretch the image.

This is the svg sample code :

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve">
  <mask id="globalMask">
    <circle stroke="white" cx="125" cy="250" r="100" fill="white"/>
  </mask>

  <!-- bad rendering in powerpoint or word when using mask, zoom to see crisp... -->
  <rect x="0" y="0" width="500" height="500" fill="black" mask="url(#globalMask)"/>

  <!-- good rendering everywhere -->
  <circle cx="375" cy="250" r="100" fill="black"/>
</svg>

We tried with the very simple svg sample that works well on lot of svg reader, inkscape, chrome browser, firefox... But looks only bad when inserted in powerpoint and word (office 2021).

enter image description here

We expect that in the code example both circles will display well and the same without edge degradation.

Does anybody know a workaround to avoid this bad rendering with <mask> in office suite ?

We need <mask> to apply complex gradient with lot of <use> tag, so we cannot just remove <mask> usage.

Solution

  • Woooow, finally find a very strange workaround but a working workaround. We need to add a <rect> with a very low opacity in the <mask> to make office render well !

    see the modified sample code :

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="500" height="500" viewBox="0 0 500 500" xml:space="preserve">
  <mask id="globalMask">
    <circle stroke="white" cx="125" cy="250" r="100" fill="white"/>

    <!-- office suite hack to render well the bad part below ! -->
    <rect x="0" y="0" width="100%" height="100%" fill="black" opacity="0.0000000001"/>
  </mask>

  <!-- bad rendering in powerpoint or word when using mask, zoom to see crisp... -->
  <rect x="0" y="0" width="500" height="500" fill="black" mask="url(#globalMask)"/>

  <!-- good rendering everywhere -->
  <circle cx="375" cy="250" r="100" fill="black"/>
</svg>