![Alt text](/path/to/img.jpg)またはのMD構文を使用して画像をMDに配置できることは知っています![Alt text](/path/to/img.jpg "Optional title")が、コードがGitHubでホストされているMDにSVGを配置するのが困難です。

最終的にはrails3を使用し、現在モデルを頻繁に変更しているため、RailRoadyを使用してモデルのスキーマ図のSVGを生成しています。次に、そのSVGをReadMe.mdに配置して表示します。SVGファイルをローカルで開くと機能しますが、ブラウザでMDファイルにSVGをレンダリングするにはどうすればよいですか？ファイナライズされるまでコードが動的になると思われるため（おそらく決してそうではありません）、SVGを別の場所でホストするのはやりすぎであり、これを達成するためのアプローチが欠けています。

私には、しようとしているSVGは、ここに GitHubの上：https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

実際の画像を使用して次のことを試し、構文が機能していることを確認しました。SVGコードがレンダリングされていないだけです。

![Overview][1]
[1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg  "Overview"

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

![Alt text](https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg)

[Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) :

<img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720">

<img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">

<img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">

結果を取得するには：

1：https : //github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "概要"

Googleドキュメント：

の目的raw.github.comは、ユーザーがファイルのコンテンツを表示できるようにすることです。したがって、テキストベースのファイルの場合、これは（特定のコンテンツタイプの場合）誤ったヘッダーを取得し、ブラウザーで問題が発生する可能性があることを意味します。

この質問が行われたとき（2012年）、SVGは機能しませんでした。それ以来、Githubはさまざまな改善を実装しています。現在（少なくともSVGの場合）、正しいContent-Typeヘッダーが送信されます。

例

以下に述べる方法はすべて機能します。

^{以下の例を作成するために、質問からSVG画像をgithubのリポジトリにコピーしました}

相対パスを使用してファイルにリンクする（機能しますが、明らかにgithub.com / github.ioのみです）

コード

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

結果

github.comの実際の例を参照してください。

RAWファイルへのリンク

コード

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

結果

を使用してRAWファイルにリンクする ?sanitize=true

コード

![Alt text](https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true)
<img src="https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg?sanitize=true">

結果

github.ioでホストされているファイルへのリンク

コード

![Alt text](https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

結果

途中で起こった変更に関するコメント：

• Githubには、SVGをMarkdown画像構文で使用できるようにする機能が実装されています。SVG画像はサニタイズされ、正しいHTTPヘッダーで表示されます。特定のタグ（など<script>）は削除されます。

  サニタイズされたSVGを表示したり、他の場所（つまり、http： //github.com/のリポジトリでホストされていないマークダウンファイルから）からこの効果を得る?sanitize=trueには、SVGの生のURLに追加します。

• コメントでAdamKatzが述べたように、github.io以外のソースを使用すると、プライバシーとセキュリティのリスクが発生する可能性があります。参照してくださいCiroSantilliによって解答とDavidChambersによって答え詳細については。

• これを解決するための問題は、 2015年10月13日にGithubで公開され、2017年8月31日に解決されました

GitHubに問い合わせて、github.ioでホストされているSVGがGitHub READMEに表示されなくなったと伝えました。私はこの返信を受け取りました：

潜在的なクロスサイトスクリプティングの脆弱性のため、GitHub.comでsvg画像のレンダリングを無効にする必要がありました。

rawgit.comはこの問題をうまく解決します。リクエストごとに、GitHubから適切なドキュメントを取得し、重要なことに、正しいContent-Typeヘッダーを使用してドキュメントを提供します。

これは機能します。次のパターンを使用してSVGにリンクします。

https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg

欠点は、パス内の所有者とレポをハードコーディングすることです。つまり、これらのいずれかの名前を変更すると、svgが壊れます。

2017年の更新

GitHub開発者は現在これを調査しています：https : //github.com/github/markup/issues/556#issuecomment-306103203

2014-12更新：GitHubがSVGをblobショーでレンダリングするようになったため、READMEレンダリングでレンダリングしない理由がわかりません。

• https://github.com/blog/1902-svg-viewing-diffing
• https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

また、SVGはXSSを試行しますが、実行されないことにも注意してください。https：//raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

10億笑うSVGはFirefox 44をフリーズさせますが、Chromium 48は問題ありません：https : //github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

言及されたペタは、SVGが内にあるため、ブロブは問題ないとたiframe。

GitHubがSVG画像を提供しない理由の可能性

• 一般的なXMLの脆弱性。たとえば、10億笑いの悪用を開くと、Firefoxがシステムをクラッシュさせます。エクスプロイトが添付されたFirefoxのバグ：https : //bugzilla.mozilla.org/page.cgi?id=voting / user.html。Chromiumでも同じ：https : //code.google.com/p/chromium/issues/detail?id=231562

• SVG XSSスクリプティング：SVGがに埋め込まれている場合、ほとんどのブラウザーはスクリプトを実行しませんがimg、これは標準で必要とされていないようです。

  ブラウザーは、SVGを直接開いた場合に実行します（ただし、GitHubが画像を直接表示することはないようです） github.comドメインに場合）またはインライン（現在、GitHubによって完全に削除されている場合）の場合に実行するため、これらのケースはセキュリティ上の問題にはなりません。関連リンク：

  • スペック： http //www.w3.org/TR/SVG/script.html
  • インタラクティブなSVGデモ：http : //www.w3.org/TR/SVG/images/script/script01.svg

次の質問は、一般的にSVGのリスクについて尋ねます：https : //security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

img-tagを使用した実用的な例がありますが、画像が表示されません。私が見る違いはコンテンツタイプです。

私はあなたの投稿からgithubイメージを確認しました（接続障害のため、Googleドキュメントのイメージはまったく読み込まれません）。githubからの画像はcontent-type：text / plainとして配信され、ブラウザによって画像としてレンダリングされません。

svgの正しいcontent-type値は、image / svg + xmlです。したがって、svgファイルが正しいMIMEタイプを設定していることを確認する必要がありますが、それはサーバーの問題です。

でお試しください http://svg.tutorial.aptico.de/grafik_svg/dummy3.svgで、タグで幅と高さを指定することを忘れないください。

このサイトを使用してください：https : //rawgit.com、私はsvgファイルの権限の問題がないので私のために機能します。Rawgit FAQで
述べられているように、RawGitはgithubのサービスではないことに注意してください：

RawGitは、GitHubに関連付けられていません。RawGitのサポートを求めるGitHubには連絡しないでください。

次のような必要なsvgのURLを入力します。

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

次に、表示に使用できる以下のURLを取得できます。

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

ちょうどこれがGithubで私のために働いたように。

![Imgae Caption](ImageAddressOnGitHub.svg)

または

<img src="ImageAddressOnGitHub.svg">