d3.jsobservablehq

Save High Resolution PNG with included Image in Chart Using d3.js on ObservableHQ.com

When creating a chart with D3.js, I can include an external image using :

svg.append("svg:image").attr("x", 100).attr("y", 100).attr(
"xlink:href",
"https://my-url.com/image.svg"
);

But when I try to save the chart as a PNG using a modified version of this code (for high resolution), the image doesn't show up in the PNG.

I've made a test notebook here where you can try yourself.

I've been trying to fetch the image differently and transform it into a svg node, but I could not succeed in parsing the result properly. Any help is welcome, thank you.

Solution

  • This is a little hacky, but it might work for you: https://observablehq.com/@shan/save-high-resolution-png-with-imported-image