<foreignObject>でGitHubのREADMEに好きなHTMLを埋め込む
はじめに
GitHubでは、README.mdという名前のファイルをリポジトリのトップレベルに設置すると、そのリポジトリのページにいい感じにフォーマットして表示してくれます。
Markdownの基本的な構文（ CommonMark ）をサポートしているほか、 GitHub Flavored Markdown としてまとめられているいくつかの拡張構文も記述することができます。
また、各種Markdown構文のほか、HTMLタグをそのまま記述することもできます。しかしながら、サポートされているHTMLタグはごく一部（<p>, <img> など）で、たとえば <div> タグで自由にレイアウトしたりといったことはできません。またタグのなかに記述できるスタイルもごく限られており、padding を使って余白を調節したりすることもできません。
これはセキュリティのことを考えると仕方のない仕様で、たとえばREADMEの中で好き勝手なタグやスタイルを書かれると、REAMDEのエリアの外側のUIまで要素が重なってしまったり、極端な話画面全体を覆うような要素を書くこともできてしまうわけです。
<foreignObject> という抜け道
しかしながら、そうした制限の中にも、ちょっとした「抜け道」が存在します。
それが SVG画像内で使用できる <foreignObject> タグ です。
<foreignObject> は、SVGの中にHTML[1]を直接埋め込むことができる特殊なタグです。GitHubのREADMEにはSVG画像を挿入できますが、その中に埋め込んだ <foreignObject> のHTMLはちゃんと描画されるのです。
つまり、README上では使えないはずのタグやスタイルを、 SVG内のHTML領域 の中で使えるようになる、というわけです。
たとえば、これは私のプロジェクトで使用しているSVGです：
これを画像としてREADMEに埋め込みます。
<!-- これでもOK -->
<img src="docs/assets/tip-h-component.svg" alt="Heading component icon" />
これで、任意のHTML・スタイルを内包したSVGがREADMEに表示されます（以下のリンクから見れます）。
おまけ：参考になりそうな各種リンク
カラーテーマ対応：
@keyframe でアニメーションもつけれる：
-
正確には、任意の XML 名前空間。参考： https://developer.mozilla.org/ja/docs/Web/SVG/Reference/Element/foreignObject ↩︎
Discussion