Skip to content

Instantly share code, notes, and snippets.

@ctalladen78
Created June 29, 2020 15:01
Show Gist options
  • Save ctalladen78/612b88460b00664af4fee8a34aab50e9 to your computer and use it in GitHub Desktop.
Save ctalladen78/612b88460b00664af4fee8a34aab50e9 to your computer and use it in GitHub Desktop.
Linking to SVG files hosted on github

https://github.com/potherca-blog/StackOverflow/blob/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/readme.md


permalink: /question.13808020.include-an-svg-hosted-on-github-in-markdown/index.html

Linking to SVG files hosted on github

The purpose of raw.github.com is to allow users to view the contents of a file, so for text based files (SVG, JS, CSS, etc) this means you get the wrong headers and things break in the browser.

Update: 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.

See the examples below for rendering details.

Although you cannot link directly to SVG images from `raw.github.com` you could put the SVG files on the `gh-pages` branch (or [configure `master` as source][1] for Github Pages) and link to the files from [`github.io`][2]

As the file you are trying to get to display seems to part of your projects documentation this might be a win-win situation

If using Github Pages is not your thing, rawgithub.com could be an option. RawGit retrieves your files and sets the correct headers for you.


Examples

I copied the SVG image from the question to a repo on github in order to create the examples below:

Linking to relative files (Works, but obviously only https://github.com/)

Code

![Alt text](./controllers_brief.svg)
<img src="./controllers_brief.svg">

Result

Alt text

Linking to RAW files (Does not work)

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

Alt text

Linking to RAW files using ?sanitize=true (Works)

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

Alt text

Linking to files hosted on github.io (Works)

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

Result

Alt text

Linking to RAW files using rawgithub.com (Also Works)

Note: Sometimes the RawGithub service is down/doesn't work. If you don't see an image below, that is probably the case.

Code

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

Result

Alt text

@xiaominglui
Copy link

nice work👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment