![Alt text](/path/to/img.jpg)
または![Alt text](/path/to/img.jpg "Optional title")
のいずれかのMD構文でMDに画像を配置できることは知っていますが、コードがGithubでホストされているMDにSVGを配置するのは困難です。
最終的にはRails3を使用し、現在頻繁にモデルを変更しているため、 RailRoady を使用して、モデルのスキーマダイアグラムのSVGを生成しています。そのSVGをReadMe.mdに配置して表示するようにします。 SVGファイルをローカルで開くと機能しますが、ブラウザでMDファイルにSVGをレンダリングするにはどうすればよいですか?コードがファイナライズされるまで動的であると思われるため(見たところ決してない)、SVGを別の場所でホストするのはやり過ぎに思え、これを達成するためのアプローチがありません。
私が含めようとしているSVGは、Githubで here です: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">
の結果を取得するには:
raw.github.com
の目的は、ユーザーがファイルの内容を表示できるようにすることです。そのため、テキストベースのファイル(SVG、JS、CSSなど)の場合、これはブラウザーで間違ったヘッダーと破損が発生することを意味します。
更新:Githubは、SVGをMarkdownイメージ構文で使用できるようにする機能を実装しました。 SVG画像はサニタイズされ、正しいHTTPヘッダーで表示されます。特定のタグ(<script>
など)は削除されます。
サニタイズされたSVGを表示したり、他の場所からこの効果を実現するには(つまり、 http://github.com/ のリポジトリでホストされていないマークダウンファイルから)、SVGの生のURLに?sanitize=true
を追加します。
レンダリングの詳細については、以下の例を参照してください。
raw.github.com
からSVG画像に直接リンクすることはできませんが、SVGファイルをgh-pages
ブランチに置く(または configure master
as source for Github Pages)およびリンクするファイルに github.io
表示しようとしているファイルはプロジェクトのドキュメントの一部のように見えるため、これは win-winシチュエーション である可能性があります
Github Pagesを使用することがあなたのものでない場合、 rawgithub.com がオプションになる可能性があります。 RawGitはファイルを取得し、正しいヘッダーを設定します。
コメントで AdamKatz で述べられているように、github.io以外のソースを使用すると、プライバシーとセキュリティのリスクが生じる可能性があります。詳細については、 CiroSantilliによる回答 および DavidChambersによる回答 を参照してください。
コメントの MonsieurDart に記載されているように、RawGit プライベートリポジトリでは機能しません 。
これを解決する問題 2015年10月13日にGithubで公開され、2017年8月31日に解決されました
以下の例を作成するために、質問のSVG画像を githubのリポジトリ にコピーしました。
![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">
github.comの作業例 を参照してください。
![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">
?sanitize=true
を使用したRAWファイルへのリンク(Works)![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">
![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">
注:RawGithubサービスがダウンしている/動作しない場合があります。以下の画像が表示されない場合は、おそらくそうです。
![Alt text](https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
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-3061032
2014-12の更新:GitHubはBVGショーでSVGをレンダリングするようになったため、READMEでレンダリングしない理由はわかりません。 _レンダリング:
また、SVGにはXSSが試行されますが、実行されないことに注意してください。 https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
十億笑いのSVGはFirefox 44をフリーズさせますが、Chromium 48は大丈夫です: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petahに言及 SVGがiframe
内にあるため、ブロブは問題ありません。
SVG画像を提供していないGitHubの考えられる根拠
一般的な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
このサイト: https://rawgit.com を使用してください。svgファイルに関する権限の問題がないため、このサイトは機能します。
RawGitは Rawgit FAQ に記載されている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
Imgタグを使用した実例がありますが、画像は表示されません。私が見る違いは、コンテンツタイプです。
投稿からgithubイメージを確認しました(接続エラーのため、Googleドキュメントのイメージはまったく読み込まれません)。 githubからの画像はcontent-type:text/plainとして配信されますが、ブラウザでは画像としてレンダリングされません。
Svgの正しいcontent-type値はimage/svg + xmlです。したがって、svgファイルが正しいMIMEタイプを設定していることを確認する必要がありますが、それはサーバーの問題です。
http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg で試してみてください。タグに幅と高さを指定することを忘れないでください。