Forum Discussion

aaron797's avatar
aaron797
Advocate I
6 years ago
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...
Need Help
  • aaron797's avatar
    aaron797
    6 years ago

    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'

catolita's avatar
catolita
Regular Visitor
6 years ago

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&colon;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'/>"
  • smpa01's avatar
    smpa01
    Community Champion
    6 years ago

    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?

    • catolita's avatar
      catolita
      Regular Visitor
      6 years ago

      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

      • catolita's avatar
        catolita
        Regular Visitor
        6 years ago

        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.