SVG not loading in gallery (works in Desktop)

[Anonymous]

I created the following DAX measure to produce an SVG image:

Calc Red X = "data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'
 width='19.000000px' height='19.000000px' viewBox='0 0 32.000000 30.000000'
 preserveAspectRatio='xMidYMid meet'>
<g transform='translate(0.000000,30.000000) scale(0.100000,-0.100000)'
fill='#FD625E' stroke='none'>
<path d='M55 240 c-3 -5 12 -29 34 -52 l40 -43 -42 -42 c-32 -34 -38 -46 -29
-55 9 -9 20 -4 50 25 21 20 42 37 48 37 6 0 25 -16 44 -35 19 -19 40 -35 47
-35 24 0 13 34 -24 72 l-37 38 37 38 c63 65 41 89 -24 26 l-37 -36 -31 22
c-16 13 -32 29 -35 37 -6 15 -32 18 -41 3z'/>
</g>
</svg>"

I have set the Data Category to Image URL. This works great in desktop, but the images won't load on the service.

[v-qiuyu-msft]

Hi @Anonymous,

If I open your pbix file in Power BI desktop version 2.63.3272.40461 and publish the report to service, the red X image displays fine, please update your desktop to the same version as ours then republish the report to test again. 

Best Regards,
Qiuyun Yu 

[Anonymous]

Works in Chrome only.....  Empty image in Edge and broken link in IE.

 @v-qiuyu-msft

[v-qiuyu-msft]

Hi @Anonymous,

I have reported this issue internally: CRI 89897572. Will update here once I get any information. 

Best Regards,
Qiuyun Yu 

[v-qiuyu-msft]

Hi @Anonymous,

I got information below: 

I modified the SVG until it worked in Edge and IE - looks like Microsoft browsers don't support use of the preserveAspectRatio SVG attribute within an image src tag. The red X seems to render fine without preserveAspectRatio.

Best Regards,
Qiuyun Yu 

[Anonymous]

Thank you. @v-qiuyu-msft

[Anonymous]

Hi @v-qiuyu-msft  - I'm having pretty much exactly the same error.  I have an SVG which works fine on Desktop.  Up until a couple of days ago it also worked fine on Service.  However, now on Service it shows a broken image icon as below.  

I have updated Desktop to the latest February update (2.66.5376.2161 19.02 x64) and re-published to Service and it's still not working there.

The measure which generates the SVG is as follows:

Chart - Current =

var BackGrndPercentValue = IF([Percent - Current] >.9999, .9999, [Percent - Current])

var BackGrndPercent = BackGrndPercentValue * 360

var BackGrndCirclePercent = 180 - BackGrndPercent

var BackGrndShortDistance = if(BackGrndCirclePercent < 0, 1,0)

var BackGrndRadians = RADIANS(BackGrndCirclePercent)

var BackGrndXArcEnd = sin(BackGrndRadians)

var BackGrndYArcEnd = cos(BackGrndRadians)

var colour = [Colour - Current]

var PercentValue = ROUND(([Percent - Current]*100),0)

return

"data&colon;image/svg+xml;utf8,<svg

xmlns:dc='http://purl.org/dc/elements/1.1/'

xmlns:cc='http://creativecommons.org/ns#'

xmlns:svg='http://www.w3.org/2000/svg'

xmlns='http://www.w3.org/2000/svg'

    viewBox='-1 -1 2 2.25'>

    <path d='M 0 -1 A 1 1 0 " & BackGrndShortDistance & " 1 " & BackGrndXArcEnd & " " & BackGrndYArcEnd & " L 0 0 z' fill='rgb( " & colour & ")'></path><text x='-0.35' y='0.15' font-size='0.4' font-family='Segoe UI'>" & PercentValue & "% </text>

</svg>"

Thanks

Regards, David

p.s. I don't think it's too relevant, but the SVG image it generates is a pie chart with text showing the percentage in front of it, as follows:

[ducthangho]

Hi, 

i have some problem relate SVG image.

I use Image visual(red circle in the picture below) to show SVG image, it works well in Power BI destop.

But when i publish in Power BI Service, it is not display.

Detail is below.

Please help me!

Thank you,

David

[roselilly23]

I am also having the exact same error, as mentioned above. 

[ducthangho]

Hi Community,

Thank you for showing us about svg image measure by Image( Cloud Scope). I use it and it works well in Power BI Destop. But the image is not display in Power BI service when i publish them. Do you know why? Thank you very much!