How to upload SVG file in Power bi?

Question

Microsoft

I downloaded the SVG file, edited it to import into Power BI.
Next, I created a measure and entered the code of the SVG file there through a variable.
But for some reason the color fill can't bind to the measures, causing the SVG to not respond to changes.
The file is on Github:


Please see the links to the measures, where I incorrectly specify the path.

Measure source code:

SVG_smoked = 
VAR percentArea = 'Measures_1'[Smoked] //for calculate heigth of back figure
VAR fillColor = "#ff0000" // color of useful figure
VAR backColor = "#cccccc" // color of background figure

VAR smoke_icon = 
"
data:image/svg+xml; utf8,

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667'>

<defs>
  <clipPath id='maskClip'>
    <rect x='0' y='0' width='426.667' height = '"&426.667 * (1-percentArea)&"' />
  </clipPath>
</defs>

<g style= 'fill: "&fillColor&";'>
  <path d='M299.307,206.827h-32.64v0.107c-21.76,0-39.467-20.907-39.467-42.667c0-21.76,17.707-37.333,39.467-37.333v-32
    c-39.36,0-71.467,32-71.467,71.467s32,71.467,71.467,71.467v-0.107h32.64c22.293,0,42.027,15.787,42.027,43.84v27.733h32V274.24
    C373.333,235.84,339.2,206.827,299.307,206.827z'/>
  <rect x='341.333' y='330.667' width='32' height='64'/>
  <rect x='0' y='330.667' width='320' height='64'/>
  <path d='M359.467,154.24c13.12-12.907,21.333-30.933,21.333-50.773C380.8,64,348.693,32,309.333,32v32
    c21.76,0,39.467,17.707,39.467,39.467c0,21.76-17.707,39.467-39.467,39.467v32c47.893,0,85.333,38.933,85.333,86.827v47.573h32
    v-47.68C426.667,214.187,399.36,173.227,359.467,154.24z'/>
  <rect x='394.667' y='330.667' width='32' height='64'/>
</g>


<g style= 'fill: "&backColor&"; clip-path:url(#maskClip)'>
  <path d='M299.307,206.827h-32.64v0.107c-21.76,0-39.467-20.907-39.467-42.667c0-21.76,17.707-37.333,39.467-37.333v-32
    c-39.36,0-71.467,32-71.467,71.467s32,71.467,71.467,71.467v-0.107h32.64c22.293,0,42.027,15.787,42.027,43.84v27.733h32V274.24
    C373.333,235.84,339.2,206.827,299.307,206.827z'/>
  <rect x='341.333' y='330.667' width='32' height='64'/>
  <rect x='0' y='330.667' width='320' height='64'/>
  <path d='M359.467,154.24c13.12-12.907,21.333-30.933,21.333-50.773C380.8,64,348.693,32,309.333,32v32
    c21.76,0,39.467,17.707,39.467,39.467c0,21.76-17.707,39.467-39.467,39.467v32c47.893,0,85.333,38.933,85.333,86.827v47.573h32
    v-47.68C426.667,214.187,399.36,173.227,359.467,154.24z'/>
  <rect x='394.667' y='330.667' width='32' height='64'/>
</g>
</svg>

"
return smoke_icon

Answer 1

Everything, I solved the problem. It turns out that you need to round the values ​​in the "percentArea" variable to 2 characters
=round(xxx, 2)