我知道可以使用![Alt text](/path/to/img.jpg)或的MD语法将图像放置在MD中![Alt text](/path/to/img.jpg "Optional title")，但是我很难将SVG放置在将代码托管在GitHub上的MD中。

最终使用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/上的repos中未托管的markdown文件中）实现此效果，只需将其附加?sanitize=true到SVG的原始URL即可。

• 如AdamKatz在评论中所述，使用github.io以外的来源可能会带来潜在的隐私和安全风险。有关更多详细信息，请参见CiroSantilli 的答案和DavidChambers 的答案。

• 解决此问题的方法已于2015年10月13日在Github上公开，并于2017年8月31日得到解决

我联系GitHub表示github.io托管的SVG不再显示在GitHub自述文件中。我收到此回复：

由于潜在的跨站点脚本漏洞，我们不得不在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现在在blob表演上渲染SVG，所以我看不出为什么不在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

十亿个笑声SVG确实使Firefox 44冻结，但Chromium 48可以：https：//github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah提到斑点很好，因为SVG位于容器内iframe。

GitHub不提供SVG图像的可能原因

• 一般XML漏洞。例如，打开十亿个笑声漏洞，就使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，但似乎这不是标准所必需的，因此GitHub可以安全地运行它。

  如果您直接打开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标签的有效示例，但是您的图像不会显示。我看到的区别是内容类型。

我检查了您帖子中的github图像（由于连接失败，google doc图像根本无法加载）。来自github的图像以content-type：text / plain的形式提供，不会被您的浏览器渲染为图像。

svg的正确内容类型值为image / svg + xml。因此，您必须确保svg文件设置了正确的mime类型，但这是服务器问题。

尝试使用http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg，不要忘记在标记中指定宽度和高度。

使用此网站：https : //rawgit.com，它对我有用，因为我没有svg文件的权限问题。
请注意，如Rawgit FAQ中所述，RawGit不是github的服务：

RawGit不以任何方式与GitHub相关联。请不要联系GitHub寻求RawGit的帮助

输入所需的svg网址，例如：

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

然后，您可以获取以下URL，该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">