我知道图像可以放置在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“概述”


医生:


当前回答

使用这个网站:https://rawgit.com,它为我工作,因为我没有与svg文件的权限问题。 请注意,RawGit不是github的服务,如RawGit FAQ中所述:

RawGit与GitHub没有任何关联。请不要联系GitHub寻求RawGit的帮助

输入你需要的svg的url,例如:

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

然后,你可以得到下面的url,可以用来显示:

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

其他回答

从2022年1月开始,这似乎是可能的(而且很容易):

允许上传。svg文件到Markdown 现在可以将.svg文件上传到问题、pr、讨论和Markdown文件中的注释中,如readme。 你只需要在文本区域拖放文件。

使用这个网站:https://rawgit.com,它为我工作,因为我没有与svg文件的权限问题。 请注意,RawGit不是github的服务,如RawGit FAQ中所述:

RawGit与GitHub没有任何关联。请不要联系GitHub寻求RawGit的帮助

输入你需要的svg的url,例如:

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

然后,你可以得到下面的url,可以用来显示:

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

我有一个带有img-tag的工作示例,但您的图像不会显示。 我看到的不同之处在于内容类型。

我检查了你帖子中的github图像(谷歌文档图像根本无法加载,因为连接失败)。来自github的图像以content-type: text/plain形式传递,它不会被浏览器渲染为图像。

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

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

这是可行的。使用下面的模式链接到你的SVG:

https://cdn.rawgit.com/ < repo-owner > / <回购> / <分支> /道路/ to.svg

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

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