So che un'immagine può essere inserita in un MD con la sintassi MD di uno dei due ![Alt text](/path/to/img.jpg)o ![Alt text](/path/to/img.jpg "Optional title"), ma ho difficoltà a posizionare un SVG in MD in cui il codice è ospitato su GitHub.

Alla fine uso rails3 e cambio il modello frequentemente in questo momento, quindi sto usando RailRoady per generare un SVG del diagramma dello schema dei modelli. Vorrei che quel file SVG venisse quindi inserito nel file ReadMe.md e visualizzato. Quando apro il file SVG localmente, funziona, quindi come faccio a ottenere il browser per il rendering del file SVG nel file MD? Dato che il codice sarà dinamico fino a quando non sarà finalizzato (apparentemente mai), l'hosting di SVG in un luogo separato sembra eccessivo e mi manca un approccio per raggiungere questo obiettivo.

L'SVG che sto cercando di includere è qui su GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Ho provato quanto segue, anche con un'immagine reale per verificare che la sintassi funzioni, solo che il codice SVG non viene visualizzato:

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

per ottenere i risultati di:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Panoramica"

Google Doc :

Lo scopo raw.github.comè quello di consentire agli utenti di visualizzare il contenuto di un file, quindi per i file di testo questo significa (per alcuni tipi di contenuto) è possibile ottenere le intestazioni errate e le cose si rompono nel browser.

Quando è stata posta questa domanda (nel 2012) gli SVG non funzionavano. Da allora Github ha implementato vari miglioramenti. Ora (almeno per SVG), vengono inviate le intestazioni di Content-Type corrette.

Esempi

Tutti i modi indicati di seguito funzioneranno.

^{Ho copiato l'immagine SVG dalla domanda in un repository su github per creare gli esempi seguenti}

Collegamento a file tramite percorsi relativi (funziona, ma ovviamente solo su github.com / github.io)

Codice

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

Risultato

Vedi l'esempio funzionante su github.com .

Collegamento a file RAW

Codice

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

Risultato

Collegamento a file RAW utilizzando ?sanitize=true

Codice

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

Risultato

Collegamento a file ospitati su github.io

Codice

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

Risultato

Alcuni commenti riguardanti i cambiamenti avvenuti lungo il percorso:

• Github ha implementato una funzione che consente di utilizzare SVG con la sintassi dell'immagine Markdown. L'immagine SVG verrà disinfettata e visualizzata con l'intestazione HTTP corretta. Alcuni tag (come <script>) vengono rimossi.

  Per visualizzare l'SVG disinfettato o per ottenere questo effetto da altri luoghi (ad es. Da file markdown non ospitati in repository su http://github.com/ ) è sufficiente aggiungere ?sanitize=truel'URL non elaborato dell'SVG.

• Come affermato da AdamKatz nei commenti, l'utilizzo di una fonte diversa da github.io può comportare potenziali rischi per la privacy e la sicurezza. Vedi la risposta di CiroSantilli e la risposta di DavidChambers per maggiori dettagli.

• Il problema per risolverlo è stato aperto su Github il 13 ottobre 2015 ed è stato risolto il 31 agosto 2017

Ho contattato GitHub per dire che gli SVG ospitati da github.io non sono più visualizzati in README di GitHub. Ho ricevuto questa risposta:

Abbiamo dovuto disabilitare il rendering delle immagini svg su GitHub.com a causa di potenziali vulnerabilità di scripting tra siti.

rawgit.com risolve bene questo problema. Per ogni richiesta, recupera il documento appropriato da GitHub e, soprattutto, lo serve con l'intestazione Content-Type corretta.

Questo funzionerà. Collega al tuo SVG usando il seguente schema:

https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg

Il rovescio della medaglia è hardcoding del proprietario e repository nel percorso, il che significa che svg si interromperà se uno di questi viene rinominato.

Aggiornamento 2017

Un sviluppatore di GitHub sta attualmente esaminando questo: https://github.com/github/markup/issues/556#issuecomment-306103203

Aggiornamento 2014-12 : GitHub ora esegue il rendering SVG in BLOB Show, quindi non vedo alcun motivo per cui non eseguire il rendering su rendering README:

• https://github.com/blog/1902-svg-viewing-diffing
• https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Si noti inoltre che SVG ha un tentativo XSS ma non funziona: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Il miliardo di risate di SVG rendono Firefox 44 Freeze, ma Chromium 48 è OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah ha detto che i BLOB vanno bene perché l'SVG è all'interno di un file iframe.

Possibile logica per GitHub che non fornisce immagini SVG

• vulnerabilità XML generali. Ad esempio aprendo un miliardo di risate l'exploit ha appena fatto crashare Firefox il mio sistema. Bug di Firefox con exploit allegato: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Lo stesso su Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• Scripting SVG XSS: mentre la maggior parte dei browser non esegue script quando lo SVG è incorporato img, sembra che ciò non sia richiesto dagli standard, quindi forse GitHub lo sta riproducendo in modo sicuro.

  I browser lo eseguono se si apre direttamente SVG (ma sembra che GitHub non mostri mai le immagini direttamente sul github.comdominio) o se è in linea (che attualmente è completamente rimosso da GitHub), quindi questi casi non dovrebbero essere un problema di sicurezza. Link rilevanti:

  • specifica: http://www.w3.org/TR/SVG/script.html
  • demo interattiva SVG: http://www.w3.org/TR/SVG/images/script/script01.svg

Le seguenti domande riguardano i rischi di SVG in generale: /security/11384/exploits-or-other-security-risks-with-svg-upload

Ho un esempio funzionante con un tag img, ma le tue immagini non verranno visualizzate. La differenza che vedo è il tipo di contenuto.

Ho controllato l'immagine github dal tuo post (le immagini di Google Doc non si caricano affatto a causa di errori di connessione). L'immagine da github viene fornita come content-type: text / plain, che non verrà renderizzata come immagine dal tuo browser.

Il valore corretto del tipo di contenuto per svg è image / svg + xml. Quindi devi assicurarti che i file svg impostino il tipo mime corretto, ma questo è un problema del server.

Provalo con http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg e non dimenticare di specificare larghezza e altezza nel tag.

Usa questo sito: https://rawgit.com , funziona per me poiché non ho problemi di autorizzazione con il file svg.
Si prega di notare che RawGit non è un servizio di github, come menzionato nelle FAQ di Rawgit :

RawGit non è associato in alcun modo a GitHub. Non contattare GitHub per chiedere aiuto con RawGit

Inserisci l'URL di svg che ti serve, come ad esempio:

https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg

Quindi, è possibile ottenere il seguente url che può essere utilizzato per visualizzare:

https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg

Proprio come questo ha funzionato per me su Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

o

<img src="ImageAddressOnGitHub.svg">