SVG image not able to process the image

[Anonymous]

I have a svg image where i had created the circle with stroke and filling the circle with the image.
I had created the measure to show the dynamic image 

value = 
var _image = MAX(Table[Profile Pic])
var _start = "data:image/svg+xml;utf-8,
<svg width=""180"" height=""180"" viewBox=""0 0 180 180"" fill=""none"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"">
<circle cx=""90"" cy=""90"" r=""87.5"" fill=""#E3E3E3""/>
<circle cx=""90"" cy=""90"" r=""87.5"" fill=""url(#pattern0_1_2)""/>
<circle cx=""90"" cy=""90"" r=""87.5"" stroke=""#3B30FC"" stroke-width=""5""/>
<defs>
<pattern id=""pattern0_1_2"" patternContentUnits=""objectBoundingBox"" width=""1"" height=""1"">
<use xlink:href=""#image0_1_2"" transform=""translate(-0.248877) scale(0.000499251)""/>
</pattern>
<image id=""image0_1_2"" width=""3000"" height=""2003"" xlink:href="""
var _end = """/>
            </defs>
            </svg>"
var result = _start & _image & _end
return result

I am using the output of the mesure and found working on explorer

<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="90" cy="90" r="87.5" fill="#E3E3E3"/>
<circle cx="90" cy="90" r="87.5" fill="url(#pattern0_1_2)"/>
<circle cx="90" cy="90" r="87.5" stroke="#3B30FC" stroke-width="5"/>
<defs>
<pattern id="pattern0_1_2" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1_2" transform="translate(-0.248877) scale(0.000499251)"/>
</pattern>
<image id="image0_1_2" width="3000" height="2003" xlink:href=
"http://ldapphoto.ms.com/photos/9H808.jpg"/>
</defs>
</svg>

but in powr bi i am getting the circle with broken image 

[Anonymous]

@Anonymous we just have Image url within the data. is there any other approach rather than converting the entire image url to base 64. 

[Anonymous]

Hi @Anonymous ,
According to my test, using splice url to achieve SVG nesting seems to be unachievable, if you want to do custom svg images it is better to make the conversion to base64 format. If you want to use url directly, you can't achieve the customized effect, you can show the image function in visualization.
Display images in a table, matrix, or slicer in a report - Power BI | Microsoft Learn

Best regards,
Albert He

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

[Anonymous · Accepted solution]

Hi @Anonymous ,
According to your description, going to populate a custom image in a svg image after my testing, power bi doesn't seem to parse it. But you can turn it into a whole image through an external site before exporting it. Here are the steps to do it
First, you need to convert your image to base64 encoding
Base64 Image Encoder (base64-image.de)
Then use this to display your target image.
SVG Viewer - View, edit, and optimize SVGs

Go to data url and get the base64 code of the whole image

Use SVG in measure

Measure = 
SWITCH(
    TRUE(),
    SELECTEDVALUE('Table'[Value]) = 1,"data&colon;image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <image href='data&colon;image/svg+xml;base64,[Your base64 code]' x='0' y='0' height='100' width='100'/> </svg>"
)

Final output

For dynamic selection, you can put these base64 codes in the same table and splice them together using the measure

Best regards,
Albert He

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