I would like to display a vega-lite-api generated chart and be able to save it as an SVG file or a PNG file. I go for instance to https://observablehq.com/@ericmauviere/seasonality-of-weddings-in-france which displays at the top an SVG vega-lite bar chart then try and export via the download SVG …

You are right, removing the 2nd xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fixes the svg downloaded via the [image] The SVG element is the 1st child of the evol_weddings. Mikes saving-svg just saves the whole div cell but that mostly works.

Would it be worth removing those attributes, so observable can save the svg correctly, until observable has a fix? I guess that depends on the project. like so… evol_weddings = { let ev = await vl.markBar() .data(agregats.total_annuel.objects()) .encode( vl.x().fieldO('AN').axis({ labe…

Thanks @hellonearthis for that fix, that i will use! It eliminates as well the PNG export error. To summarise at this point: Both Vega lite and Observable teams use different encodings to set xmlns attributes in the SVG, in the end, they pile up, which causes the reopening issue. No matter which…

[image] emauviere: Both Vega lite and Observable teams use different encodings I have to nitpick here: This is not about encodings, but about XML namespaces. As far as I could tell, Vega’s way of setting the attribute is perfectly valid. So it’s on Observable to fix their Download function b…

This is a bug in Vega, but we could workaround it. In HTML, the SVG element is known as a “foreign element”. When parsing static HTML, the HTML specification defines that certain attributes on foreign elements are implicitly assigned namespaces. Relevant here, the xmlns and xmlns:xlink attributes a…

Thank you very much for the explanation. Would it be possible please for you and the Vega team to just discuss this directly and adopt the same convention? I gather that you know Jeff Heer. If this a bug on their side, i suppose they would gladly agree to fix it. I have posted an issue on the vega-l…

I’ve opened a PR here: fix xmlns namespace vega:master ← mbostock:mbostock/fix-xmlns opened 05:08PM - 20 Jan 21 UTC (UTC) [mbostock] mbostock …

Problem solved with last vega-lite-api version ! Thanks once again @mbostock and Jeffrey Heer

SVG export from a vega-lite api chart: error on opening the file

mootari December 29, 2020, 2:19pm 3

This problem has come up before. The cause is described in this post: How to create or download high resolution figure using Vega-Lite rather than SVG?

Topic		Replies	Views
How to create or download high resolution figure using Vega-Lite rather than SVG? Community Help	10	1713	November 25, 2020
Chart won't let me download it Community Help	13	1568	March 1, 2022
Oops, downloading failed Community Help	4	540	August 28, 2020
Error opening svg file from Observable Community Help	7	561	November 1, 2022
Vega-Lite different sizing Feedback	1	600	November 29, 2021

SVG export from a vega-lite api chart: error on opening the file

Related topics