Aspose - SVG Not shown correctly when I generate a PPTX

Question

I've got the following SVG data:

<svg id="SvgjsSvg5244" width="907.6669999999999" height="352.7" xmlns="http://www.w3.org/2000/svg"
  version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"
  class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, 0)"
  style="background: transparent;">
    <foreignObject x="0" y="0" width="907.6669999999999" height="352.7">
        <div class="apexcharts-legend apexcharts-align-center position-right"
          xmlns="http://www.w3.org/1999/xhtml" bis_skin_checked="1"
          style="position: absolute; left: auto; top: 24px; right: 5px;">
            <div class="apexcharts-legend-series" rel="1" seriesname="EcoutexxxSoutienxpsychologique"
              data:collapsed="false" bis_skin_checked="1" style="margin: 2px 5px;">
                <span class="apexcharts-legend-marker" rel="1" data:collapsed="false"
                  style="background: rgb(10, 80, 110) !important; color: rgb(10, 80, 110); height: 12px; width: 12px; left: 0px; top: 0px; border-width: 0px; border-color: rgb(255, 255, 255); border-radius: 12px;"></span>
                <span class="apexcharts-legend-text" rel="1" i="0"
                  data:default-text="Ecoute%20-%20Soutien%20psychologique" data:collapsed="false"
                  style="color: rgb(55, 61, 63); font-size: 12px; font-weight: 400; font-family: Helvetica, Arial, sans-serif;">
                    Ecoute
                    - Soutien psychologique
                </span>
            </div>
        </div>
        <style type="text/css">

            .apexcharts-legend {
            display: flex;
            overflow: auto;
            padding: 0 10px;
            }
            .apexcharts-legend.position-bottom, .apexcharts-legend.position-top {
            flex-wrap: wrap
            }
            .apexcharts-legend.position-right, .apexcharts-legend.position-left {
            flex-direction: column;
            bottom: 0;
            }
            .apexcharts-legend.position-bottom.apexcharts-align-left,
            .apexcharts-legend.position-top.apexcharts-align-left, .apexcharts-legend.position-right,
            .apexcharts-legend.position-left {
            justify-content: flex-start;
            }
            .apexcharts-legend.position-bottom.apexcharts-align-center,
            .apexcharts-legend.position-top.apexcharts-align-center {
            justify-content: center;
            }
            .apexcharts-legend.position-bottom.apexcharts-align-right,
            .apexcharts-legend.position-top.apexcharts-align-right {
            justify-content: flex-end;
            }
            .apexcharts-legend-series {
            cursor: pointer;
            line-height: normal;
            }
            .apexcharts-legend.position-bottom .apexcharts-legend-series, .apexcharts-legend.position-top
            .apexcharts-legend-series{
            display: flex;
            align-items: center;
            }
            .apexcharts-legend-text {
            position: relative;
            font-size: 14px;
            }
            .apexcharts-legend-text *, .apexcharts-legend-marker * {
            pointer-events: none;
            }
            .apexcharts-legend-marker {
            position: relative;
            display: inline-block;
            cursor: pointer;
            margin-right: 3px;
            border-style: solid;
            }

            .apexcharts-legend.apexcharts-align-right .apexcharts-legend-series,
            .apexcharts-legend.apexcharts-align-left .apexcharts-legend-series{
            display: inline-block;
            }
            .apexcharts-legend-series.apexcharts-no-click {
            cursor: auto;
            }
            .apexcharts-legend .apexcharts-hidden-zero-series, .apexcharts-legend
            .apexcharts-hidden-null-series {
            display: none !important;
            }
            .apexcharts-inactive-legend {
            opacity: 0.45;
            }
        </style>
    </foreignObject>
    <g id="SvgjsG5246" class="apexcharts-inner apexcharts-graphical" transform="translate(22, 0)">
        <defs id="SvgjsDefs5245">
            <clipPath id="gridRectMaskwb7wmbsn">
                <rect id="SvgjsRect5248" width="648.6669999999999" height="352" x="-3" y="-1" rx="0" ry="0"
                  opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
            </clipPath>
            <clipPath id="gridRectMarkerMaskwb7wmbsn">
                <rect id="SvgjsRect5249" width="646.6669999999999" height="354" x="-2" y="-2" rx="0" ry="0"
                  opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect>
            </clipPath>
            <filter id="SvgjsFilter5257" filterUnits="userSpaceOnUse" width="200%" height="200%" x="-50%"
              y="-50%">
                <feFlood id="SvgjsFeFlood5258" flood-color="#000000" flood-opacity="0.45"
                  result="SvgjsFeFlood5258Out" in="SourceGraphic"></feFlood>
                <feComposite id="SvgjsFeComposite5259" in="SvgjsFeFlood5258Out" in2="SourceAlpha"
                  operator="in" result="SvgjsFeComposite5259Out"></feComposite>
                <feOffset id="SvgjsFeOffset5260" dx="1" dy="1" result="SvgjsFeOffset5260Out"
                  in="SvgjsFeComposite5259Out"></feOffset>
                <feGaussianBlur id="SvgjsFeGaussianBlur5261" stdDeviation="1 "
                  result="SvgjsFeGaussianBlur5261Out" in="SvgjsFeOffset5260Out"></feGaussianBlur>
                <feMerge id="SvgjsFeMerge5262" result="SvgjsFeMerge5262Out" in="SourceGraphic">
                    <feMergeNode id="SvgjsFeMergeNode5263" in="SvgjsFeGaussianBlur5261Out"></feMergeNode>
                    <feMergeNode id="SvgjsFeMergeNode5264" in="[object Arguments]"></feMergeNode>
                </feMerge>
                <feBlend id="SvgjsFeBlend5265" in="SourceGraphic" in2="SvgjsFeMerge5262Out" mode="normal"
                  result="SvgjsFeBlend5265Out"></feBlend>
            </filter>
        </defs>
        <g id="SvgjsG5250" class="apexcharts-pie">
            <g id="SvgjsG5251" transform="translate(0, 0) scale(1)">
                <g id="SvgjsG5252" class="apexcharts-slices">
                    <g id="SvgjsG5253" class="apexcharts-series apexcharts-pie-series"
                      seriesName="EcoutexxxSoutienxpsychologique" rel="1" data:realIndex="0">
                        <path id="SvgjsPath5254"
                          d="M 321.33349999999996 10.268292682926813 A 164.7317073170732 164.7317073170732 0 1 1 321.30474889339473 10.268295191934186 L 321.33349999999996 175 L 321.33349999999996 10.268292682926813"
                          fill="rgba(10,80,110,1)" fill-opacity="1" stroke-opacity="1" stroke-linecap="butt"
                          stroke-width="2" stroke-dasharray="0"
                          class="apexcharts-pie-area apexcharts-pie-slice-0" index="0" j="0" data:angle="360"
                          data:startAngle="0" data:strokeWidth="2" data:value="1"
                          data:pathOrig="M 321.33349999999996 10.268292682926813 A 164.7317073170732 164.7317073170732 0 1 1 321.30474889339473 10.268295191934186 L 321.33349999999996 175 L 321.33349999999996 10.268292682926813"
                          stroke="#ffffff"></path>
                    </g>
                    <g id="SvgjsG5255" class="apexcharts-datalabels">
                        <text id="SvgjsText5256" font-family="Helvetica, Arial, sans-serif"
                          x="321.33349999999996" y="306.78536585365856" text-anchor="middle"
                          dominant-baseline="auto" font-size="12px" font-weight="600" fill="#ffffff"
                          class="apexcharts-text apexcharts-pie-label" filter="url(#SvgjsFilter5257)"
                          style="font-family: Helvetica, Arial, sans-serif;"
                          svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">100.0%</text>
                    </g>
                </g>
            </g>
        </g>
        <line id="SvgjsLine5266" x1="0" y1="0" x2="642.6669999999999" y2="0" stroke="#b6b6b6"
          stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line>
        <line id="SvgjsLine5267" x1="0" y1="0" x2="642.6669999999999" y2="0" stroke-dasharray="0"
          stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line>
    </g>
    <g id="SvgjsG5247" class="apexcharts-annotations"></g>
</svg>

This graphic works correctly when opened in Windows 10 as a file, but when I try to load this graphic into a generated Powerpoint (.pptx), the foreignObject is missing.

I'm importing the SVG on slide via this code :

ISvgImage svgImage = new SvgImage(config.Svg);
IPPImage ppImage = presentation.Images.AddImage(svgImage);

presentation.Slides[slideId].Shapes.AddPictureFrame(
    ShapeType.Rectangle,
    i.X,
    i.Y,
    config.Largeur != 0 ? config.Largeur : i.Width,
    config.Hauteur != 0 ? config.Hauteur : i.Height,
    ppImage
);

Could someone tell me what is going on? It seems like the SVG data is identical.

Thank you

Answer 1

Unfortunately, I was unable to reproduce the problem you described. Please check your results using the latest version of Aspose.Slides for .NET if possible. If the issue persists, please share the following additional files and information:

• initial presentation file (if you used it)
• standalone code example (your code snippet contains unknown variables)
• full stack trace of the error
• OS version on which the code was executed
• .NET target platform in your app
• Aspose.Slides version you used

It would be great if you could provide the information on the Aspose.Slides forum. I work at Aspose as a Support Developer and would be happy to help you.