inclure un SVG (hébergé sur github) dans MarkDown
Je sais qu’une image peut être placée dans un MD avec la syntaxe MD de  ou , mais j’ai de la difficulté à placer un fichier SVG dans le MD où le code est hébergé Github.
En fin de compte, en utilisant Rails3 et en changeant fréquemment le modèle actuellement, j’utilise donc RailRoady pour générer un fichier SVG du diagramme de schéma des modèles. J'aimerais que ce SVG soit ensuite placé dans le fichier ReadMe.md et soit affiché. Lorsque j'ouvre le fichier SVG localement, cela fonctionne. Comment demander au navigateur de rendre le fichier 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 excessif 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, mais que le code SVG n'est pas restitué:
![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">
pour obtenir les résultats de:
Le but de raw.github.com permet aux utilisateurs d'afficher le contenu d'un fichier. Par conséquent, pour les fichiers texte (SVG, JS, CSS, etc.), cela signifie que vous obtenez des en-têtes incorrects et que des problèmes se produisent dans le navigateur.
Mise à jour: 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 approprié. Certaines balises (comme <script>) sont enlevés.
Pour afficher le fichier SVG assaini ou pour obtenir cet effet depuis d’autres endroits (par exemple, à partir de fichiers de démarquage non hébergés dans des mises en pension sur http://github.com/ ), ajoutez simplement ?sanitize=true à l'URL brute du SVG.
Voir les exemples ci-dessous pour plus de détails sur le rendu.
Bien que vous ne puissiez pas lier directement aux images SVG à partir de raw.github.com vous pouvez mettre les fichiers SVG sur le gh-pages branche (ou configurer master en tant que source pour Github Pages) et créer un lien vers les fichiers de github.io
Comme le fichier que vous essayez d’afficher semble faire partie de la documentation de votre projet, il peut s’agir d’un situation gagnant-gagnant
Si vous n'utilisez pas Github Pages, rawgithub.com pourrait être une option. RawGit récupère vos fichiers et définit les en-têtes corrects pour vous.
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 les réponse de CiroSantilli et la réponse de DavidChambers pour plus de détails.
Comme indiqué par MonsieurDart dans les commentaires, RawGit ne fonctionne pas pour les pensions privées .
Le problème pour résoudre ce problème a été ouvert sur Github le 13 octobre 2015 et résolu le 31 août 2017
Exemples
J'ai copié l'image SVG de la question dans n repo sur github afin de créer les exemples ci-dessous:
Lien vers des fichiers relatifs (Fonctionne, mais évidemment uniquement https://github.com/ )
Code
<img src="./controllers_brief.svg">
Résultat
Voir l'exemple de travail sur github.com .
Lien vers les fichiers RAW (ne fonctionne pas)
Code
<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
Liaison aux fichiers RAW avec ?sanitize=true (Travaux)
Code
<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
Liens vers des fichiers hébergés sur github.io (Works)
Code
<img src="https://potherca-blog.github.io/StackOverflow/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Résultat
Liaison à des fichiers RAW en utilisant rawgithub.com (fonctionne également)
Remarque: Parfois, le service RawGithub est en panne/ne fonctionne pas. Si vous ne voyez pas d'image ci-dessous, c'est probablement le cas.
Code
<img src="https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">
Résultat
J'ai contacté GitHub pour lui dire que les fichiers SVG hébergés sur github.io ne sont plus affichés dans les fichiers 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é dans GitHub et, surtout, le sert avec l'en-tête Content-Type approprié.
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 repo dans le chemin, ce qui signifie que le svg sera cassé si l'un de ceux-ci est renommé.
Mise à jour 2017
Un développeur GitHub étudie actuellement ceci: https://github.com/github/markup/issues/556#issuecomment-3061032
Mise à jour 2014-12 : GitHub affiche maintenant SVG sous forme d'objet blob. Je ne vois donc aucune raison pour ne pas effectuer de rendu sur README rendus:
- 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 ne s'exécute pas: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
Le milliard de rire que SVG bloque Firefox 44, mais le chrome 48 est OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petah a mentionné que les blobs sont bons parce que le SVG est à l'intérieur d'un iframe.
Raison pour laquelle GitHub ne fournira pas d'images SVG
vulnérabilités XML générales. Par exemple. ouvrir un milliard de rires vient de faire planter Firefox dans mon système. Bug Firefox avec l'exploit joint: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Même chose sur Chromium: https://code.google.com/p/chromium/issues/detail?id=231562
Scripts XSS SVG: alors que la plupart des navigateurs n'exécutent pas de scripts lorsque SVG est incorporé à
img, il semble que cela ne soit pas requis par les normes, alors GitHub le fait sans risque.Les navigateurs l’exécutent si vous ouvrez le fichier SVG directement (mais il semble que GitHub n’affiche jamais d’images directement sur le fichier
github.comdomaine) ou s'il est en ligne (qui sont actuellement complètement supprimés par GitHub), ces cas ne devraient donc pas poser de problème de sécurité. Liens pertinents:- spec: http://www.w3.org/TR/SVG/script.html
- démo interactive sur SVG: http://www.w3.org/TR/SVG/images/script/script01.svg
Les questions suivantes portent sur les risques de SVG en général: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload
Utilisez ce site: https://rawgit.com , cela fonctionne pour moi car je n'ai pas de problème de permission avec le fichier svg.
Veuillez noter que RawGit n’est pas un service de github, comme indiqué dans la section FAQ de Rawgit :
RawGit n'est en aucun cas associé à GitHub. Veuillez ne pas contacter GitHub pour demander de l'aide avec RawGit
Entrez l'URL de 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é pour afficher:
https://cdn.rawgit.com/sel-fish/redis-experiments/master/dat/memDistrib-jemalloc-4.0.3.svg
J'ai un exemple de travail avec un img-tag, 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 à cause des problèmes de connexion). L'image de github est livrée sous la forme content-type: text/plain, qui ne sera pas restituée sous forme d'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 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.