Inclure un SVG (hébergé sur GitHub) dans MarkDown


173

Je sais qu'une image peut être placée dans un MD avec la syntaxe MD de l'un ![Alt text](/path/to/img.jpg)ou l' autre ![Alt text](/path/to/img.jpg "Optional title"), mais j'ai du mal à placer un SVG dans MD où le code est hébergé sur GitHub.

En fin de compte, en utilisant rails3, et en changeant fréquemment le modèle en ce moment, j'utilise donc RailRoady pour générer un SVG du schéma de principe des modèles. Je voudrais que ce SVG soit ensuite placé dans le ReadMe.md et affiché. Lorsque j'ouvre le fichier SVG localement, cela fonctionne, alors comment faire pour que le navigateur affiche le SVG dans le fichier MD? Étant donné que le code sera dynamique jusqu'à ce qu'il soit finalisé (apparemment jamais), héberger le SVG dans un endroit séparé semble exagéré et qu'il me manque une approche pour y parvenir.

Le SVG que j'essaie d'inclure est ici sur GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

J'ai essayé ce qui suit, avec une image réelle également pour vérifier que la syntaxe fonctionne, juste que le code SVG n'est pas rendu:

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

pour obtenir les résultats de:

Aperçu 1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Présentation"

Texte alternatif


Google Doc :


1
GitHub a maintenant un rapport de bogue ouvert pertinent: github.com/github/markup/issues/556
sampablokuper

Pour sauver les gens du clic, le rapport de bogue sur github a été ouvert le 13 octobre 2015.
Potherca

Réponses:


207

Le but de raw.github.comest de permettre aux utilisateurs d'afficher le contenu d'un fichier, donc pour les fichiers à base de texte, cela signifie (pour certains types de contenu) que vous pouvez obtenir les mauvais en-têtes et que les choses se cassent dans le navigateur.

Lorsque cette question a été posée (en 2012), les SVG ne fonctionnaient pas. Depuis, Github a mis en œuvre diverses améliorations. Maintenant (au moins pour SVG), les en-têtes Content-Type corrects sont envoyés.

Exemples

Toutes les méthodes décrites ci-dessous fonctionneront.

J'ai copié l'image SVG de la question dans un référentiel sur github afin de créer les exemples ci-dessous

Lien vers des fichiers en utilisant des chemins relatifs (fonctionne, mais évidemment uniquement sur github.com / github.io)

Code

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

Résultat

Voir l'exemple de travail sur github.com .

Lien vers des fichiers RAW

Code

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

Résultat

Texte alternatif

Lier des fichiers RAW à l'aide de ?sanitize=true

Code

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

Résultat

Texte alternatif

Lien vers des fichiers hébergés sur github.io

Code

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

Résultat

Texte alternatif


Quelques commentaires sur les changements intervenus en cours de route:

  • Github a implémenté une fonctionnalité qui permet aux SVG d'être utilisés avec la syntaxe d'image Markdown. L'image SVG sera nettoyée et affichée avec l'en-tête HTTP correct. Certaines balises (comme <script>) sont supprimées.

    Pour afficher le SVG nettoyé ou pour obtenir cet effet à partir d'autres endroits (c'est-à-dire à partir de fichiers de démarque non hébergés dans des dépôts sur http://github.com/ ), ajoutez simplement ?sanitize=trueà l'URL brute du SVG.

  • Comme indiqué par AdamKatz dans les commentaires, l'utilisation d'une source autre que github.io peut présenter des risques potentiels pour la confidentialité et la sécurité. Voir la réponse de CiroSantilli et la réponse de DavidChambers pour plus de détails.

  • Le problème pour résoudre ce problème a été ouvert sur Github le 13 octobre 2015 et a été résolu le 31 août 2017


Pour être clair, vous dites que les images SVG ne seront pas rendues, n'est -ce pas?
ShreevatsaR

@ShreevatsaR Non, tout sauf le hotlinking du fichier raw.github.com fonctionne bien. Je venais de renommer quelque chose dans le repo github et j'ai oublié de mettre à jour ma réponse, cassant les exemples. Corrigé maintenant.
Potherca

1
@ShreevatsaR Correct. Github ne mentionne jamais la vue brute à utiliser comme moyen d'héberger des fichiers, uniquement pour la visualisation, d'où il envoie un en- text/plaintête.
Potherca

2
Attention: rawgit.com et rawgithub.com ne sont ni détenus ni exploités par GitHub, ce qui introduit des risques de confidentialité et même de sécurité dus aux abus, sinon de son propriétaire actuel, puis peut-être d'un futur propriétaire si l'enregistrement DNS expire. Cela rend la solution github.io la plus sûre. Voir aussi la réponse de @ CiroSantilli et la réponse de @ davidchambers qui notent toutes deux un risque XSS que cela crée.
Adam Katz

1
@MonsieurDart J'ai ajouté votre inquiétude à la réponse.
Potherca

36

J'ai contacté GitHub pour dire que les SVG hébergés sur github.io ne sont plus affichés dans les README de GitHub. J'ai reçu cette réponse:

Nous avons dû désactiver le rendu d'image svg sur GitHub.com en raison de vulnérabilités potentielles de script intersite.


3
Attendez, est-ce que ça arrive? Je ne savais pas.
Camilo Martin

Fait intéressant cependant, il est rendu sur le blob show: voir ma réponse . Donc je ne peux pas comprendre pourquoi pas dans le README.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

@CiroSantilli 六四 事件 法轮功 包 卓 轩 Le blob utilise une iframe qui ne peut pas faire du XSS comme un SVG intégré.
Petah le

