Sei que uma imagem pode ser colocada em um MD com a sintaxe MD de um ![Alt text](/path/to/img.jpg)ou outro ![Alt text](/path/to/img.jpg "Optional title"), mas estou tendo dificuldade para colocar um SVG no MD, onde o código está hospedado no GitHub.

Por fim, usando o rails3 e alterando o modelo com frequência agora, estou usando o RailRoady para gerar um SVG do diagrama de esquema dos modelos. Gostaria que o SVG fosse colocado no arquivo ReadMe.md e exibido. Quando abro o arquivo SVG localmente, ele funciona. Então, como faço para o navegador renderizar o SVG no arquivo MD? Dado que o código será dinâmico até sua finalização (aparentemente nunca), hospedar o SVG em um local separado parece um exagero e falta uma abordagem para isso.

O SVG que estou tentando incluir está aqui no GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Eu tentei o seguinte, com uma imagem real também para verificar se a sintaxe está funcionando, apenas se o código SVG não está sendo renderizado:

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

para obter os resultados de:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Visão geral"

Documento do Google :

O objetivo raw.github.comé permitir que os usuários visualizem o conteúdo de um arquivo; portanto, para arquivos baseados em texto, isso significa que (para certos tipos de conteúdo) você pode obter os cabeçalhos errados e as coisas quebram no navegador.

Quando essa pergunta foi feita (em 2012), os SVGs não funcionaram. Desde então, o Github implementou várias melhorias. Agora (pelo menos para SVG), os cabeçalhos de tipo de conteúdo corretos são enviados.

Exemplos

Todas as formas descritas abaixo funcionarão.

^{Copiei a imagem SVG da pergunta para um repositório no github para criar os exemplos abaixo}

Vinculando arquivos usando caminhos relativos (Works, mas obviamente apenas no github.com / github.io)

Código

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

Resultado

Veja o exemplo de trabalho no github.com .

Vinculando a arquivos RAW

Código

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

Resultado

Vinculando a arquivos RAW usando ?sanitize=true

Código

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

Resultado

Vinculando a arquivos hospedados no github.io

Código

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

Resultado

Alguns comentários sobre as mudanças que ocorreram ao longo do caminho:

• O Github implementou um recurso que possibilita o uso de SVGs com a sintaxe da imagem do Markdown. A imagem SVG será higienizada e exibida com o cabeçalho HTTP correto. Certas tags (como <script>) são removidas.

  Para visualizar o SVG higienizado ou obter esse efeito de outros lugares (por exemplo, de arquivos de remarcação não hospedados em repositórios em http://github.com/ ), basta anexar ?sanitize=trueao URL bruto do SVG.

• Conforme declarado por AdamKatz nos comentários, o uso de uma fonte diferente do github.io pode apresentar riscos potencialmente à privacidade e à segurança. Veja a resposta de CiroSantilli e a resposta de DavidChambers para obter mais detalhes.

• O problema para resolver isso foi aberto no Github em 13 de outubro de 2015 e foi resolvido em 31 de agosto de 2017

Entrei em contato com o GitHub para dizer que SVGs hospedados no github.io não são mais exibidos nos READMEs do GitHub. Recebi esta resposta:

Tivemos que desativar a renderização de imagem svg no GitHub.com devido a possíveis vulnerabilidades de script entre sites.

O rawgit.com resolve bem esse problema. Para cada solicitação, ele recupera o documento apropriado do GitHub e, crucialmente, o serve com o cabeçalho correto do Tipo de Conteúdo.

Isso vai funcionar. Vincule ao seu SVG usando o seguinte padrão:

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

A desvantagem é codificar o proprietário e repo no caminho, o que significa que o svg será interrompido se um desses for renomeado.

Atualização 2017

Atualmente, um desenvolvedor do GitHub está investigando isso: https://github.com/github/markup/issues/556#issuecomment-306103203

Atualização 2014-12 : O GitHub agora renderiza o SVG no show de blob, então não vejo nenhuma razão para não renderizar nas renderizações do README:

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

Observe também que o SVG tem uma tentativa de XSS, mas não é executado: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Os bilhões de risadas que o SVG faz do Firefox 44 Freeze, mas o Chromium 48 está bom: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah mencionou que blobs são bons porque o SVG está dentro de um iframe.

Possível justificativa para o GitHub não exibir imagens SVG

• vulnerabilidades XML gerais. Por exemplo, abrir um bilhão de risadas explora apenas o Firefox travar meu sistema. Bug do Firefox com exploração anexada: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . O mesmo no Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• Script SVG XSS: enquanto a maioria dos navegadores não executa scripts quando o SVG é incorporado img, parece que isso não é exigido pelos padrões, então talvez o GitHub esteja jogando com segurança.

  Os navegadores o executam se você abrir o SVG diretamente (mas parece que o GitHub nunca mostra imagens diretamente no github.comdomínio) ou se estiver embutido (que atualmente é completamente removido pelo GitHub), portanto esses casos não devem ser uma preocupação de segurança. Links relevantes:

  • spec: http://www.w3.org/TR/SVG/script.html
  • demonstração interativa do SVG: http://www.w3.org/TR/SVG/images/script/script01.svg

As perguntas a seguir perguntam sobre os riscos do SVG em geral: /security/11384/exploits-or-other-security-risks-with-svg-upload

Eu tenho um exemplo de trabalho com uma tag img, mas suas imagens não serão exibidas. A diferença que vejo é o tipo de conteúdo.

Verifiquei a imagem do github da sua postagem (as imagens do Google Doc não são carregadas devido a falhas de conexão). A imagem do github é entregue como tipo de conteúdo: text / plain, que não será renderizado como imagem pelo navegador.

O valor correto do tipo de conteúdo para svg é image / svg + xml. Portanto, você precisa garantir que os arquivos svg definam o tipo mime correto, mas isso é um problema do servidor.

Experimente com http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg e não se esqueça de especificar largura e altura na tag.

Use este site: https://rawgit.com , ele funciona para mim, pois não tenho problema de permissão com o arquivo svg.
Por favor, preste atenção que o RawGit não é um serviço do github, conforme mencionado nas Perguntas frequentes do Rawgit :

RawGit não está associado ao GitHub de forma alguma. Por favor, não entre em contato com o GitHub pedindo ajuda com o RawGit

Digite o URL do svg que você precisa, como:

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

Em seguida, você pode obter o URL abaixo, que pode ser usado para exibir:

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

Assim funcionou para mim no Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

ou

<img src="ImageAddressOnGitHub.svg">