incluir un SVG(alojado en github) en MarkDown
(7)
El objetivo de raw.github.com es permitir que los usuarios vean el contenido de un archivo, por lo que para los archivos basados en texto (SVG, JS, CSS, etc.) esto significa que obtendrá los encabezados incorrectos y las cosas se romperán en el navegador.
Actualización: Github ha implementado una función que hace posible que SVG se use con la sintaxis de la imagen de 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 obtener este efecto de otros lugares (es decir, de los archivos de rebajas no alojados en repositorios en http://github.com/ ) simplemente agregue ?sanitize=true a la URL sin formato del SVG.
Consulte los ejemplos a continuación para ver los detalles.
Aunque no se puede vincular directamente a las imágenes SVG desde raw.github.com , puede colocar los archivos SVG en la rama gh-pages (o configurar el master como fuente para Páginas Github) y vincular los archivos desde github.io
Como el archivo que está intentando mostrar aparece como parte de la documentación de su proyecto, esta podría ser una situación en la que todos salgan ganando
Si usar Github Pages no es lo tuyo, rawgithub.com podría ser una opción. RawGit recupera sus archivos y establece los encabezados correctos para usted.
Como afirma AdamKatz en los comentarios, usar una fuente que no sea github.io puede introducir riesgos potenciales de privacidad y seguridad. Vea la respuesta de CiroSantilli y la respuesta de DavidChambers para más detalles.
Como dijo MonsieurDart en los comentarios, RawGit no funciona para repositorios privados .
github.com/github/markup/issues/556 se abrió en Github el 13 de octubre de 2015 y se resolvió el 31 de agosto de 2017.
Ejemplos
Copié la imagen SVG de la pregunta a un repositorio en github para crear los ejemplos a continuación:
Vinculación a archivos relativos (funciona, pero obviamente solo https://github.com/ )
Código
<img src="./controllers_brief.svg">
Resultado
Vea el ejemplo de trabajo en github.com .
Vinculación a archivos RAW (no funciona)
Código
<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 usando ?sanitize=true (Works)
Código
<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 (Works)
Código
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Resultado
Vinculación a archivos RAW utilizando rawgithub.com (también funciona)
Nota: A veces, el servicio RawGithub está inactivo / no funciona. Si no ve una imagen a continuación, ese es probablemente el caso.
Código
<img src="https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Resultado
Sé con eso que se puede colocar una imagen en un MD con la sintaxis MD de cualquiera de ellos  o    , pero estoy teniendo dificultades para colocar un SVG en MD donde el código está alojado en Github.
En última instancia, el uso de rails3 y el cambio del modelo con frecuencia en este momento, por lo que estoy utilizando 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 esté finalizado (aparentemente nunca), hospedar el SVG en un lugar separado parece excesivo y me falta un enfoque para lograrlo.
El SVG que intento incluir está here en Github: https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg
He intentado lo siguiente, con una imagen real para verificar que la sintaxis funciona, solo que el código SVG no se está procesando:
![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">
[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:
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 la codificación del propietario y el repositorio en la ruta, lo que significa que el svg se romperá si se cambia el nombre de alguno de ellos.
Me puse en contacto con GitHub para decir que los SVG alojados en github.io ya no se muestran en los README de GitHub. Recibí esta respuesta:
Hemos tenido que deshabilitar el procesamiento de imágenes svg en GitHub.com debido a posibles vulnerabilidades de scripts en sitios cruzados.
Tengo un ejemplo de trabajo con una etiqueta img, pero tus imágenes no se mostrarán. La diferencia que veo es el tipo de contenido.
Comprobé la imagen github de su publicación (las imágenes doc de google no se cargan en absoluto debido a fallas de conexión). La imagen de github se entrega como content-type: text / plain, que no se procesará como una imagen de su navegador.
El valor de tipo de contenido correcto para svg es image / svg + xml. Así que debes asegurarte de que los archivos svg configuren el tipo de mime correcto, pero eso es un problema para el servidor.
Pruébelo con http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg y no olvide especificar el ancho y el alto en la etiqueta.
Use este sitio: https://rawgit.com , funciona para mí ya que no tengo un problema de permiso con el archivo svg.
Por favor, preste atención que RawGit no es un servicio de github, como se menciona en Rawgit FAQ :
RawGit no está asociado con GitHub de ninguna manera. No se ponga en contacto con GitHub para pedir ayuda con RawGit
Ingrese la url de svg que necesita, como por ejemplo:
https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg
Luego, puede obtener la url abajo que se puede usar para mostrar:
https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg
rawgit.com resuelve este problema muy bien. Para cada solicitud, recupera el documento apropiado de GitHub y, lo que es más importante, lo muestra con el encabezado de tipo de contenido correcto.
Actualización 2017
Un desarrollador de GitHub está actualmente 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 para no renderizar en las representaciones de 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 millón de risa de SVG hace Firefox 44 Freeze, 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 un iframe .
Posible explicación para que GitHub no sirva imágenes SVG
vulnerabilidades XML generales. Por ejemplo, abrir una explosión 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
SVG XSS scripting: aunque la mayoría de los navegadores no ejecutan scripts cuando el SVG está incrustado con
img, parece que esto no es requerido por los estándares, por lo que tal vez GitHub esté jugando a lo seguro.Los navegadores lo ejecutan si abre el SVG directamente (pero parece que GitHub nunca muestra imágenes directamente en el dominio
github.com) o si está en línea (que GitHub actualmente elimina por completo), por lo que esos casos no deberían ser una preocupación de seguridad. Enlaces relevantes:- especificación: http://www.w3.org/TR/SVG/script.html
- demostración SVG interactiva: http://www.w3.org/TR/SVG/images/script/script01.svg
Las siguientes preguntas se refieren a los riesgos de SVG en general: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload