Forum Discussion
Solved
SVG Icon not displaying
I have imported a set of SVG icons into Powerbi, to use as conditional formatting. Added the code to the JSON file, and it was successfully imported into Power BI. I can see the icons with the rest...
Okay, so i figured it out.
The fill code was having issues, the # must be replaced with a %23. Not sure if you can encode the SVG's to base64 you could keep the #'s in.
fill='#ED003C'
fill='%23ED003C'
Hi,
I am having a similar problem but this time with a clipping path. I already changed the # for %23 for the color. However I am creating a filling visual that requires a clipping path, and for it to work it references the id with a #. I am attaching my code if you could offer any help that would great.
TreeKPI = // svg essentials
var svg_start = "data:image/svg+xml;utf8,<svg
xmlns='http://www.w3.org/2000/svg' viewBox='0 0 751.4 1336.9'>"
var svg_end = "</svg>"
var clip_height = 0.5* 1336.9
var clip_y = 1336.9 - clip_height
var defs = "<defs><clipPath id='eleClip'>
<rect x='0' y='" & clip_y & "' width='751.4' height='" & clip_height & "' />
</clipPath></defs>"
var grey_ele = "<g style='fill:%23c0c0c0;'>" & [TreeSVG] & "</g>"
var red_ele = "<g style='fill:red; clip-path:url(#eleClip)'>" & [TreeSVG] & "</g>"
return svg_start & defs & grey_ele &red_ele & svg_end
The SVG I am using is the following:
TreeSVG = "<path d='M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z'/>"
catolita I can try.
First of all, can you give me a working svg (only XML) that follows the DAX structure. By the way, what is the issues you are having?
I was extracting the path from the SVG I am using.
Sharing the whole SVG down below.
<?xml version='1.0' encoding='utf-8'?> <!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 751.4 1336.9' style='enable-background:new 0 0 751.4 1336.9;' xml:space='preserve'> <g> <g> <path d='M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7 c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3 c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6 L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2 c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3 c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z'/> </g> </g> </svg>Thanks
Sorry, forgot to report on the issue I am having. I am currently using image viewer to show this SVG as a large image and in the long version of the image I am using I draw more paths over it. But the image is no longer appearing in the image viewer visual (plug-in). I recently updated and this started to happen.
catolita so your raw xml is this
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.4 1336.9"> <defs><clipPath id="eleClip"> <rect x="0" y="668.45" width="751.4" height="668.45" /> </clipPath></defs> <g style="fill:#c0c0c0"> <path d="M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7 c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3 c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6 L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2 c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3 c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z"/> </g> <g style="fill:red; clip-path:url(#eleClip)"> <path d="M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7 c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3 c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6 L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2 c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3 c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z"/> </g> </svg>I am not sure if you can use image viewer to display a dynamic svg. If it does, I will experiment.
But with this given structure your DAX measure becomes this
Measure = "data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 751.4 1336.9""> <defs><clipPath id=""eleClip""> <rect x=""0"" y=""668.45"" width=""751.4"" height=""668.45"" /> </clipPath></defs> <g style=""fill:#c0c0c0""> <path d=""M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7 c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3 c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6 L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2 c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3 c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z""/> </g> <g style=""fill:red; clip-path:url(#eleClip)""> <path d=""M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7 c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3 c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6 L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2 c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3 c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z""/> </g> </svg>"which I have just published to web to test out in a matrix viz and it works across all the browesers without needing %23 to replace # sign