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


医生:


当前回答

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

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

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

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

其他回答

我联系了GitHub说GitHub。io托管的svg不再显示在GitHub READMEs中。我收到了这样的答复:

由于潜在的跨站脚本漏洞,我们不得不禁用GitHub.com上的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。 你只需要在文本区域拖放文件。

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

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

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

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

结果: