Incluir um SVG (hospedado no GitHub) no MarkDown

173

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:

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

texto alternativo


Documento do Google :

Chris Frisina
fonte
1
O GitHub agora tem um relatório de bug aberto relevante: github.com/github/markup/issues/556
sampablokuper
Para salvar as pessoas o clique, o relatório de bug no github foi aberto em 13 Out, 2015
Potherca

Respostas:

207

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

texto alternativo

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

texto alternativo

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

texto alternativo


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

Potherca
fonte
Só para esclarecer, você está dizendo que as imagens SVG não serão renderizadas, correto?
precisa
@ShreevatsaR Não, tudo, menos a ligação direta do arquivo raw.github.com, funciona bem. Acabei de renomear algo no repositório do github e esqueci de atualizar minha resposta, quebrando os exemplos. Corrigido agora.
Potherca
1
@ShreevatsaR Correct. O Github nunca menciona a visualização bruta a ser usada como uma maneira de hospedar arquivos, apenas para visualização, portanto, envia um text/plaincabeçalho.
Potherca
2
Aviso: rawgit.com e rawgithub.com não são de propriedade ou são operados pelo GitHub, que introduz riscos de privacidade e até segurança de abuso, se não do seu proprietário atual, talvez de um futuro proprietário, se o registro do DNS expirar. Isso torna a solução github.io a mais segura. Veja também a resposta de @ CiroSantilli e a resposta de @ davidchambers, que observam o risco de XSS que isso cria.
Adam Katz
1
@MonsieurDart Adicionei sua preocupação à resposta.
Potherca 3/08
36

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.

davidchambers
fonte
3
Espere, isso acontece? Não sabia.
Camilo Martin
Curiosamente, porém, ele renderiza no show de blob: veja minha resposta . Então, eu não consigo entender por que não no README.
Ciro Santilli escreveu
@CiroSantilli 轩 事件 法轮功 包 卓 O blob usa um iframe que não pode executar XSS como um SVG incorporado.
Petah
3
Vim aqui exatamente procurando se isso era possível. Prova de conceito de que isso é possível: jsfiddle.net/franciscop/krqea6gc
Francisco Presencia
1
Hm, clique aqui para testemunhar um ataque XSS? Agradável.
23416 Adam
15

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.

davidchambers
fonte
Isso é incrível! Precisa colar no site? ou pode-se simplesmente escrever o URL dinamicamente via script, por exemplo. Quero incluir isso no meu snippet TextExpander.
eonist
Você não precisa visitar o site primeiro, @GitSyncApp. :)
davidchambers
1
Respondendo a mim mesmo… 😄 RawGit não funciona para repositórios
MonsieurDart
7
O rawgit.com está indo embora. De acordo com o site: "O RawGit chegou ao fim de sua vida útil em 8 de outubro de 2018 O RawGit está agora em uma fase do pôr-do-sol e será encerrado em breve. Foram cinco anos divertidos, mas tudo deve terminar. Repositórios do GitHub que exibiam conteúdo através do RawGit no último mês continuará sendo veiculado até pelo menos outubro de 2019. URLs para outros repositórios não serão mais veiculados. Se você estiver usando o RawGit no momento, pare de usá-lo o mais rápido possível. "
jeffhale
1
Também no anúncio do rawgit.com sunset: "O que você deve usar em vez disso Os seguintes serviços gratuitos oferecem alternativas fantásticas para algumas ou todas as funcionalidades do RawGit. Você pode gostar ainda mais do que o RawGit. JsDelivr Páginas do GitHub CodeSandbox unpkg"
jeffhale
8

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.

Tanner Perrien
fonte
Outra desvantagem do uso cdn.rawgit.comé que os "arquivos são armazenados em cache permanentemente com base no URL". Ele nunca será atualizado se você modificar o arquivo, a menos que altere o nome ou o caminho.
Mottie 31/12/16
@Ottie: rawgit atualizou agora: "As novas alterações enviadas para o GitHub serão refletidas em minutos".
eonist
Importante! Não RawGit não funcionar para repos privadas: github.com/rgrove/rawgit/issues/62
MonsieurDart
5
Atualização 2018. rawgit está caindo. Veja meu comentário acima.
jeffhale
8

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:

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

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

Ciro Santilli adicionou uma nova foto
fonte
2
Os navegadores não executam scripts quando o SVG é acessado por meio de uma tag de imagem. Sinta-se livre para verificar a si mesmo.
Robert Longson
@RobertLongson Obrigado pela correção. Isso é especificado no padrão, apenas para um comportamento comum do navegador? É feito por segurança?
Ciro Santilli escreveu
É feito para privacidade, e não está realmente em um padrão. As pessoas entendem como as imagens rasterizadas funcionam e o que elas podem / não podem fazer quando usadas como imagem. As imagens SVG devem funcionar da mesma maneira.
Robert Longson
4

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.

Karsten S.
fonte
1

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
egoísta
fonte
2
Importante! Não RawGit não funcionar para repos privadas: github.com/rgrove/rawgit/issues/62
MonsieurDart
1

Assim funcionou para mim no Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

ou

<img src="ImageAddressOnGitHub.svg">
Mohammad Heydari
fonte