6

I am trying to create a markdown file in GitHub and would like to put an SVG image in it. GitHub is not rendering the image at all. I tried with <img />, with ![](). Is simply not working!

Just modified the repository so that is public: https://github.com/michelucci/deepbook

Mureinik
  • 297,002
  • 52
  • 306
  • 350
Umberto
  • 1,387
  • 1
  • 13
  • 29

3 Answers3

1

GitHub's markdown seems to be blocking SVG files, but you can always use bare HTML tags:

<img src="neuron_fig1.svg"/>
Mureinik
  • 297,002
  • 52
  • 306
  • 350
  • Thanks. I tried (see the repository). But nothing is showing up! – Umberto Sep 23 '17 at 16:07
  • 1
    @Umberto If you want to use fully qualified links instead of relative one, you need to use `raw.githubusercontent.com`, i.e.: `https://raw.githubusercontent.com/michelucci/deepbook/master/images/neuron_fig1.svg`. – Mureinik Sep 23 '17 at 16:09
  • Thanks. I also tried your solution above just pointing to the file itself but is not showing anything. I will try with a fully qualified link... – Umberto Sep 23 '17 at 16:10
1

It seems like GitHub now requires the http query parameters sanitize=true at the end of the SVG string. If you're linking to an image in your repository from a wiki, you may already have parameters at the end of the URL. So either add ?sanitize=true if there are no query parameters, or &sanitize=true otherwise

<img alt="my image" src="https://raw.githubusercontent.com/user/branch/images/myimage.svg?example=foo&sanitize=true>
nteissler
  • 1,513
  • 15
  • 16
0

Update 2022: a simple drag & drop is enough.

Original answer (2017)

See issue 458 regarding any inline HTML, but since it is not your issue, you can compare your page to this one: it does display a lot of svg pictures, and its source is here.

"source": [
    "## Python Objects\n",
    "\n",
    "We begin with a look at a Python object. In Python, objects are stored in memory blocks independently allocated on the heap. A single floating point value looks something like this:\n",
    "\n",
    "![Python Float](fig/python_float.svg)\n",
    "\n",
    "This doesn’t look too bad, in a dynamically typed system we need to store some metadata about the type, and we need to store the data containing the value."
   ]
  },

So relative URL (to docs/intro-01/fig) does work.

Your code:

   "source": [
    " ![](neuron_fig1.svg) \n",
    " **Fig. 1** The structure of a neuron. $x_i$ are the input, $w_i$ are the weights."
   ]
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • I believe you! But in my case is not showing anything... Maybe are how the svg are written. I generated them with inkscape... – Umberto Sep 23 '17 at 16:14
  • @Umberto I have added your current code to compare against the example I have found working. – VonC Sep 23 '17 at 16:15
  • Thanks but ```![Python Float](fig/python_float.svg)``` is similar to my (note that I moved the image to my root directory to see if that would have helped) but still no luck... I don't see any difference (except that my is referring to an image in the same root directory)... Oh and by the way with png it works perfectly (I updated the files). – Umberto Sep 23 '17 at 16:17
  • 1
    @Umberto I agree. All I see is tose extra spaces in your string. – VonC Sep 23 '17 at 16:18
  • To add to it, it woks perfectly on my laptop locally. – Umberto Sep 23 '17 at 16:19
  • @Umberto can you try with the source code and svg picture of the example I have found? (when added, committed and pushed to your GitHub repo). Just for testing. – VonC Sep 23 '17 at 16:21
  • Have to leave now. Will try later. Thx!! – Umberto Sep 23 '17 at 16:26
  • @Umberto if this works on your computer but not on GitHub, do check the eol (end of line) characters: make sure they are not changed on commit. `git config --global core.autocrlf false` – VonC Sep 23 '17 at 16:28
  • Tried that but not working... I probably have to use png. Altough it annoys me to admit defeat. – Umberto Sep 23 '17 at 18:08
  • @Umberto did you check your end of lines? Both for your ipynb file, and your svg file? – VonC Sep 23 '17 at 18:10
  • Tried your command and did a new commit. Trying to check the end of lines for both. Need to figure out how to do it on github ;) But I tried to upload the files to another repository via web (I usually use desktop) and it did not work exactly as in my original repository... – Umberto Sep 23 '17 at 18:16
  • @Umberto the command merely prevent any eol manipulation for *new* files. Try instead to create new files (with making sure of their eol), add, commit, and push – VonC Sep 23 '17 at 18:17
  • Tried. still not working. Will try a completely new repository and I will see how it goes. Will delete the old one – Umberto Sep 23 '17 at 18:22
  • Ok I don't know. It possibly be sketch that export the images in some kind of wrong format, or something else, but I will move to png. Pity, but I don't think it is worth to waste more time on this. Thank you very much @VonC for all your help!! – Umberto Sep 23 '17 at 18:30
  • I get this error (I checked the web errors from the console): Failed to load resource: the server responded with a status of 404 (Not Found) https://render.githubusercontent.com/view/images/neuron_fig1.svg Quite strange... It works with png... – Umberto Sep 23 '17 at 18:47