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


医生:


当前回答

除了常规SVG之外,您还可以像任何其他格式一样在标记文件中插入动画SVG图像。它可以是GIF图像的一个很好的替代品。

如果你的动画SVG和markdown文件都在同一个GitHub存储库中,请使用相对链接:

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

示例(假设映像在存储库中的assets目录中):

![My animated logo](assets/my-logo.svg)

结果:

其他回答

除了常规SVG之外,您还可以像任何其他格式一样在标记文件中插入动画SVG图像。它可以是GIF图像的一个很好的替代品。

如果你的动画SVG和markdown文件都在同一个GitHub存储库中,请使用相对链接:

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

示例(假设映像在存储库中的assets目录中):

![My animated logo](assets/my-logo.svg)

结果:

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

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

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

尝试使用http://svg.tutorial.aptico.de/grafik_svg/dummy3.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

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

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

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