Is loading SVGs with image() supposed to work?

[llimllib]

I made this page (source code here) to demonstrate what seems to be a bug to me:

Pulling a single svg out of a zip file works, with await FileAttachment("zip/image.svg").image();, but if you get a reference to the zip file and then try to get the svg:

const logos = await FileAttachment("zip").zip();
await logos.file("image.svg").image();

that will fail here in stdlib, trying to convert the file to an Image object.

Is it expected that this should work, or do I have a mistaken expectation?

[mbostock]

Unfortunately, I don’t think file.image() can work with an SVG image within a ZIP file because the MIME type of the data isn’t known, so the browser can’t infer that you’re trying to display an SVG image.

The file.image() method is implemented using file.url() which calls file.blob(), and the Blob that is constructed by JSZip doesn’t specify a MIME type (because JSZip doesn’t know that _tbd.svg is an SVG file and it doesn’t have an internal database mapping file extensions to MIME types). And so the browser doesn’t know how to display the resulting image.

You can workaround this by constructing the Blob yourself with the appropriate image/svg+xml MIME type:

const logos = await FileAttachment("logos.zip").zip();
const data = await logos.file("_tbd.svg").arrayBuffer();
const blob = new Blob([data], {type: "image/svg+xml"});
const url = URL.createObjectURL(blob);
const image = new Image;
image.src = url;
display(image);