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

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

最终使用rails3,并且现在经常更改模型,所以我使用RailRoady生成模型模式图的SVG。 我希望将该SVG放在ReadMe.md中,然后显示出来。 当我在本地打开SVG文件时,它确实起作用,那么如何让浏览器在MD文件中呈现SVG? 鉴于代码将是动态的,直到最终确定(似乎永远不会),将SVG托管在一个单独的位置看起来是过度的,我错过了一种方法来实现这一点。

我想包含的SVG在Github上: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svghttps://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="http://www.djcxy.com/uploads/images/7e/b9/7eb91070188ebcdcd2e10bb503362ec8.svg">

![Alt text](http://www.djcxy.com/uploads/images/7e/b9/7eb91070188ebcdcd2e10bb503362ec8.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="http://www.djcxy.com/uploads/images/7e/b9/7eb91070188ebcdcd2e10bb503362ec8.svg">

<img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">

得到以下结果:

Overview

替代文字

Google文件:


raw.github.com的目的是允许用户查看文件的内容,所以对于基于文本的文件(SVG,JS,CSS等)来说,这意味着你得到错误的头文件,并在浏览器中出现问题。

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

要查看已清理过的SVG或从其他位置(例如http://github.com/上的非托管缩减文件)获得此效果,只需将?sanitize=true附加到SVG的原始URL即可。

有关呈现细节,请参阅下面的示例。

虽然你不能直接链接到raw.github.com SVG图像, raw.github.com你可以把SVG文件放在gh-pages分支上(或者把master为Github Pages的源代码)并链接到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](http://www.djcxy.com/uploads/images/78/55/7855aa99fa7d59ae85be824ebd503850.svg)
    <img src="http://www.djcxy.com/uploads/images/78/55/7855aa99fa7d59ae85be824ebd503850.svg">
    

    结果

    替代文字

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

    ![Alt text](http://www.djcxy.com/uploads/images/78/55/7855aa99fa7d59ae85be824ebd503850.svg?sanitize=true)
    <img src="http://www.djcxy.com/uploads/images/78/55/7855aa99fa7d59ae85be824ebd503850.svg?sanitize=true">
    

    结果

    替代文字

    链接到github.io上托管的文件(Works)

    ![Alt text](http://www.djcxy.com/uploads/images/04/21/0421cc400fd4bbffe1c507beab83ab91.svg)
    <img src="http://www.djcxy.com/uploads/images/04/21/0421cc400fd4bbffe1c507beab83ab91.svg">
    

    结果

    替代文字

    使用rawgithub.com链接到RAW文件(也适用于)

    注意:有时RawGithub服务已关闭/不起作用。 如果你没有看到下面的图片,那很可能是这种情况。

    ![Alt text](http://www.djcxy.com/uploads/images/7a/6d/7a6dcf7b7b11e32cf48cb894b7d57538.svg)
    <img src="http://www.djcxy.com/uploads/images/7a/6d/7a6dcf7b7b11e32cf48cb894b7d57538.svg">
    

    结果

    替代文字


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

    由于潜在的跨站点脚本漏洞,我们必须禁用GitHub.com上的svg图像呈现。


    rawgit.com很好地解决了这个问题。 对于每个请求,它都会从GitHub中检索相应的文档,并且最重要的是通过正确的Content-Type头来提供它。

    链接地址: http://www.djcxy.com/p/20177.html

    上一篇: include an SVG (hosted on github) in MarkDown

    下一篇: How to add color to Github's README.md file