Forum Discussion
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 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:
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.
8 Replies
- Greg_Deckler
Community Champion
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 😞
- Greg_Deckler
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.
