在MarkDown中包含一个SVG（托管在github上）

时间：2012-12-10 19:45:51

标签： svg github markdown

我知道可以使用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似乎有点矫枉过正，我错过了实现这一目标的方法。

我想在Github上添加here的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="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：

8 个答案:

答案 0 :(得分：149)

raw.github.com的目的是允许用户查看文件的内容，因此对于基于文本的文件（SVG，JS，CSS等），这意味着您在浏览器中获得了错误的标题和内容

<强>更新 Github实现了一项功能，使SVG可以与Markdown图像语法一起使用。 SVG图像将被清理并显示正确的HTTP标头。某些标签（例如<script>）已被删除。

要查看已清理的SVG或从其他地方实现此效果（例如，来自http://github.com/上没有托管的降价文件），只需将?sanitize=true附加到SVG的原始网址即可。

请参阅以下示例以了解详细信息。

虽然您无法直接链接到raw.github.com的SVG图像，但您可以将SVG文件放在gh-pages分支上（或configure master as source用于Github页面）并链接到github.io中的文件

由于您尝试显示的文件似乎是项目文档的一部分，因此可能是win-win situation

如果您不喜欢使用Github Pages，rawgithub.com可能是一个选项。 RawGit会检索您的文件并为您设置正确的标题。

实施例

我将问题中的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（Works）

链接到RAW文件

代码

![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（Works）

上托管的文件

代码

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

答案 1 :(得分：34)

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

  

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

答案 2 :(得分：16)

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

答案 3 :(得分：10)

这会奏效。使用以下模式链接到SVG：

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

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

答案 4 :(得分：7)

2017年更新

GitHub开发人员目前正在研究：https://github.com/github/markup/issues/556#issuecomment-306103203

更新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内。

GitHub无法提供SVG图像的可能理由

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

答案 5 :(得分：3)

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

我检查了帖子中的github图片（因为连接失败，谷歌文档图片根本没有加载）。来自github的图像以内容类型的形式提供：text / plain，浏览器不会将其呈现为图像。

svg的正确内容类型值是image / svg + xml。所以你必须确保svg文件设置正确的mime类型，但那是服务器问题。

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

答案 6 :(得分：3)

使用此网站：https://rawgit.com，它对我有用，因为我没有svg文件的权限问题。
请注意RawGit不是github的服务，如Rawgit FAQ中所述：

  

RawGit不以任何方式与GitHub相关联。请不要联系GitHub寻求RawGit的帮助

输入您需要的svg网址，例如：

<script type="application/javascript">
  function getIP(json) {
    ip=json.ip;   //Here I got the user IP Address
  }
  getIP(json);
  var KivaHan="221.120.101.58"
  var Office="221.120.99.186"
  if( ip==KivaHan ){
    document.write("Kiva Han IP Address: " + ip);
  }else{
    document.write("Office IP Address: " + ip);
  }
</script>
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

然后，您可以获得可用于显示的网址：

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

答案 7 :(得分：1)

就像在Github上为我工作一样。 

![Imgae Caption](ImageAddressOnGitHub.svg)

或

<img src="ImageAddressOnGitHub.svg">
相关问题
最新问题