web-dev-qa-db-ja.com

MarkDownにSVG(githubでホスト)を含める

![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">

の結果を取得するには:

Overview

Alt text

Google Doc

135
chris Frisina

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はファイルを取得し、正しいヘッダーを設定します。


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

相対ファイルへのリンク(機能しますが、明らかに https://github.com/

コード

![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">

結果

Alt text

?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

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

コード

![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">

結果

Alt text

rawgithub.com を使用したRAWファイルへのリンク(また動作します)

注: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">

結果

Alt text

158
Potherca

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

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

35
davidchambers

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

16
davidchambers

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

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

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

10
Tanner Perrien

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
3
sel-fish

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 で試してみてください。タグに幅と高さを指定することを忘れないでください。

3
Karsten S.