Sé con eso que una imagen se puede colocar en un MD con la sintaxis de MD de cualquiera ![Alt text](/path/to/img.jpg)o ![Alt text](/path/to/img.jpg "Optional title"), pero tengo dificultades para colocar un SVG en MD donde el código está alojado en GitHub.

En última instancia, uso rails3, y cambiar el modelo con frecuencia en este momento, por lo que estoy usando RailRoady para generar un SVG del diagrama de esquema de los modelos. Me gustaría que ese SVG se coloque en ReadMe.md y se muestre. Cuando abro el archivo SVG localmente, funciona, entonces, ¿cómo hago para que el navegador represente el SVG en el archivo MD? Dado que el código será dinámico hasta que se finalice (aparentemente nunca), alojar el SVG en un lugar separado parece excesivo y me falta un enfoque para lograr esto.

El SVG que estoy tratando de incluir está aquí en GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

He intentado lo siguiente, con una imagen real también para verificar que la sintaxis funciona, solo que el código SVG no se está representando:

![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 obtener los resultados de:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Descripción general"

Google Doc :

El propósito de raw.github.com es permitir a los usuarios ver el contenido de un archivo, por lo que para archivos basados ​​en texto esto significa (para ciertos tipos de contenido) que puede obtener los encabezados incorrectos y las cosas se rompen en el navegador.

Cuando se hizo esta pregunta (en 2012) los SVG no funcionaron. Desde entonces, Github ha implementado varias mejoras. Ahora (al menos para SVG), se envían los encabezados de tipo de contenido correctos.

Ejemplos

Todas las formas indicadas a continuación funcionarán.

^{Copié la imagen SVG de la pregunta a un repositorio en github para crear los siguientes ejemplos}

Vinculación a archivos utilizando rutas relativas (funciona, pero obviamente solo en github.com / github.io)

Código

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

Resultado

Vea el ejemplo de trabajo en github.com .

Vinculación a archivos 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

Vinculación a archivos RAW utilizando ?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

Vinculación a archivos alojados en 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

Algunos comentarios sobre los cambios que ocurrieron en el camino:

• Github ha implementado una función que hace posible que los SVG se usen con la sintaxis de imagen Markdown. La imagen SVG se desinfectará y se mostrará con el encabezado HTTP correcto. Ciertas etiquetas (como<script> ) se eliminan.

  Para ver el SVG desinfectado o para lograr este efecto desde otros lugares (es decir, desde archivos de descuento no alojados en repositorios en http://github.com/ ) simplemente agregue ?sanitize=truea la URL sin procesar del SVG.

• Como dijo AdamKatz en los comentarios, el uso de una fuente que no sea github.io puede presentar riesgos potenciales de privacidad y seguridad. Vea la respuesta de CiroSantilli y la respuesta de DavidChambers para más detalles.

• El problema para resolver esto se abrió en Github el 13 de octubre de 2015 y se resolvió el 31 de agosto de 2017

Me puse en contacto con GitHub para decir que los SVG alojados en github.io ya no se muestran en GitHub README. Recibí esta respuesta:

Hemos tenido que deshabilitar la representación de imágenes svg en GitHub.com debido a posibles vulnerabilidades de secuencias de comandos entre sitios.

rawgit.com resuelve este problema muy bien. Para cada solicitud, recupera el documento apropiado de GitHub y, lo que es más importante, lo sirve con el encabezado de tipo de contenido correcto.

Esto funcionará Enlace a su SVG usando el siguiente patrón:

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

La desventaja es codificar al propietario y al repositorio en la ruta, lo que significa que el svg se romperá si se cambia el nombre de cualquiera de ellos.

Actualización 2017

Un desarrollador de GitHub está investigando esto: https://github.com/github/markup/issues/556#issuecomment-306103203

Actualización 2014-12 : GitHub ahora renderiza SVG en blob show, por lo que no veo ninguna razón por la cual no renderizar en representaciones README:

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

También tenga en cuenta que SVG tiene un intento de XSS pero no se ejecuta: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

El SVG de mil millones de risas hace que Firefox 44 se congele, pero Chromium 48 está bien: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah mencionó que los blobs están bien porque el SVG está dentro de uniframe .

Posible justificación para que GitHub no sirva imágenes SVG

• vulnerabilidades generales de XML. Por ejemplo, abrir un exploit de mil millones de risas acaba de hacer que Firefox bloquee mi sistema. Error de Firefox con exploit adjunto: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Lo mismo en Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• Scripting SVG XSS: si bien la mayoría de los navegadores no ejecutan scripts cuando está incrustado el SVG img, parece que esto no es requerido por los estándares, por lo que tal vez GitHub lo esté ejecutando de manera segura.

  Los navegadores lo ejecutan si abre el SVG directamente (pero parece que GitHub nunca muestra imágenes directamente en el github.comdominio) o si está en línea (que GitHub elimina actualmente por completo), por lo que esos casos no deberían ser un problema de seguridad. Enlaces relevantes:

  • spec: http://www.w3.org/TR/SVG/script.html
  • demostración interactiva de SVG: http://www.w3.org/TR/SVG/images/script/script01.svg

Las siguientes preguntas se refieren a los riesgos de SVG en general: /security/11384/exploits-or-other-security-risks-with-svg-upload

Tengo un ejemplo de trabajo con una etiqueta img, pero sus imágenes no se mostrarán. La diferencia que veo es el tipo de contenido.

Verifiqué la imagen de github de tu publicación (las imágenes de google doc no se cargan en absoluto debido a fallas de conexión). La imagen de github se entrega como tipo de contenido: text / plain, que su navegador no representará como una imagen.

El valor de tipo de contenido correcto para svg es image / svg + xml. Por lo tanto, debe asegurarse de que los archivos svg establezcan el tipo mime correcto, pero eso es un problema del servidor.

Pruébelo con http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg y no olvide especificar el ancho y la altura en la etiqueta.

Use este sitio: https://rawgit.com , funciona para mí, ya que no tengo problemas de permiso con el archivo svg.
Tenga en cuenta que RawGit no es un servicio de github, como se menciona en las Preguntas frecuentes de Rawgit :

RawGit no está asociado con GitHub de ninguna manera. Por favor no contacte a GitHub pidiendo ayuda con RawGit

Ingrese la url de svg que necesita, como:

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

Luego, puede obtener el siguiente URL que se puede usar para mostrar:

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

Así como esto funcionó para mí en Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

o

<img src="ImageAddressOnGitHub.svg">