3
Je suis venu ici pour chercher exactement si cela était possible. Preuve de concept que cela est possible: jsfiddle.net/franciscop/krqea6gc
Francisco Presencia

1
Hm, cliquez ici pour assister à une attaque XSS? Agréable.
Adam Katz

15

rawgit.com résout ce problème bien. Pour chaque demande, il récupère le document approprié de GitHub et, surtout, le sert avec l'en-tête Content-Type correct.


C'est génial! Doit coller dans le site Web? ou peut-on simplement écrire l'url dynamiquement via un script par exemple. Je veux l'inclure dans mon extrait TextExpander.
eonist

Vous n'avez pas besoin de visiter d'abord le site Web, @GitSyncApp. :)
davidchambers

1
Me répondre… 😄 RawGit ne fonctionne pas pour les dépôts
MonsieurDart

7
rawgit.com s'en va. Selon le site Web: "RawGit a atteint la fin de sa vie utile 8 octobre 2018 RawGit est maintenant dans une phase de crépuscule et va bientôt s'arrêter. Cela a été une période amusante de cinq ans, mais tout doit se terminer. Dépôts GitHub qui ont servi du contenu via RawGit au cours du dernier mois continuera à être diffusé au moins jusqu'en octobre 2019. Les URL des autres référentiels ne sont plus diffusées. Si vous utilisez actuellement RawGit, veuillez cesser de l'utiliser dès que possible. "
jeffhale

1
Également de l'annonce du coucher du soleil de rawgit.com: "Ce que vous devriez utiliser à la place Les services gratuits suivants offrent des alternatives fantastiques à tout ou partie des fonctionnalités de RawGit. Vous pouvez les aimer encore plus que RawGit. JsDelivr GitHub Pages CodeSandbox unpkg"
jeffhale

8

Cela fonctionnera. Lien vers votre SVG en utilisant le modèle suivant:

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

L'inconvénient est de coder en dur le propriétaire et le dépôt dans le chemin, ce qui signifie que le svg se cassera si l'un de ceux-ci est renommé.


Un autre inconvénient de l'utilisation cdn.rawgit.comest que "les fichiers sont mis en cache en permanence en fonction de l'URL". Il ne sera jamais mis à jour si vous modifiez le fichier, sauf si vous changez le nom ou le chemin.
Mottie

@Mottie: rawgit a maintenant une mise à jour: "Les nouvelles modifications que vous transmettez à GitHub seront reflétées en quelques minutes."
eonist

Important! RawGit ne fonctionne pas pour les dépôts
MonsieurDart

5
Mise à jour 2018. rawgit prend fin. Voir mon commentaire ci-dessus.
jeffhale

8

Mise à jour 2020

GitHub semble utiliser deux approches de sécurité, c'est un bon article: https://digi.ninja/blog/svg_xss.php voir aussi: /security/148507/how-to-prevent- xss-in-svg-file-upload

Mise à jour 2017

Un développeur GitHub examine actuellement ceci: https://github.com/github/markup/issues/556#issuecomment-306103203

Mise à jour 2014-12 : GitHub rend maintenant SVG sur le blob show, donc je ne vois aucune raison pour laquelle ne pas rendre sur les rendus README:

Notez également que SVG a une tentative XSS mais il ne s'exécute pas: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Le milliard de rire SVG rend Firefox 44 Freeze, mais Chromium 48 est OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah a mentionné que les blobs sont bien parce que le SVG est à l'intérieur d'un fichier iframe.

Raison possible pour que GitHub ne diffuse pas d'images SVG

Les questions suivantes portent sur les risques de SVG en général: /security/11384/exploits-or-other-security-risks-with-svg-upload


2
Les navigateurs n'exécutent pas de script lorsque SVG est accessible via une balise d'image. N'hésitez pas à vous vérifier.
Robert Longson

@RobertLongson Merci pour la correction. Est-ce que cela est spécifié sur la norme, d'un simple comportement de navigateur courant? Est-ce fait pour la sécurité?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

C'est fait pour la vie privée, et ce n'est pas vraiment dans une norme. Les gens comprennent le fonctionnement des images raster et ce qu'ils peuvent / ne peuvent pas faire lorsqu'ils sont utilisés comme image Les images SVG doivent fonctionner de la même manière.
Robert Longson

4

J'ai un exemple fonctionnel avec une balise img, mais vos images ne s'afficheront pas. La différence que je vois est le type de contenu.

J'ai vérifié l'image github de votre message (les images google doc ne se chargent pas du tout en raison d'échecs de connexion). L'image de github est livrée en tant que type de contenu: text / plain, qui ne sera pas rendu comme une image par votre navigateur.

La valeur de type de contenu correcte pour svg est image / svg + xml. Vous devez donc vous assurer que les fichiers svg définissent le type de mime correct, mais c'est un problème de serveur.

Essayez-le avec http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg et n'oubliez pas de spécifier la largeur et la hauteur dans la balise.


1

Utilisez ce site: https://rawgit.com , cela fonctionne pour moi car je n'ai pas de problème d'autorisation avec le fichier svg.
Veuillez faire attention que RawGit n'est pas un service de github, comme mentionné dans la FAQ Rawgit :

RawGit n'est en aucun cas associé à GitHub. Veuillez ne pas contacter GitHub pour demander de l'aide avec RawGit

Entrez l'url du svg dont vous avez besoin, par exemple:

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

Ensuite, vous pouvez obtenir l'url ci-dessous qui peut être utilisée pour afficher:

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

2
Important! RawGit ne fonctionne pas pour les dépôts
MonsieurDart

1

Tout comme cela a fonctionné pour moi sur Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

ou

<img src="ImageAddressOnGitHub.svg">
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.