Resize / crop / style images in tooltips?

[liquidcarbon]

Hello! It would be cool to be able to manipulate images in tooltips.

data = alt.Data(values=[
    {
        "code": c,
        "image": f"https://http.cat/{c}.jpg",
        "image2": f'<img src="https://http.cat/{c}.jpg" width="200">'
    }
    for c in [202, 301, 404]
])
alt.Chart(data).mark_bar().encode(
    x="code:Q",
    y="code:N",
    tooltip=[alt.Tooltip("image:N")]
)

I can see how this might be awkward to write in a JSON. Might there be other ways?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.20.1.json",
  "config": {"view": {"continuousHeight": 300, "continuousWidth": 300}},
  "data": {
    "values": [
      {
        "code": 202,
        "image": "https://http.cat/202.jpg",
        "image2": "<img src=\"https://http.cat/202.jpg\" width=\"200\">"
      },
      {
        "code": 301,
        "image": "https://http.cat/301.jpg",
        "image2": "<img src=\"https://http.cat/301.jpg\" width=\"200\">"
      },
      {
        "code": 404,
        "image": "https://http.cat/404.jpg",
        "image2": "<img src=\"https://http.cat/404.jpg\" width=\"200\">"
      }
    ]
  },
  "encoding": {
    "tooltip": [{"field": "image", "type": "nominal"}],
    "x": {"field": "code", "type": "quantitative"},
    "y": {"field": "code", "type": "nominal"}
  },
  "mark": {"type": "bar"},
  "usermeta": {"embedOptions": {}}
}

[liquidcarbon]

Alternatively, using data URLs instead of regular URLs could be cool.

This doesn't seem to work, with or without URL encoding.

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red'/></svg>

Though it does in <img> tag:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22100%22%20height%3D%22100%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20fill%3D%22red%22%20/%3E%3C/svg%3E" width=200>