在MarkDown中包含一个SVG(托管在github上)

Question

我知道一个图像可以放在一个MD的MD语法中,![Alt text](/path/to/img.jpg)或者![Alt text](/path/to/img.jpg "Optional title"),但是我很难在MD中放置一个SVG代码托管在Github上.

最终使用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">

得到的结果:

Google Doc:

Answer 1

目的raw.github.com是允许用户查看文件的内容,因此对于基于文本的文件(SVG,JS,CSS等),这意味着您在浏览器中获得了错误的标题和内容.

更新: Github实现了一项功能,使SVG可以与Markdown图像语法一起使用.SVG图像将被清理并显示正确的HTTP标头.<script>删除某些标签(如).

要查看已清理的SVG或从其他地方(即来自http://github.com/上的repos中未托管的markdown文件)实现此效果,只需附加?sanitize=true到SVG的原始URL.

请参阅下面的示例以获取详细信息.

虽然您无法直接链接到SVG图像,但raw.github.com您可以将SVG文件放在gh-pages分支上(或配置master为Github页面的源)并链接到github.io

由于您试图显示的文件似乎是项目文档的一部分,这可能是一个双赢的局面

如果使用Github Pages不是你的事,rawgithub.com可能是一个选择.RawGit会检索您的文件并为您设置正确的标题.

• 正如AdamKatz在评论中所述,使用github.io之外的源可能会带来潜在的隐私和安全风险.见由CiroSantilli答案,并通过DavidChambers的回答更多的细节.

• 正如MonsieurDart 在评论中所述,RawGit 不适用于私人回购.

• 解决这个问题于 2015年10月13日在Github上开放,并于2017年8月31日得到解决

例子

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

链接到相关文件(Works,但显然只有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">

结果

使用?sanitize=true(Works)链接到RAW文件

码

![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上托管的文件(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">

结果

使用rawgithub.com链接到RAW文件(也是Works)

注意:有时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">

结果

Answer 2

我联系了GitHub,说github.io托管的SVG不再显示在GitHub自述文件中.我收到了这个回复:

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

Answer 3

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

Answer 4

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

允许将 .svg 文件上传到 Markdown

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

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

Answer 5

这会奏效.使用以下模式链接到SVG:

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

缺点是硬件编码所有者和路径中的repo,这意味着如果其中任何一个被重命名,svg将会中断.

Answer 6

2017年更新

GitHub开发人员目前正在研究这个问题:https://github.com/github/markup/issues/556#issuecomment-306103203

更新2014-12:GitHub现在在blob show上呈现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 Freeze,但是Chromium 48还可以:https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

佩塔提到斑点很好,因为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

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)

结果：

Answer 8

就像这在 Github 上对我有用一样。

![Image Caption](ImageAddressOnGitHub.svg)

或者

<img src="ImageAddressOnGitHub.svg">

Answer 9

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

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

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

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