Include an SVG (hosted on GitHub) in MarkDown
SvgGithubMarkdownSvg Problem Overview
I know that an image can be placed in an MD with the MD syntax of either ![Alt text](/path/to/img.jpg)
or ![Alt text](/path/to/img.jpg "Optional title")
, but I am having difficulty placing an SVG in MD where the code is hosted on 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.
The SVG I am trying to include is here on GitHub: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg
I have tried the following, with an actual image as well to verify the syntax is working, just that the SVG code isn't being rendered:
![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">
to get the results of:
1: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Overview"
https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">
https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720">
https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg">
https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit">
Svg Solutions
Solution 1 - Svg
The purpose of raw.github.com
is to allow users to view the contents of a file, so for text based files this means (for certain content types) you can get the wrong headers and things break in the browser.
When this question was asked (in 2012) SVGs didn't work. Since then Github has implemented various improvements. Now (at least for SVG), the correct Content-Type headers are sent.
Examples
All of the ways stated below will work.
I copied the SVG image from the question to a repo on github in order to create the examples below
Linking to files using relative paths (Works, but obviously only on github.com / github.io)
Code
![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">
Result
See the working example on github.com.
Linking to RAW files
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">
Result
https://raw.github.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
?sanitize=true
Linking to RAW files using 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">
Result
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
Linking to files hosted onCode
![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">
Result
https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Some comments regarding changes that happened along the way:
-
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
Solution 2 - Svg
I contacted GitHub to say that github.io-hosted SVGs are no longer displayed in GitHub READMEs. I received this reply:
> We have had to disable svg image rendering on GitHub.com due to potential cross site scripting vulnerabilities.
Solution 3 - Svg
Update 2020: how they made it work while avoiding XSS attacks
GitHub appears to use two security approaches, this is a good article: https://digi.ninja/blog/svg_xss.php see also: https://security.stackexchange.com/questions/148507/how-to-prevent-xss-in-svg-file-upload
-
show SVG inside
<img
tag, which prevents scripts from running, e.g. on READMEs: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a -
use
Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox
. This prevents the script from running even inraw
which contains the raw SVG file: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svgYou can see the header with
curl -vvv
. The regulargithub.com
pages also have acontent-security-policy
, but it is much larger.
Update 2017
A GitHub dev is currently looking into this: https://github.com/github/markup/issues/556#issuecomment-306103203
Update 2014-12: GitHub now renders SVG on blob show, so I don't see any reason why not to render on README renderings:
- https://github.com/blog/1902-svg-viewing-diffing
- https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
Also note that that SVG does have an XSS attempt but it does not run: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
The billion laugh SVG does make Firefox 44 Freeze, but Chromium 48 is OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petah mentioned that blobs are fine because the SVG is inside an iframe
.
Possible rationale for GitHub not serving SVG images
-
general XML vulnerabilities. E.g. opening a billion laughs exploit just made Firefox crash my system. Firefox bug with exploit attached: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html. Same on Chromium: https://code.google.com/p/chromium/issues/detail?id=231562
-
SVG XSS scripting: while most browsers don't run scripts when the SVG is embedded with
img
, it seems that this is not required by the standards, so maybe GitHub is playing it safe.Browsers do run it if you open the SVG directly (but it appears that GitHub never shows images directly on the
github.com
domain) or if it is inline (which are currently completely removed by GitHub), so those cases shouldn't be a security concern. Relevant links:- spec: http://www.w3.org/TR/SVG/script.html
- interactive SVG demo: http://www.w3.org/TR/SVG/images/script/script01.svg
The following questions asks about the risks of SVG in general: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload
Solution 4 - Svg
rawgit.com solves this problem nicely. For each request, it retrieves the appropriate document from GitHub and, crucially, serves it with the correct Content-Type header.
Solution 5 - Svg
This will work. Link to your SVG using the following pattern:
https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg
The downside is hardcoding the owner and repo in the path, meaning the svg will break if either of those are renamed.
Solution 6 - Svg
I have a working example with an img-tag, but your images won't display. The difference I see is the content-type.
I checked the github image from your post (the google doc images don't load at all because of connection failures). The image from github is delivered as content-type: text/plain, which won't get rendered as an image by your browser.
The correct content-type value for svg is image/svg+xml. So you have to make sure that svg files set the correct mime type, but that's a server issue.
Try it with http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg and don't forget to specify width and height in the tag.
Solution 7 - Svg
Just like this worked for me on Github.
![Image Caption](ImageAddressOnGitHub.svg)
or
<img src="ImageAddressOnGitHub.svg">
Solution 8 - Svg
Since Jan. 2022, that seems possible (and easy):
> ## Allow to upload .svg files to Markdown
>
> It is now possible to upload .svg
files to comments in issues, PRs, discussions, and Markdown files, like READMEs
.
>
> You just have to drag and drop the file in the text area.
>
>
Solution 9 - Svg
Use this site: https://rawgit.com , it works for me as I don't have permission issue with the svg file.
Please pay attention that RawGit is not a service of github, as mentioned in Rawgit FAQ :
> RawGit is not associated with GitHub in any way. Please don't contact GitHub asking for help with RawGit
Enter the url of svg you need, such as :
https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg
Then, you can get the url bellow which can be used to display:
https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg
Solution 10 - Svg
In addition to regular SVGs, you can also insert [animated SVG images] in the markdown file like any other format. It can be a good alternative to GIF images.
Use relative links if both your animated SVG and your markdown file are in the same GitHub repository:
![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>
Example (assuming the image is in assets
directory in the repository):
![My animated logo](assets/my-logo.svg)
Result:
https://raw.githubusercontent.com/mahozad/mahozad/master/logo.svg"> https://raw.githubusercontent.com/mahozad/mahozad/master/logo.svg" width="128"/>
[animated SVG images]: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL "MDN Web Docs: SVG animation with SMIL"