在MarkDown中包含一个SVG（托管在GitHub上）。

Question

我知道在Markdown中可以使用以下语法将图像放置在MD中：![Alt text](/path/to/img.jpg)或![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 Doc :

- chris Frisina

---

GitHub现在有一个相关的未解决问题报告：https://github.com/github/markup/issues/556 - user82216

为方便人们查看，Github上的错误报告于2015年10月13日发布。 - Potherca

自2022年1月起，它已在Markdown文件中得到支持：请参见下面的我的答案。 - VonC

Answer 1

raw.github.com的目的是允许用户查看文件的内容，因此对于基于文本的文件来说（对于某些内容类型），可能会出现错误的头部信息，导致浏览器无法正常显示。

当这个问题被提出时（在2012年），SVG文件无法正常工作。自那时以来，Github已经实施了各种改进措施。现在（至少对于SVG文件），正确的Content-Type头部信息已经发送。

添加SVG文件的最简单方法是使用上传资源功能。引用手册上的描述：

您可以通过拖放、从文件浏览器中选择或粘贴的方式上传图片等资源。您可以将资源上传到问题、拉取请求、评论和存储库中的.md文件中。

自2022年起，“图片”也包括SVG文件：

---

一些关于沿途发生的变化的评论：

• Github已经实现了一个功能，使得可以在Markdown图像语法中使用SVG。SVG图像将被清理并以正确的HTTP头显示。某些标签（如<script>）将被移除。

  要查看清理后的SVG或从其他地方实现此效果（即从不在http://github.com/上托管的markdown文件中），只需在SVG的原始URL后附加?sanitize=true。

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

• 解决此问题的讨论于2015年10月13日在Github上开启，并于2017年8月31日解决。

• 支持SVG拖放文件上传于2022年1月21日宣布

示例

下面列出的所有方法都可以使用。

^{为了创建下面的示例，我将SVG图像从问题中复制到github上的一个仓库中}

使用相对路径链接文件（有效，但显然只适用于github.com / github.io）

代码

![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链接到原始文件

代码

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

结果

- Potherca

---

只是为了明确，您是说SVG图像不会呈现，对吗？ - ShreevatsaR

@ShreevatsaR 不，除了热链接 raw.github.com 文件之外，其他都正常工作。我只是在 github 存储库中重命名了一些内容，忘记更新我的答案，导致示例出现问题。现在已经修复了。 - Potherca

@ShreevatsaR 正确。GitHub从未打算使用原始视图作为托管文件的方式，只是用于查看，因此它发送了 text/plain 标头。 - Potherca

警告：rawgit.com和rawgithub.com不是GitHub拥有或运营的，这会引入隐私甚至安全风险，如果不是来自其当前所有者的滥用，那么也许是来自未来所有者，如果DNS注册过期。这使得github.io解决方案最安全。另请参见@CiroSantilli的答案和@davidchambers的答案，两者都指出了这种情况创建的XSS风险。 - Adam Katz

@MonsieurDart，我已经在答案中加入了您的关注。 - Potherca

Answer 2

我联系了GitHub，告知他们github.io托管的SVG文件在GitHub自述文件中不再显示。我收到了如下回复：

由于潜在的跨站脚本漏洞，我们不得不禁用GitHub.com上的SVG图片渲染。

- davidchambers

---

等等，那会发生吗？我不知道。 - Camilo Martin

有趣的是，它在blob show上确实可以渲染：请参见我的回答。所以我不明白为什么在README中不能。 - Ciro Santilli OurBigBook.com

来到这里就是为了确认这是否可行。这是可行的概念证明：https://jsfiddle.net/franciscop/krqea6gc/ - Francisco Presencia

哦，点击这里观看一个 XSS 攻击？不错。 - Adam Katz

Answer 3

更新2020：如何在避免XSS攻击的情况下使其正常工作

GitHub似乎采用了两种安全方法，这是一篇很好的文章：https://digi.ninja/blog/svg_xss.php 另请参阅：https://security.stackexchange.com/questions/148507/how-to-prevent-xss-in-svg-file-upload

• 在<img标签中显示SVG，防止脚本运行，例如在README文件中：https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• 使用Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox。即使在包含原始SVG文件的raw中也可以防止脚本运行：https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  您可以使用curl -vvv查看标题。常规的github.com页面也有一个content-security-policy，但它要大得多。

更新 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内部，所以Blob是可以的。

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脚本：尽管大多数浏览器在使用img嵌入SVG时不运行脚本，但似乎标准并不要求这样做，因此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

- Ciro Santilli OurBigBook.com

---

浏览器在通过图像标签访问SVG时不会运行脚本。随意自行检查。 - Robert Longson

@RobertLongson 感谢您的纠正。这是规范中指定的，还是常见的浏览器行为？这是出于安全考虑吗？ - Ciro Santilli OurBigBook.com

这是为了隐私而做的，也不是真正的标准。人们理解光栅图像的工作原理以及它们能够/不能够做什么，因此当SVG图像用作图像时，应该以相同的方式工作。 - Robert Longson

Answer 4

rawgit.com 很好地解决了这个问题。 对于每个请求，它从GitHub检索适当的文档，并且至关重要的是，使用正确的Content-Type标头提供服务。

- davidchambers

---

你不需要先访问网站，@GitSyncApp。 :) - davidchambers

你确定吗？我尝试了一些以前从未粘贴到网页上的东西，它居然奏效了！这非常相关，因为DropBox正在关闭他们的公共文件夹支持。 - Sentry.co

回复自己... RawGit 不支持私有仓库：https://github.com/rgrove/rawgit/issues/62 - MonsieurDart

rawgit.com即将关闭。根据该网站的说法：“RawGit已经到了它有用生命的尽头。 2018年10月8日 RawGit现在进入了日落阶段，很快就会关闭。这是五年来的一段愉快时光，但所有的事情都必须结束。在过去一个月内通过RawGit提供内容的GitHub存储库将继续提供服务，直到至少2019年10月。其他存储库的URL将不再提供服务。如果您目前正在使用RawGit，请尽快停止使用它。” - jeffhale

也来自于rawgit.com的停用公告：“你应该使用代替方案以下这些免费服务为RawGit的所有或部分功能提供了绝佳的替代方案。您可能会喜欢它们比RawGit更多。jsDelivr GitHub页面 CodeSandbox unpkg - jeffhale

Answer 5

自2022年1月以来，似乎变得可能（并且容易）：

允许上传.svg文件到Markdown中

现在可以将.svg文件上传到问题、PR、讨论和像READMEs这样的Markdown文件的评论中。

您只需将文件拖放到文本区域即可。

- VonC

Answer 6

这个方法是可行的。使用以下模式链接到您的SVG：

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

缺点是在路径中硬编码所有者和存储库，这意味着如果它们被重命名，则SVG将无法正常工作。

- Tanner Perrien

---

使用 cdn.rawgit.com 的另一个缺点是“文件基于URL永久缓存”。如果您修改了文件，它将永远不会更新，除非您更改名称或路径。 - Mottie

@Mottie：rawgit现在已经更新了：“您推送到GitHub的新更改将在几分钟内反映出来。” - Sentry.co

重要提示！RawGit 不支持私有仓库： https://github.com/rgrove/rawgit/issues/62 - MonsieurDart

2018 年更新，Rawgit 将逐步停止运营。请查看我上面的评论。 - jeffhale

Answer 7

您也可以像其他格式一样插入动画 SVG 图像。
这可能是 GIF 图像的良好替代品。

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

例子（假设图片在存储库的 assets 目录中）：

![My animated logo](assets/my-logo.svg)

结果：

- Mahozad

---

我可以让 .svg 文件显示出来，但是其中嵌入的链接却无法工作。为了解决这个问题，我不得不将整个 svg 文件的代码粘贴进来，而不是使用上面的代码调用它。 - undefined

Answer 8

就像这个在Github上对我起作用了。

![Image Caption](ImageAddressOnGitHub.svg)

或者

<img src="ImageAddressOnGitHub.svg">

- Mohammad Heydari

---

当这个问题被提出时（在2012年），情况更加混乱。幸运的是，现在一切都“只是工作”！ - Potherca

Answer 9

我有一个使用img标签的工作示例，但是您的图像不显示。我发现的区别是内容类型。

我检查了您在帖子中的Github图片（Google文档图片由于连接失败而无法加载）。来自Github的图像以content-type：text/plain传递，这不会被浏览器呈现为图像。

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

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

- Karsten S.

Answer 10

使用这个网站: https://rawgit.com，对我来说很有效，因为我没有svg文件的权限问题。
请注意，正如Rawgit FAQ中提到的那样，RawGit不是github的服务:

RawGit与GitHub没有任何关联。 请不要联系GitHub寻求RawGit的帮助

输入您需要的svg的url，例如：

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

- sel-fish

---

重要提示！RawGit 不支持私有仓库： https://github.com/rgrove/rawgit/issues/62 - MonsieurDart