Svg properties "fill=transparent" and background color is not being reflected in PowerPoint slide and are instead just black

[nikhilatsap]

SVG properties "fill=transparent" and background color is not being respected in PowerPoint slide and are instead just turned to black color when any SVG is added to PowerPoint through the setSelectedDataAsync method

Provide required information needed to triage your issue

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: PC Desktop, Office on the web
• Host [Excel, Word, PowerPoint, etc.]: PowerPoint
• Office version number: ______
• Operating System: Windows and Mac
• Browser (if using Office on the web): Chrome

Expected behavior

The svg properties should be respected in powerpoint and the svg should retain its styles and its fill colors, overall the svg should look like it looks before passing it to the setSelectedDataAsync method

Current behavior

Currently the svg image turns black wherever there is a "fill=transparent" property and wherever the svg tag itself has a style="background-color:{any-color of your choice};". The svg after getting pasted to the slide does not look as it looks in any other scenario outside PowerPoint, If the same svg that was passed to PowerPoint api is opened in a browser or svg renderer it shows everything correctly

Steps to reproduce

1. const chart = `Gross Margin per LocationCreated with Highstock 2.1.9100.00%<style> .vizTempHideDataPoint {
   visibility: hidden;
   }

.trellis-limit-chart-container {
display: table;
height: 100%;
width: 100%;
border: 1px gray;
}

.trellis-limit-chart-message {
display: table-cell;
vertical-align: middle;
text-align: center;
opacity: 0.5;
font-size: 12px;
}

.vizParentContainer {
height: 100%;
width: 100%;
}

.viz-export {
font-size: 14px;
font-family: "72", "72full", Arial, Helvetica, sans-serif;
}

.vizLegend .highcharts-container > svg > :not(.highcharts-legend):not(defs),
.vizLegend div:not(.highcharts-container) {
display: none;
}

.sapFpaBiRichTextEditorTextEditor {
font-family: lato;
word-wrap: break-word;
}

.sapFpaBiRichTextEditorTextEditor p, .sapFpaBiRichTextEditorTextEditor ul, .sapFpaBiRichTextEditorTextEditor ol {
margin: 0;
}

.sapFpaBiRichTextEditorTextEditor blockquote {
margin: 0 0 0 20px;
}

.sapFpaBiRichTextEditorTextEditor .negative {
border-left: 5px solid rgb(201, 2, 74);
padding: 5px;
background-color: rgb(247, 247, 247);
}

.sapFpaBiRichTextEditorTextEditor .positive {
border-left: 5px solid rgb(55, 150, 45);
padding: 5px;
background-color: rgb(247, 247, 247);
}

.headerSection-container {
width: 100%;
font-family: "72",Arial,Helvetica,sans-serif;
padding: 2px;
display: contents;
}

.headerSection-titleRow {
color: rgb(35, 31, 32);
font-family: "72",Arial,Helvetica,sans-serif;
padding: '4px 4px 4px 2px';
}

.headerSection-titleRow span, .headerSection-titleRow div, .headerSection-titleRow input {
margin: 0px;
padding: 0px;
}

.headerSection-titleRow, .headerSection-titleRow div {
font-size: 16px;
}

.headerSection-subtitleRow {
overflow: auto;
flex-grow: 0;
color: rgb(166, 168, 171);
font-family: "72",Arial,Helvetica,sans-serif;
display: flex;
flex-direction: row;
align-items: center;
padding: '4px 4px 4px 2px';
}

.headerSection-subtitleRow p, .headerSection-subtitleRow span {
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}

.headerSection-subtitleRow span, .headerSection-subtitleRow div, .headerSection-subtitleRow input {
padding: 0px;
}

.headerSection-subtitleRow, .headerSection-subtitleRow div {
font-size: 11px;
}

</style>`

2. render this chart in any svg renderer and see that this renders with transparent background elements

3. pass this chart to setSelectedDataAsync method with coercionType XmlSvg and see the pasted image in powerPoint slide and notice how its black in background.

Link to live example(s)

1. ---

2. ---

3. ---

Provide additional details

1. ---

2. ---

3. ---

Context

This is affecting the release of one of our very important features which will allow the users to paste svgs instead of pngs into their slides for better image quality

Useful logs

• Console errors
• Screenshots
• Test file (if only happens on a particular file)

Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.