Incluya un SVG (alojado en GitHub) en MarkDown


173

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:

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

texto alternativo


Google Doc :


1
GitHub ahora tiene un informe de error abierto relevante: github.com/github/markup/issues/556
sampablokuper

Para salvar a la gente el clic, el informe de error en github se abrió el 13 de octubre de 2015.
Potherca

Respuestas:


207

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

texto alternativo

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

texto alternativo

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

texto alternativo


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


Para ser claros, estás diciendo que las imágenes SVG no se procesarán, ¿correcto?
ShreevatsaR

@ShreevatsaR No, todo menos el enlace directo del archivo raw.github.com funciona bien. Acababa de cambiar el nombre de algo en el repositorio de github y olvidé actualizar mi respuesta, rompiendo los ejemplos. Corregido ahora.
Potherca

1
@ShreevatsaR Correcto. Github nunca menciona la vista en bruto que se utilizará como una forma de alojar archivos, solo para ver, por lo tanto, envía un text/plainencabezado.
Potherca 01 de

2
Advertencia: rawgit.com y rawgithub.com no son propiedad ni están operados por GitHub, lo que introduce riesgos de privacidad e incluso de seguridad por abuso, si no es de su propietario actual, entonces tal vez de un futuro propietario si el registro DNS caduca. Esto hace que la solución github.io sea la más segura. Vea también la respuesta de @ CiroSantilli y la respuesta de @ davidchambers, que notan un riesgo XSS que esto crea.
Adam Katz

1
@MonsieurDart Agregué tu preocupación a la respuesta.
Potherca

36

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.


3
Espera, ¿eso pasa? No lo sabia
Camilo Martin

Curiosamente, sin embargo, se muestra en blob show: vea mi respuesta . Entonces no puedo entender por qué no en el archivo README.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@CiroSantilli 六四 事件 法轮功 包 卓 轩 El blob usa un iframe que no puede hacer XSS como un SVG incrustado.
Petah

3
Vine aquí exactamente buscando si esto era posible. Prueba de concepto de que esto es posible: jsfiddle.net/franciscop/krqea6gc
Francisco Presencia

1
Hm, haga clic aquí para presenciar un ataque XSS? Agradable.
Adam Katz

15

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 es asombroso! Debe pegar en el sitio web? o puede uno simplemente escribir la url dinámicamente a través de script por ejemplo. Quiero incluir esto en mi fragmento de TextExpander.
eonista

No es necesario que primero visite el sitio web, @GitSyncApp. :)
davidchambers

1
Respondiéndome a mí mismo ... 😄 RawGit no funciona para repositorios
MonsieurDart

77
rawgit.com va a desaparecer. Según el sitio web: "RawGit ha llegado al final de su vida útil 8 de octubre de 2018 RawGit se encuentra ahora en una fase de puesta de sol y pronto se cerrará. Han sido cinco años divertidos, pero todas las cosas deben terminar. Los repositorios de GitHub que sirvieron contenido a través de RawGit en el último mes continuará sirviéndose hasta al menos octubre de 2019. Las URL de otros repositorios ya no se publicarán. Si actualmente usa RawGit, deje de usarlo tan pronto como sea posible ".
jeffhale

1
También del anuncio de la puesta del sol de rawgit.com: "Lo que debe usar en su lugar. Los siguientes servicios gratuitos ofrecen alternativas fantásticas a algunas o todas las funciones de RawGit. Puede que les gusten aún más que RawGit. JsDelivr GitHub Pages CodeSandbox unpkg"
jeffhale

8

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.


Otra desventaja del uso cdn.rawgit.comes que los "archivos se almacenan en caché de forma permanente en función de la URL". Nunca se actualizará si modifica el archivo, a menos que cambie el nombre o la ruta.
Mottie

@Mottie: rawgit se ha actualizado ahora: "Los nuevos cambios que envíe a GitHub se reflejarán en minutos".
eonista

¡Importante! RawGit no funciona para repositorios
MonsieurDart

55
Actualización 2018. rawgit está cayendo. Ver mi comentario arriba.
jeffhale

8

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:

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

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


2
Los navegadores no ejecutan script cuando se accede a SVG a través de una etiqueta de imagen. Siéntase libre de revisar usted mismo.
Robert Longson

@RobertLongson Gracias por la corrección. ¿Se especifica eso en el estándar, solo de un comportamiento común del navegador? ¿Se hace por seguridad?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Está hecho para la privacidad, y no está realmente en un estándar. Las personas entienden cómo funcionan las imágenes ráster y qué pueden / no pueden hacer cuando se usan como imagen. Las imágenes SVG deberían funcionar de la misma manera.
Robert Longson

4

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.


1

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

2
¡Importante! RawGit no funciona para repositorios
MonsieurDart

1

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

![Imgae Caption](ImageAddressOnGitHub.svg)

o

<img src="ImageAddressOnGitHub.svg">
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.