SVG image broken

[Anonymous]

Hey everyone,

I have SVG image of a male, displaying in a green and grey colour. The code in Notepad++ works fine. 

When I copy the code to Power BI to create a measure and change the date cateogry to Image URL, I get a broken image. 

I don't understand what's going on. Can anyone please help me?

The code is as follows:

MaleSVG =

"data:image/svg+xlm:utf8,

<svg version='1.0' xmlns='http://www.w3.org/2000/svg'

width='640.000000pt' height='1280.000000pt' viewBox='0 0 640.000000 1280.000000'>

<defs>

    <clipPath id='maskClip'>

    <rect x='0' y='0' width='6400' height='10000'/>

    </clipPath>

</defs>

<g transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'

style= 'fill: green;' >

<path d='M3056 12789 c-296 -43 -569 -217 -734 -468 -134 -204 -189 -425 -170

-681 30 -386 296 -743 659 -886 143 -56 212 -68 389 -69 168 0 209 6 340 47

263 83 515 309 630 562 124 273 129 581 13 856 -73 174 -231 368 -378 465

-224 147 -497 211 -749 174z'/>

<path d='M1920 10435 c-8 -2 -49 -9 -90 -15 -106 -17 -265 -71 -371 -126 -384

-198 -649 -562 -725 -994 -18 -100 -19 -195 -19 -1845 l0 -1740 22 -71 c71

-223 311 -355 546 -300 161 38 267 129 328 281 l24 60 3 1553 2 1552 110 0

110 0 2 -4152 3 -4153 21 -61 c59 -169 154 -284 295 -353 190 -93 392 -93 586

0 152 73 269 220 314 394 10 40 14 536 16 2472 l3 2423 105 0 105 0 0 -2407

c0 -2080 2 -2418 15 -2478 61 -293 341 -494 655 -471 260 18 457 165 538 401

l27 80 3 4153 2 4153 108 -3 107 -3 5 -1555 c4 -1101 8 -1564 16 -1585 75

-204 232 -315 447 -315 234 0 413 158 447 395 8 58 10 541 8 1770 -3 1588 -5

1696 -22 1785 -56 293 -183 542 -380 747 -187 195 -393 313 -666 381 l-105 26

-1290 2 c-709 1 -1297 1 -1305 -1z'/>

</g>

<g transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'

style= 'fill: grey; clip-path:url(#maskClip)' >

<path d='M3056 12789 c-296 -43 -569 -217 -734 -468 -134 -204 -189 -425 -170

-681 30 -386 296 -743 659 -886 143 -56 212 -68 389 -69 168 0 209 6 340 47

263 83 515 309 630 562 124 273 129 581 13 856 -73 174 -231 368 -378 465

-224 147 -497 211 -749 174z'/>

<path d='M1920 10435 c-8 -2 -49 -9 -90 -15 -106 -17 -265 -71 -371 -126 -384

-198 -649 -562 -725 -994 -18 -100 -19 -195 -19 -1845 l0 -1740 22 -71 c71

-223 311 -355 546 -300 161 38 267 129 328 281 l24 60 3 1553 2 1552 110 0

110 0 2 -4152 3 -4153 21 -61 c59 -169 154 -284 295 -353 190 -93 392 -93 586

0 152 73 269 220 314 394 10 40 14 536 16 2472 l3 2423 105 0 105 0 0 -2407

c0 -2080 2 -2418 15 -2478 61 -293 341 -494 655 -471 260 18 457 165 538 401

l27 80 3 4153 2 4153 108 -3 107 -3 5 -1555 c4 -1101 8 -1564 16 -1585 75

-204 232 -315 447 -315 234 0 413 158 447 395 8 58 10 541 8 1770 -3 1588 -5

1696 -22 1785 -56 293 -183 542 -380 747 -187 195 -393 313 -666 381 l-105 26

-1290 2 c-709 1 -1297 1 -1305 -1z'/>

</g>

