Broken SVG image in Power Bi desktop

[itsmebvk]

Hi Folks,

i am trying to create an INfograph using Follwing SVG code. But for some reason it is not showing in the report instead it's showing as broken.

can you please the mistake I am doing?

Thanks in advance.

icon =

VAR SVGPath = "M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z"

VAR _Val = sum('YTD Customer Measures'[Value])

VAR percentagearea = _Val*100

VAR fillArea = 100- percentagearea

VAR percentagecolor = "#018161"

VaR fillcolour = "#E6E6E6"

VAR SVGIIcon = "<path d=' "& SVGPath &" '/>"

var svg_start = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.W3.org/2000/svg' viewBox='0 0 100 100'>"

var svg_end = "</svg>"

// Define the colours for the percentage and fill

var percentageColourdef = "<g style='fill:" & percentageColor & "; clip-path:url(#eleclip)'>" & SVGIIcon & "</g>"

var fillcolourdef = "<g style='fill:" & fillcolour & ";'>" & SVGIIcon & "</g>"

// Horizontal orientation (comment this if you want a vertical orientation)

var orientation = "<defs><clipPath id='eleclip'>

<rect x='0' y='" & fillarea & "' width='100' height='" & percentagearea & "' />

</clipPath></defs>"

return

svg_start & orientation & fillcolourdef & percentageColourDef & svg_end

[OwenAuger · Accepted solution]

Hi @itsmebvk 

I had a closer look at the code.

The earlier code you posted had a translation transformation of (-1056 -223) to bring the star within coordinate range (0,0) - (100,100). However the latest code didn't have this.

To simplify things, I just modified the points in SVGPath by (-1056 -223).

One thought: you may want to adjust how the percentage is translated to coordinates, as I could see the star starts being filled somewhere greater than 0%, and is completely filled before 100%.

In any case, below is the resulting measure, which produces a valid star which "fills up" as the measure value increases from 0% to 100%.

(I put this through DAX Formatter so the formatting has changed slightly)

icon =
VAR SVGPath = "M88 38 58 38 48 8 38 38 8 38 31 58 22 88 48 70 74 88 65 58Z"
VAR _Val =
    SUM ( 'YTD Customer Measures'[Value] )
VAR percentagearea = _Val * 100
VAR fillArea = 100 - percentagearea
VAR percentagecolor = "#018161"
VAR fillcolour = "#E6E6E6"
VAR SVGIIcon = "<path d=' " & SVGPath & " '/>"
VAR svg_start = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"
VAR svg_end = "</svg>" // Define the colours for the percentage and fill
VAR percentageColourdef = "<g style='fill:" & percentageColor & "; clip-path:url(#eleclip)'>" & SVGIIcon & "</g>"
VAR fillcolourdef = "<g style='fill:" & fillcolour & ";'>" & SVGIIcon & "</g>"
// Horizontal orientation (comment this if you want a vertical orientation)
VAR orientation = "<defs><clipPath id='eleclip'><rect x='0' y='" & fillarea & "' width='100' height='" & percentagearea & "' /></clipPath></defs>"
RETURN
    svg_start & orientation & fillcolourdef & percentageColourDef & svg_end

 Regards,

Owen

[itsmebvk]

@OwenAuger  excellent, Thanks for pointing me correct direction. It worked like a charm.  Really appreciate your help.

[OwenAuger]

You're welcome 🙂
Oh and I just noticed that this forum seems to change colon characters to &colon; (within code blocks at least).

Just mentioning for you or anyone copying the code above 🙂

[itsmebvk]

Sorry that's my mistake. I changed that in my code but forgot to mention in the reply. Thanks for correcting again. 

[OwenAuger]

Hi @itsmebvk 

Tested at my end and two small changes that should fix the broken image icon, both in the svg_start variable:

1. Change &colon; to : 
2. Change W3.org to w3.org

So the corrected code should be:

var svg_start = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"

I'm not sure about the detail of the SVG itself, but this should at least produce an error-free SVG image URL.

Regards,

Owen

[itsmebvk]

@OwenAuger  Thanks for your inputs.

I am using following logo

<svg width="96" height="96" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><clipPath id="clip0"><rect x="1056" y="223" width="96" height="96"/></clipPath></defs><g clip-path="url(#clip0)" transform="translate(-1056 -223)"><path d='M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z'/></g></svg>

As you suggested updated "w" and ":" but still I am getting broken image.

Updated:

icon = 
 

VAR SVGPath = "M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z"
 
VAR _Val = sum('YTD Customer Measures'[Value])
VAR percentagearea = _Val*100
VAR fillArea = 100- percentagearea
 
VAR percentagecolor = "#018161"
VaR fillcolour = "#E6E6E6"

VAR SVGIIcon = "<path d=' "& SVGPath &" '/>"
var svg_start = "data&colon:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"
var svg_end = "</svg>"
 
// Define the colours for the percentage and fill
var percentageColourdef = "<g style='fill:" & percentageColor & "; clip-path:url(#eleclip)'>" & SVGIIcon & "</g>"
var fillcolourdef = "<g style='fill:" & fillcolour & ";'>" & SVGIIcon & "</g>"
 
// Horizontal orientation (comment this if you want a vertical orientation)
var orientation = "<defs><clipPath id='eleclip'>
<rect x='0' y='" & fillarea & "' width='100' height='" & percentagearea & "' />
</clipPath></defs>"
 
return
svg_start & orientation & fillcolourdef & percentageColourDef & svg_end

alternatively I also tried to remove "&colon" as below, when I do that broken image disappeared but still I am not seeing logo.

icon = 
 

VAR SVGPath = "M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z"
 
VAR _Val = sum('YTD Customer Measures'[Value])
VAR percentagearea = _Val*100
VAR fillArea = 100- percentagearea
 
VAR percentagecolor = "#018161"
VaR fillcolour = "#E6E6E6"

VAR SVGIIcon = "<path d=' "& SVGPath &" '/>"
var svg_start = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>"
var svg_end = "</svg>"
 
// Define the colours for the percentage and fill
var percentageColourdef = "<g style='fill:" & percentageColor & "; clip-path:url(#eleclip)'>" & SVGIIcon & "</g>"
var fillcolourdef = "<g style='fill:" & fillcolour & ";'>" & SVGIIcon & "</g>"
 
// Horizontal orientation (comment this if you want a vertical orientation)
var orientation = "<defs><clipPath id='eleclip'>
<rect x='0' y='" & fillarea & "' width='100' height='" & percentagearea & "' />
</clipPath></defs>"
 
return
svg_start & orientation & fillcolourdef & percentageColourDef & svg_end

Code Genearted by Measure

data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><clipPath id='eleclip'>
<rect x='0' y='-239098.1' width='100' height='239198.1' />
</clipPath></defs><g style='fill:#E6E6E6;'><path d=' M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z '/></g><g style='fill:#018161; clip-path:url(#eleclip)'><path d=' M1144 261 1114 261 1104 231 1094 261 1064 261 1087 281 1078 311 1104 293 1130 311 1121 281Z '/></g></svg>

If possible can you try this code from your side and see If I am missing something else?

Thanks in advance.