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:

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

Google Doc :

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

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

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

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

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.

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.

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é.

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

• show SVG inside <imgtag, qui empêche les scripts de s'exécuter, par exemple sur les README: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• utiliser Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox. Cela empêche le script de s'exécuter même dans rawlequel contient le fichier SVG brut: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  Vous pouvez voir l'en-tête avec curl -vvv. Les github.compages régulières ont également un content-security-policy, mais il est beaucoup plus grand.

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:

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

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

• vulnérabilités XML générales. Par exemple, l'ouverture d'un milliard de fous rires vient de faire planter Firefox mon système. Bug Firefox avec exploit en pièce jointe: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Idem sur Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• Script SVG XSS: alors que la plupart des navigateurs n'exécutent pas de scripts lorsque le SVG est intégré img, il semble que cela ne soit pas requis par les normes, alors peut-être que GitHub joue en toute sécurité.

  Les navigateurs l'exécutent si vous ouvrez le SVG directement (mais il semble que GitHub n'affiche jamais d'images directement sur le github.comdomaine) ou s'il est en ligne (qui sont actuellement complètement supprimés par GitHub), donc ces cas ne devraient pas être un problème de sécurité. Liens pertinents:

  • spécification: http://www.w3.org/TR/SVG/script.html
  • démo SVG interactive: http://www.w3.org/TR/SVG/images/script/script01.svg

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

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.

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

Tout comme cela a fonctionné pour moi sur Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

ou

<img src="ImageAddressOnGitHub.svg">