在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.svg
: 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="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">
得到以下结果:
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