Register now to learn Fabric in free live sessions led by the best Microsoft experts. From Apr 16 to May 9, in English and Spanish.
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.
Solved! Go to 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: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
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: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
@OwenAuger excellent, Thanks for pointing me correct direction. It worked like a charm. Really appreciate your help.
Sorry that's my mistake. I changed that in my code but forgot to mention in the reply. Thanks for correcting again.
Hi @itsmebvk
Tested at my end and two small changes that should fix the broken image icon, both in the svg_start variable:
So the corrected code should be:
@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: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: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.
Covering the world! 9:00-10:30 AM Sydney, 4:00-5:30 PM CET (Paris/Berlin), 7:00-8:30 PM Mexico City
Check out the April 2024 Power BI update to learn about new features.
User | Count |
---|---|
112 | |
97 | |
85 | |
67 | |
59 |
User | Count |
---|---|
150 | |
120 | |
99 | |
87 | |
68 |