Rendering inline svg in MarkdownString for TreeItem tooltip fails when colours are provided

[Tommycore]

Hi!

In my extension, I have a custom TreeDataProvider, which is meant to have little sketches in the tooltip of specific items. In the getTreeItem() method I call a renderTooltip() Method, which looks somewhat like this:

const tooltip = new vsc.MarkdownString('', true);
tooltip.baseUri = vsc.Uri.file('.');
tooltip.supportHtml = true;
tooltip.isTrusted = true;

let svg = ...
tooltip.appendMarkdown(`![Frames](data:image/svg+xml,${encodeURI(svg)})`);

return tooltip;

One example for the code that gets rendered into the svg variable in the example above would be this:

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="170" viewbox="0 0 220 170">
  <rect x="0" y="0" width="220" height="170" stroke="#000000" fill="#EEEEEE" />
  <polygon points="14,18 14,137 99,137 99,18" stroke="#000000" fill="#AAAAAA" />
</svg>

I went ahead and looked at the resulting image with both https://www.rapidtables.com/web/tools/svg-viewer-editor.html as well as the Markdown Previewer, and both give me the same result:

However, in the tooltips of my TreeItems there's just the "broken image link" symbol. If I remove the stroke and fill attributes from the rect and the polygon in the image above, I get rendered an appropriate image, albeit everything using black fill, which makes the whole thing utterly useless as you can't see black areas on a black rectangle.

If I try to put the svg code directly into the MarkdownString, it just renders nothing, as if that gets stripped away completely.

I can use the class attribute instead of fill and stroke, but then there's the problem that I have no idea where to put the css. Does VS Code have predefined classes we're supposed to use in this case? If so, where can I find a list?
Am I missing something else about why fill and stroke don't work here?

Any pointers would be highly appreciated.

[usernamehw]

You can try to replace # sign in colors with %23, like so:

-fill="#EEEEEE"
+fill="%23EEEEEE"

https://stackoverflow.com/questions/61099149/svg-fill-color-not-working-with-hex-colors

[Tommycore]

Interestingly enough, that didn't directly solve it. Just swapping # for %23 ended up in the svg rendering all black. But changing encodeURI to encodeURIComponent did the trick:

- tooltip.appendMarkdown(`![Frames](data:image/svg+xml,${encodeURI(svg)})`);
+ tooltip.appendMarkdown(`![Frames](data:image/svg+xml,${encodeURIComponent(svg)})`);

Thank you =)