Forum Discussion

Jens1983's avatar
Jens1983
Regular Visitor
1 year ago
Solved

SVG Images are not shown correctly

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...
  • Greg_Deckler's avatar
    Greg_Deckler
    1 year ago

    Jens1983 What do you mean by "image symbol"? Can you share a screen shot? Remember, you need to replace the : 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.

     

     

Greg_Deckler's avatar
Greg_Deckler
Icon for Community Champion rankCommunity Champion
1 year ago

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's avatar
Jens1983
Regular Visitor
1 year ago

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's avatar
    Greg_Deckler
    Icon for Community Champion rankCommunity Champion
    1 year ago

    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's avatar
      Jens1983
      Regular Visitor
      1 year ago

      This works, thanks for your help 🙂

  • Anonymous's avatar
    Anonymous
    Not applicable
    1 year ago

    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's avatar
      Jens1983
      Regular Visitor
      1 year ago

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

      • Anonymous's avatar
        Anonymous
        Not applicable
        1 year ago

        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.