SVG Images are not shown correctly

[Jens1983]

Hi everybody,

i am trying to implement svg graphics into my table. I followed different tutorials on youtube and i experience always the same problem. The SVG Image is shown incorrectly, it looks like that it is cut off, even if i labeled the meassure as image and played around with the imag size, which doesnt have any effect.

For example I tried to implement a star, using this code:

Stars = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100'>

<path d='m50,2 12,34h361-28,22 10,34-30-20-30,20 10-34-28-22h36z'/>

</svg>"

and the outcome looks like this:

[Greg_Deckler]

@Jens1983 I'm not super familiar with the path function. This works though:

Stars = "data&colon;image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>
<polygon points=""10,0 12,9 20,8 13,13 16,20 10,15 4,20 7,13 0,9 8,9"" style=""fill:red;stroke:red;stroke-width:0;fill-rule:evenodd;"" />
</svg>"

Comes from here: SVG Color Star Rating - Microsoft Fabric Community

[Jens1983]

Hi Greg, thanks for the solution but when I use your code, it only shows an image symbol, even when i classify it as an image-url 😞

[Greg_Deckler · Accepted solution]

@Jens1983 What do you mean by "image symbol"? Can you share a screen shot? Remember, you need to replace the &colon; with an actual colon ( : ) for the SVG to work. It gets HTML encoded for whatever reason when pasting on this forum.

It should be classified as an image URL. What visual are you using it in? Below is with a standard Table visual. I am not aware of any Preview feature or anything else that should impact the display of SVG measures but will double check.

[Jens1983]

This works, thanks for your help 🙂

[Anonymous]

Hi @Jens1983 ,

I suggest you to try this code.

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.

[Jens1983]

Still doesnt work, it shows only an image symbol, even if i label it as an image-url 😞

[Anonymous]

Hi @Jens1983 ,

I think there may be something wrong when we copy the code and paste it in website.

I update the my reply with screenshot, it should be date:image... instead of data&colon... .

Please download my sample file and have a test.

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.

[Jens1983]

Thank you for your help, your solution also works fine for me 🙂