我知道可以将一个图像放在一个MD语法为 ![Alt text](/path/to/img.jpg)
或 ![Alt text](/path/to/img.jpg "Optional title")
的MD中,但是我很难在MD中放置一个SVG,代码在Github上托管 .
最终使用rails3,并且现在经常更改模型,所以我使用RailRoady生成模型架构图的SVG . 我希望将该SVG放入ReadMe.md并显示 . 当我在本地打开SVG文件时,它确实有效,那么如何让浏览器在MD文件中呈现SVG?鉴于代码在最终确定之前是动态的(看似永远不会),在一个单独的地方托管SVG似乎有点矫枉过正,我错过了实现这一目标的方法 .
我试图包含的SVG在Github上是here: 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">
得到的结果:
7 回答
使用此站点:https://rawgit.com,它适用于我,因为我没有svg文件的权限问题 .
请注意RawGit不是github的服务,如Rawgit FAQ中所述:
输入您需要的svg的URL,例如:
然后,您可以获得可用于显示的url bellow:
这会奏效 . 使用以下模式链接到SVG:
https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg
缺点是在路径中硬编码所有者和repo,这意味着如果其中任何一个被重命名,svg将会中断 .
Update 2017
GitHub开发者目前正在调查此事:https://github.com/github/markup/issues/556#issuecomment-306103203
Update 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
Petah mentioned blob很好,因为SVG在
iframe
内 .Possible rationale for GitHub not serving SVG images
一般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
raw.github.com
的目的是允许用户查看文件的内容,因此对于基于文本的文件(SVG,JS,CSS等),这意味着您在浏览器中获得了错误的 Headers 和内容 .Update: Github实现了一项功能,使SVG可以与Markdown图像语法一起使用 . SVG图像将被清理并显示正确的HTTP标头 . 某些标签(如
<script>
)已删除 .要查看已清理的SVG或从其他地方(即从http://github.com/上未在repos中托管的markdown文件)实现此效果,只需将
?sanitize=true
附加到SVG的原始URL即可 .请参阅下面的示例以了解详细信息 .
虽然您无法直接链接到raw.github.com上的SVG图像,但您可以将SVG文件放在gh-pages分支上(或将master配置为Github Pages的源代码)并链接到github.io中的文件
由于您试图显示的文件似乎是项目文档的一部分,这可能是一个双赢的局面
如果使用Github Pages不是你的事,rawgithub.com可能是一个选择 . RawGit会检索您的文件并为您设置正确的 Headers .
如评论中AdamKatz所述,使用github.io以外的来源可能会带来潜在的隐私和安全风险 . 有关详细信息,请参阅answer by CiroSantilli和the answer by DavidChambers .
如评论中MonsieurDart所述,RawGit does not work for private repos .
The issue to resolve this于2015年10月13日在Github上开通,并于2017年8月31日解决
例子
我将SVG图像从问题复制到a repo on github,以便创建以下示例:
链接到相关文件(Works,但显然只有https://github.com/)
代码
结果
见the working example on github.com .
链接到RAW文件(不起作用)
代码
结果
使用?sanitize = true链接到RAW文件(Works)
代码
结果
链接到托管的文件在github.io(作品)
代码
结果
使用rawgithub.com链接到RAW文件(也可以)
注意:有时RawGithub服务已关闭/不起作用 . 如果您没有看到下面的图像,那可能就是这种情况 .
代码
结果
我联系了GitHub,说github.io托管的SVG不再显示在GitHub自述文件中 . 我收到了这个回复:
我有一个带有img-tag的工作示例,但您的图像不会显示 . 我看到的差异是内容类型 .
我检查了你的帖子中的github图像(由于连接失败,谷歌文档图像根本没有加载) . 来自github的图像以内容类型提供:text / plain,浏览器不会将其呈现为图像 .
svg的正确内容类型值是image / svg xml . 所以你必须确保svg文件设置正确的mime类型,但这是一个服务器问题 .
尝试使用http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg并且不要忘记在标签中指定宽度和高度 .
rawgit.com很好地解决了这个问题 . 对于每个请求,它从GitHub检索适当的文档,并且至关重要的是,使用正确的Content-Type标头提供它 .