我知道图像可以放置在MD的MD语法![Alt文本](/path/to/img.jpg)或![Alt文本](/path/to/img.jpg“可选标题”),但我很难将SVG放置在MD的代码托管在GitHub上。
Ultimately using rails3, and changing the model frequently right now, so I am using RailRoady to generate an SVG of the schema diagram of the models. I would like for that SVG to then be placed in the ReadMe.md, and be displayed. When I open the SVG file locally, it does work, so how do I get the browser to render the SVG in the MD file? Given that the code will be dynamic until it is finalized (seemingly never), hosting the SVG in a separate place seems overkill and that I am missing an approach to accomplish this.
我想要包含的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“概述”
医生:
raw.github.com的目的是允许用户查看文件的内容,因此对于基于文本的文件,这意味着(对于某些内容类型)您可能会得到错误的标题和浏览器中的内容。
当这个问题被提出(2012年)时,svg并不管用。从那以后,Github进行了各种改进。现在(至少对于SVG),发送了正确的Content-Type报头。
例子
下面列出的所有方法都可以。
为了创建下面的示例,我将问题中的SVG图像复制到github上的repo
使用相对路径链接到文件(工作,但显然只在github.com / github.io)
Code
![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">
结果
在github.com上查看工作示例。
链接到RAW文件
Code
![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链接到RAW文件
Code
![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上的文件
Code
![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 has implemented a feature which makes it possible for SVG's to be used with the Markdown image syntax. The SVG image will be sanitized and displayed with the correct HTTP header. Certain tags (like <script>) are removed.
To view the sanitized SVG or to achieve this effect from other places (i.e. from markdown files not hosted in repos on http://github.com/) simply append ?sanitize=true to the SVG's raw URL.
As stated by AdamKatz in the comments, using a source other than github.io can introduce potentially privacy and security risks. See the answer by CiroSantilli and the answer by DavidChambers for more details.
The issue to resolve this was opened on Github on October 13th 2015 and was resolved on August 31th 2017
2020年更新:他们如何在避免XSS攻击的情况下工作
GitHub似乎使用了两种安全方法,这是一篇好文章:https://digi.ninja/blog/svg_xss.php参见:https://security.stackexchange.com/questions/148507/how-to-prevent-xss-in-svg-file-upload
show SVG inside <img tag, which prevents scripts from running, e.g. on READMEs: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a
use Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox. This prevents the script from running even in raw which contains the raw SVG file: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg
You can see the header with curl -vvv. The regular github.com pages also have a content-security-policy, but it is much larger.
更新2017
GitHub开发人员目前正在研究这个:https://github.com/github/markup/issues/556#issuecomment-306103203
2014-12更新:GitHub现在渲染SVG blob显示,所以我不认为有任何理由不渲染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冻结,但Chromium 48没问题:https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petah提到,斑点很好,因为SVG在iframe中。
GitHub不提供SVG图像的可能原因
general XML vulnerabilities. E.g. opening a billion laughs exploit just made Firefox crash my system. Firefox bug with exploit attached: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html. Same on Chromium: https://code.google.com/p/chromium/issues/detail?id=231562
SVG XSS scripting: while most browsers don't run scripts when the SVG is embedded with img, it seems that this is not required by the standards, so maybe GitHub is playing it safe.
Browsers do run it if you open the SVG directly (but it appears that GitHub never shows images directly on the github.com domain) or if it is inline (which are currently completely removed by GitHub), so those cases shouldn't be a security concern. Relevant links:
spec: http://www.w3.org/TR/SVG/script.html
interactive SVG demo: 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