215

![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ドキュメント：

4

9 に答える 9

245

の目的は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 日に解決されました。

于 2013-05-09T12:47:32.083 に答える
42

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

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

于 2014-02-03T06:41:16.717 に答える
21

Update 2020: XSS 攻撃を回避しながら機能させる方法

GitHub は 2 つのセキュリティ アプローチを使用しているようです。これは良い記事です: https://digi.ninja/blog/svg_xss.phpも参照: https://security.stackexchange.com/questions/148507/how-to-prevent- xss-in-svg-file-upload

アップデート 2017

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

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

また、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-laugh.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 によって現在完全に削除されています) の場合、ブラウザーはそれを実行するため、これらのケースはセキュリティ上の問題にはなりません。関連リンク:

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

于 2014-09-01T13:05:15.853 に答える
8

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

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

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

于 2015-09-08T04:26:14.923 に答える
3

これがGithubでうまくいったように。

![Image Caption](ImageAddressOnGitHub.svg)

また

<img src="ImageAddressOnGitHub.svg">
于 2020-03-17T12:13:44.580 に答える
1

このサイトを使用してください: 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
于 2016-06-08T06:32:07.983 に答える