Gdoc article Grapher embeds don't have SVG fallbacks

[ikesau]

I noticed this today after browsing our site with NoScript enabled.

https://ourworldindata.org/population-projections

It's still working with our WordPress articles, so this is due to how our Chart component renders charts.

As part of this, we should also restore the "Tap to load" functionality on mobile where it only loads the SVG by default.

[marcelgerber]

For reference: The code that makes this work for WP baking is this one here:

owid-grapher/baker/formatWordpressPost.tsx

Lines 383 to 392 in b0e6424

	const output = `
	<figure data-grapher-src="${src}" class="${GRAPHER_PREVIEW_CLASS}">
	<a href="${src}" target="_blank">
	<div><img src="${chart.svgUrl}" width="${chart.width}" height="${chart.height}" loading="lazy" data-no-lightbox /></div>
	<div class="interactionNotice">
	<span class="icon">${INTERACTIVE_ICON_SVG}</span>
	<span class="label">Click to open interactive version</span>
	</div>
	</a>
	</figure>`

And then there's also some code ensuring that we have a svg version for every variant that we embed, i.e. the concrete query params that are being used in an embed.

[danyx23]

When implementing this make sure to also check this for data pages and topic pages

[danyx23]

The issues #2992 is also related to this one and should probably fixed at the same time

[rakyi]

As part of this, we should also restore the "Tap to load" functionality on mobile where it only loads the SVG by default.

@ikesau why would we want to do this? It makes me less likely to use the interactive chart as a user if I have to click to load it, and subjectively I'd prefer to be able to interact with the chart ASAP.

[rakyi]

Now I see that some less powerful devices are probably not handling it well, fair enough.