Embed SVG image in GitHub wiki in 2016

Question

Yes, there are questions about this. Unfortunately, the answers are all messy now with information about different things that worked differently across the past five or so years.

So how the heck am I to

• embed
• an svg image
• in a GitHub .wiki folder
• inside a GitHub .wiki page

I can't believe you need a PhD for this.

Here is my example page with broken embedding: - https://github.com/Sciss/ScalaCollider/wiki/Architecture/2413e094a59df4705e770b2a57ff84a8f0a1e7b4

Here is the actual thing: - https://raw.githubusercontent.com/wiki/Sciss/ScalaCollider/images/ScalaCollider_types.svg

I suppose the problem is this renders as raw text instead of being shown as svg image?

And no, I don't want to set up gh-pages. I want to use the bloody Wiki, because that is what it's supposed to do.

Answer 1

Ok, so apparently this is what happens:

• GitHub doesn't want to render images properly from rawgithubcontent.
• So forget about embedding them in the wiki
• Create a gh-pages branch for the main project unless you already have one
• Find or create an unused directory in that branch, and add the image there
• Link to the gh-pages URL

E.g. https://sciss.github.io/ScalaCollider/images/ScalaCollider_types.svg

Not cool, but it works.

Answer 2

You can do that using jsdelivr.net.

Steps:

1. Upload the file https://raw.githubusercontent.com/wiki/Sciss/ScalaCollider/images/ScalaCollider_types.svg to one folder under any repository.
2. Find the svg link on GitHub, and click to the "Raw" version.
3. Copy the URL.
4. Change raw.githubusercontent.com to cdn.jsdelivr.net
5. Insert /gh/ before your username.
6. Remove the branch name.
7. (Optional) Insert the version you want to link to, as @version (if you do not do this, you will get the latest - which may cause long-term caching)
8. Using label image, then add ?sanitize=true to the path tail of the svg file.

For example,

If raw svg file path in github is:

https://raw.githubusercontent.com/yanglr/Beautify-cnblogs/master/images/github-pendant-rightCorner.svg

You can use below:

<a href="https://github.com/yanglr">
<img style="position: absolute; top: 76px; right: 0; border: 0" alt="Fork me on GitHub" 
src="https://cdn.jsdelivr.net/gh/yanglr/Beautify-cnblogs/images/github-pendant-rightCorner.svg?sanitize=true"></a>

The result:

Reference:

Link and execute external JavaScript file hosted on GitHub