Forum Discussion
aaron797
Advocate I
Advocate ISVG 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'/>"