March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.
Register NowGet certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
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: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:
Solved! Go to Solution.
@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.
@Jens1983 I'm not super familiar with the path function. This works though:
Stars = "data: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
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 😞
@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.
This works, thanks for your help 🙂
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.
Still doesnt work, it shows only an image symbol, even if i label it as an image-url 😞
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.
Thank you for your help, your solution also works fine for me 🙂
March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount! Early Bird pricing ends December 9th.
Check out the November 2024 Power BI update to learn about new features.
User | Count |
---|---|
62 | |
27 | |
25 | |
22 | |
16 |