</svg>"

[Anonymous · Accepted solution]

Hi @Anonymous ,

I have a test by your code, I think there may be something wrong in the beginning of your code.

Try this one.

MaleSVG = 
"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg'
width='640.000000pt' height='1280.000000pt' viewBox='0 0 640.000000 1280.000000'>

<defs>
    <clipPath id='maskClip'>
    <rect x='0' y='0' width='6400' height='10000'/>
    </clipPath>
</defs>

<g transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'
style= 'fill: green;' >
<path d='M3056 12789 c-296 -43 -569 -217 -734 -468 -134 -204 -189 -425 -170
-681 30 -386 296 -743 659 -886 143 -56 212 -68 389 -69 168 0 209 6 340 47
263 83 515 309 630 562 124 273 129 581 13 856 -73 174 -231 368 -378 465
-224 147 -497 211 -749 174z'/>
<path d='M1920 10435 c-8 -2 -49 -9 -90 -15 -106 -17 -265 -71 -371 -126 -384
-198 -649 -562 -725 -994 -18 -100 -19 -195 -19 -1845 l0 -1740 22 -71 c71
-223 311 -355 546 -300 161 38 267 129 328 281 l24 60 3 1553 2 1552 110 0
110 0 2 -4152 3 -4153 21 -61 c59 -169 154 -284 295 -353 190 -93 392 -93 586
0 152 73 269 220 314 394 10 40 14 536 16 2472 l3 2423 105 0 105 0 0 -2407
c0 -2080 2 -2418 15 -2478 61 -293 341 -494 655 -471 260 18 457 165 538 401
l27 80 3 4153 2 4153 108 -3 107 -3 5 -1555 c4 -1101 8 -1564 16 -1585 75
-204 232 -315 447 -315 234 0 413 158 447 395 8 58 10 541 8 1770 -3 1588 -5
1696 -22 1785 -56 293 -183 542 -380 747 -187 195 -393 313 -666 381 l-105 26
-1290 2 c-709 1 -1297 1 -1305 -1z'/>
</g>

<g transform='translate(0.000000,1280.000000) scale(0.100000,-0.100000)'
style= 'fill: grey; clip-path:url(#maskClip)' >
<path d='M3056 12789 c-296 -43 -569 -217 -734 -468 -134 -204 -189 -425 -170
-681 30 -386 296 -743 659 -886 143 -56 212 -68 389 -69 168 0 209 6 340 47
263 83 515 309 630 562 124 273 129 581 13 856 -73 174 -231 368 -378 465
-224 147 -497 211 -749 174z'/>
<path d='M1920 10435 c-8 -2 -49 -9 -90 -15 -106 -17 -265 -71 -371 -126 -384
-198 -649 -562 -725 -994 -18 -100 -19 -195 -19 -1845 l0 -1740 22 -71 c71
-223 311 -355 546 -300 161 38 267 129 328 281 l24 60 3 1553 2 1552 110 0
110 0 2 -4152 3 -4153 21 -61 c59 -169 154 -284 295 -353 190 -93 392 -93 586
0 152 73 269 220 314 394 10 40 14 536 16 2472 l3 2423 105 0 105 0 0 -2407
c0 -2080 2 -2418 15 -2478 61 -293 341 -494 655 -471 260 18 457 165 538 401
l27 80 3 4153 2 4153 108 -3 107 -3 5 -1555 c4 -1101 8 -1564 16 -1585 75
-204 232 -315 447 -315 234 0 413 158 447 395 8 58 10 541 8 1770 -3 1588 -5
1696 -22 1785 -56 293 -183 542 -380 747 -187 195 -393 313 -666 381 l-105 26
-1290 2 c-709 1 -1297 1 -1305 -1z'/>
</g>

</svg>"

Result is as below.

Best Regards,
Rico Zhou

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[Anonymous]

Thank you so much! 

I have been going over the code so many times, and I didn't see it. 

Your codes works perfectly