Include an SVG hosted on GitHub in MarkDown

Question

I know with that an image can be placed in a MD with the MD syntax of either   Alt text   path to img jpg  or   Alt text   path to img jpg  quot Optional title quot    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   quot Overview quot    lt img src  quot https   raw github com specialorange FDXCM master doc controllers brief svg quot  gt     Alt text  https   raw github com specialorange FDXCM master doc controllers brief svg    Google Doc  https   docs google com drawings d 1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4 edit      lt img src  quot https   docs google com drawings pub id 117XsJ1kDyaY-n8AdPS3 8jTgMyITqaoT3-ah BSc9YQ amp w 960 amp h 720 quot  gt    lt img src  quot https   raw github com specialorange FDXCM master doc controllers brief svg quot  gt    lt img src  quot https   docs google com drawings d 1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4 edit quot  gt   to get the results of   1  https   github com specialorange FDXCM blob master Rails fdxcm doc controllers brief svg   quot Overview quot     Google Doc

User · Answer

Just like this worked for me on Github     Imgae Caption  ImageAddressOnGitHub svg    or    lt img src  ImageAddressOnGitHub svg  gt

User · Answer

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   lt img src    controllers brief svg  gt    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   lt img src  https   raw github com potherca-blog StackOverflow master question 13808020 include-an-svg-hosted-on-github-in-markdown controllers brief svg  gt    Result     Linking to RAW files using  sanitize true  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   lt 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  gt    Result     Linking to files hosted on github io  Code    Alt text  https   potherca-blog github io StackOverflow question 13808020 include-an-svg-hosted-on-github-in-markdown controllers brief svg   lt img src  https   potherca-blog github io StackOverflow question 13808020 include-an-svg-hosted-on-github-in-markdown controllers brief svg  gt    Result       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  lt script gt   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

User · Answer

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

User · Answer

This will work  Link to your SVG using the following pattern   https   cdn rawgit com  lt repo-owner gt   lt repo gt   lt branch gt  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

User · Answer

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  lt 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 in raw which contains the raw SVG file  https   raw githubusercontent com cirosantilli test-git-web-interface 8e394cdb012cba4bcf55ebdb89f36872b4c6c12a svg-foreignObject svg You can see the header with curl -vvv  The regular github com pages also have a content-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

User · Answer

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

User · Answer

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

User · Answer

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

[svg] Include an SVG (hosted on GitHub) in MarkDown

Examples related to svg

Examples related to github

Examples related to markdown