215

我知道可以将图像放置在 MD 中，MD 语法为![Alt text](/path/to/img.jpg)or ![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 “概述”

替代文字

谷歌文档：

4

9 回答 9

245

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

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

例子

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

我将问题中的 SVG 图像复制到github 上的 repo以创建以下示例

使用相对路径链接到文件（有效，但显然只在 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 中托管的降价文件）实现此效果，只需附加?sanitize=true到 SVG 的原始 URL。

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

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

于 2013-05-09T12:47:32.083 回答
42

我联系了 GitHub，说 github.io 托管的 SVG 不再显示在 GitHub README 中。我收到了这样的回复：

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

于 2014-02-03T06:41:16.717 回答
21

2020 年更新：他们如何在避免XSS 攻击的同时使其工作

GitHub 似乎使用了两种安全方法，这是一篇好文章：https ://digi.ninja/blog/svg_xss.php另见：https ://security.stackexchange.com/questions/148507/how-to-prevent- xss-in-svg-文件上传

2017 年更新

GitHub 开发人员目前正在调查此问题：https ://github.com/github/markup/issues/556#issuecomment-306103203

2014-12 更新：GitHub 现在在 blob 显示上渲染 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 提到blob 很好，因为 SVG 位于iframe.

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

  • 一般的 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，但这似乎不是标准所要求的，所以 GitHub 可能是安全的。

    如果您直接打开 SVG（但似乎 GitHub 从不直接在github.com域上显示图像）或者它是内联的（目前已被 GitHub 完全删除），浏览器会运行它，因此这些情况不应该是安全问题。相关链接：

以下问题一般询问 SVG 的风险：https ://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

于 2014-09-01T13:05:15.853 回答
15

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

于 2014-07-15T06:23:43.627 回答
8

这将起作用。使用以下模式链接到您的 SVG：

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

缺点是对路径中的所有者和 repo 进行硬编码，这意味着如果重命名其中任何一个，svg 就会中断。

于 2015-09-08T04:26:14.923 回答
4

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

我从您的帖子中检查了 github 图像（由于连接失败，google doc 图像根本没有加载）。来自 github 的图像以 content-type: text/plain 的形式提供，浏览器不会将其呈现为图像。

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

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

于 2012-12-10T23:38:17.813 回答
3

就像这在 Github 上对我有用。

![Image Caption](ImageAddressOnGitHub.svg)

或者

<img src="ImageAddressOnGitHub.svg">
于 2020-03-17T12:13:44.580 回答
1

自 2022 年 1 月以来，这似乎是可能的（而且很容易）：

允许上传 .svg 文件到 Markdown

现在可以将文件上传.svg到问题、PR、讨论和 Markdown 文件中的评论，例如READMEs.

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

展示如何将 SVG 图像上传到问题评论的动画。

于 2022-01-26T19:58:27.883 回答
1

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

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

输入你需要的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
于 2016-06-08T06:32:07.983 回答