Remote images are lost when saving an Altair chart

[binste]

When saving an Altair chart which references remote images, those images are lost. It works if I first save the images locally and reference them on the file system. Is there a way how vl-convert could fetch those images and include them? I think this would in general be nice for image marks, but my specific use case is that I'm working on adding support for basemaps in Altair/Vega-Lite. The tiles are loaded from an arbitrary XYZ server using the same approach as in the code example below. See this VL PR for a full VL spec and a screenshot of what it looks like. (I might first implement this functionality in an altair extension package before it hopefully lands in VL)

Code example

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records(
    [
        {
            "x": 0.5,
            "y": 0.5,
            "img": "https://vega.github.io/vega-datasets/data/ffox.png",
        },
        {
            "x": 1.5,
            "y": 1.5,
            "img": "https://vega.github.io/vega-datasets/data/gimp.png",
        },
        {
            "x": 2.5,
            "y": 2.5,
            "img": "https://vega.github.io/vega-datasets/data/7zip.png",
        },
    ]
)

image_chart = alt.Chart(source).mark_image(width=50, height=50).encode(x="x", y="y", url="img")
image_chart

Saving this chart gives me the following:

image_chart.save("image_chart.png")

[jonmmease]

Thanks for the report @binste. Are the remote images present if you save to SVG?

I'm guessing resvg handles loading image references when they are local but doesn't pull them from remote sources. So we'll probably need to download them to a temp directory at some point in the pipeline (not sure if it would be easier to do this at the Vega and Vega-Lite spec level or at the SVG level).

[binste]

They are present if I save as SVG and they are embedded as e.g. <image aria-label="x: 0.5; y: 0.5; img: https://vega.github.io/vega-datasets/data/ffox.png" role="graphics-symbol" aria-roledescription="image mark" xlink:href="https://vega.github.io/vega-datasets/data/ffox.png" ....

Yeah the temp directory solution sounds reasonable. I'm not familiar with resvg so don't know if it has any capabilities to override how it converts external images? Or as you said, the images could be replaced in the Vega/VL specs or maybe in the SVG string itself but I guess that would require some SVG manipulation library.

[jonmmease]

resvg relies on usvg for the initial SVG processing, and it looks like it's possible to override the image url resolver: https://docs.rs/usvg/latest/usvg/struct.ImageHrefResolver.html#

This type can be useful if you want to have an alternative xlink:href handling to the default one. For example, you can forbid access to local files (which is allowed by default) or add support for resolving actual URLs (usvg doesn’t do any network requests).

[jonmmease]

Released in version 0.10.1