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

我知道一个图像可以放在MD中，MD语法为

！[Alt text]（/path/to/img.jpg）

或

！[Alt text]（/path/to/img.jpg“Optional title”）

，但是我很难在MD中放置SVG，因为代码托管在GitHub上

最终使用rails3，并且现在经常更改模型，所以我使用它来生成模型模式图的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]
[1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg  “概述”
![替换文本](https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg)
[谷歌文档](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) :

要获得以下结果：

：“概述”

---

:

---

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

我检查了你帖子中的github图像（由于连接失败，google文档图像根本无法加载）。来自github的图像以内容类型：text/plain交付，浏览器不会将其呈现为图像

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

---

尝试一下，不要忘记在标记中指定宽度和高度。

raw.github.com的目的是允许用户查看文件的内容，因此对于基于文本的文件，这意味着（对于某些内容类型），您可能会得到错误的标题，并且浏览器中的内容会中断

当这个问题被问到时（2012年），SVG不起作用。从那时起，Github实施了各种改进。现在（至少对于SVG），将发送正确的内容类型标题

例子 下面所述的所有方法都将起作用

为了创建下面的示例，我将问题中的SVG图像复制到

使用相对路径链接到文件（有效，但显然仅在github.com/github.io上） 代码

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

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

结果

链接到托管在上的文件 代码

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

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

！[替换文本](https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)

结果

---

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

• Github实现了一个特性，使SVG能够与标记图像语法一起使用。SVG图像将被清理并显示正确的HTTP头。某些标记（如
  ）被删除
  要查看经过消毒的SVG或从其他位置（即从repos on中未托管的降价文件）实现此效果，只需将

  ？sanitize=true

  附加到SVG的原始URL

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

• 于2015年10月13日在Github开通，并于2017年8月31日解决

---

我联系GitHub说GitHub.io托管的SVG不再显示在GitHub自述中。我收到的答复是：

由于潜在的跨站点脚本漏洞，我们不得不在GitHub.com上禁用svg图像呈现

---

很好地解决了这个问题。对于每个请求，它都会从GitHub检索适当的文档，关键是为其提供正确的内容类型标题。

更新2020：他们如何在避免

GitHub似乎使用了两种安全方法，这是一篇好文章：另请参见：

• 在

  中显示SVG。这将防止脚本即使在包含原始SVG文件的
  raw
  中运行：
  
  您可以看到标题带有
  curl-vvv
  。常规的
  github.com
  页面也有一个
  内容安全策略
  ，但它要大得多
  
  

2017年更新

GitHub开发人员目前正在研究以下内容：

更新2014-12：GitHub现在在blob show上呈现SVG，所以我看不出有任何理由不在自述渲染上呈现：

还请注意，SVG确实有XSS尝试，但它没有运行：

SVG确实让Firefox 44冻结，但Chromium 48没有问题：

这些blob很好，因为SVG位于

iframe

中

GitHub不提供SVG图像的可能理由

• 一般XML漏洞。例如，打开一个10亿笑脸的漏洞刚刚使Firefox使我的系统崩溃。附加漏洞的Firefox错误：。在铬上也一样：

• SVG XSS脚本：当SVG嵌入

  img

  时，大多数浏览器都不会运行脚本，但这似乎不是标准所要求的，因此GitHub可能是出于安全考虑
  如果您直接打开SVG（但GitHub似乎从不直接在

  GitHub.com

  域上显示图像），或者如果它是内联的（当前已被GitHub完全删除），浏览器会运行它，因此这些情况不应该是一个问题