svg - 在 MarkDown 中包含 SVG(托管在 GitHub 上)

Question

我知道可以使用 ![Alt text](/path/to/img.jpg) 或 ![Alt text] 的 MD 语法将图像放置在 MD 中](/path/to/img.jpg "可选标题")，但我很难将 SVG 放置在代码托管在 GitHub 上的 MD 中。

最终使用rails3，并且现在经常更改模型，所以我使用RailRoady生成模型架构图的 SVG。我希望将该 SVG 放入 ReadMe.md 中并显示。当我在本地打开SVG文件时，它确实可以工作，那么如何让浏览器渲染MD文件中的SVG呢？鉴于代码在最终确定之前都是动态的(似乎永远不会)，将 SVG 托管在单独的位置似乎有点过分，而且我缺少实现此目的的方法。

我试图包含的 SVG 是 here在 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 “概述”

<小时/>

Google Doc :

Answer 1

raw.github.com的目的是允许用户查看文件的内容，因此对于基于文本的文件，这意味着(对于某些内容类型)您可能会得到错误的 header ，并且浏览器中的内容会中断。

当这个问题被问到时(2012 年)，SVG 不起作用。从那时起，Github 实现了各种改进。现在(至少对于 SVG)，将发送正确的 Content-Type header 。

添加 SVG 最简单的方法是使用 upload assets feature 。引用手册:

You can upload assets like images by dragging and dropping, selecting from a file browser, or pasting. You can upload assets to issues, pull requests, comments, and .md files in your repository.

自 2022 年起，“图像”还包括 SVG:

<小时/>

关于一路上发生的变化的一些评论:

• Github 实现了一项功能，使 SVG 可以与 Markdown 图像语法一起使用。 SVG 图像将被清理并使用正确的 HTTP header 显示。某些标签(如 <script> )被删除。

  要查看清理后的 SVG 或从其他位置(即从未托管在 http://github.com/ 上的存储库中的 Markdown 文件)实现此效果，只需附加 ?sanitize=true 即可。到 SVG 的原始 URL。

• 如AdamKatz所述在评论中，使用 github.io 以外的来源可能会带来潜在的隐私和安全风险。请参阅answer by CiroSantilli和 the answer by DavidChambers了解更多详情。

• The issue to resolve this 2015年10月13日在Github上开放，2017年8月31日解决

• 对 SVG 拖放文件上传的支持为 announced January 21 2022

示例

下面所述的所有方法都有效。

^{我将问题中的 SVG 图像复制到 a repo on github为了创建下面的示例}

使用相对路径链接到文件(有效，但显然仅在 github.com/github.io 上)

代码

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

结果

使用 ?sanitize=true 链接到 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">

结果

链接到 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">

结果