Picture tag in Markdown

Following the release of dark mode on GitHub, I’m trying to leverage the <picture> tag to provide two versions of the logo in my README.md:

<a href="https://pathling.csiro.au">
<picture>
  <source srcset="./media/logo-colour-tight-dark.svg" media="(prefers-color-scheme: dark)"/>
  <img src="./media/logo-colour-detail-tight.svg" alt="Pathling logo" width="300"/>
</picture>
</a>

Unfortunately, while this has broad browser support, GitHub seems to sanitise the picture tag out of the resulting HTML. Is this necessary, could <picture> it be whitelisted and available for use in this context?

Is there another way to display alternate images in Markdown rendered content on GitHub to cater for dark mode?

2 Likes