首页 文章

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

提问于
浏览
113

我知道可以将一个图像放在一个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上是herehttps://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">

得到的结果:

Overview

Alt text

Google Doc

7 回答

  • 2

    使用此站点: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 bellow:

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

    这会奏效 . 使用以下模式链接到SVG:

    https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg

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

  • 10

    Update 2017

    GitHub开发者目前正在调查此事:https://github.com/github/markup/issues/556#issuecomment-306103203

    Update 2014-12 :GitHub现在在blob show上呈现SVG,所以我没有看到任何理由不在README渲染上渲染:

    另请注意,该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

    如果你直接打开SVG浏览器会运行它(但看起来GitHub从不直接在 github.com 域上显示图像)或者它是内联的(目前GitHub已经完全删除了),所以这些情况不应该是一个安全问题 . 相关链接:

    以下问题一般询问SVG的风险:https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

  • 34

    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 .


    例子

    我将SVG图像从问题复制到a repo on github,以便创建以下示例:

    链接到相关文件(Works,但显然只有https://github.com/)

    代码

    ![Alt text](./controllers_brief.svg)
    <img src="./controllers_brief.svg">
    

    结果

    the working example on github.com .

    链接到RAW文件(不起作用)

    代码

    ![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">
    

    结果

    Alt text

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

    代码

    ![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">
    

    结果

    Alt text

    链接到托管的文件在github.io(作品)

    代码

    ![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">
    

    结果

    Alt text

    使用rawgithub.com链接到RAW文件(也可以)

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

    代码

    ![Alt text](https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
    <img src="https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
    

    结果

    Alt text

  • 16

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

    由于潜在的跨站点脚本漏洞,我们不得不在GitHub.com上禁用svg图像渲染 .

  • 3

    我有一个带有img-tag的工作示例,但您的图像不会显示 . 我看到的差异是内容类型 .

    我检查了你的帖子中的github图像(由于连接失败,谷歌文档图像根本没有加载) . 来自github的图像以内容类型提供:text / plain,浏览器不会将其呈现为图像 .

    svg的正确内容类型值是image / svg xml . 所以你必须确保svg文件设置正确的mime类型,但这是一个服务器问题 .

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

  • 7

    rawgit.com很好地解决了这个问题 . 对于每个请求,它从GitHub检索适当的文档,并且至关重要的是,使用正确的Content-Type标头提供它 .

相关问题