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 SVG dans MD où le code est hébergé sur Github.
finalement en utilisant rails3, et en changeant le modèle fréquemment en ce moment, donc j'utilise RailRoady pour générer un SVG du schéma de schéma des modèles. Je voudrais que ce SVG soit ensuite placé dans le ReadMe.md, and be displayed. Lorsque J'ouvre le fichier SVG localement, cela fonctionne, alors comment puis-je obtenir le navigateur pour afficher 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 que je manque une approche pour accomplir ceci.
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 ainsi à vérifiez 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="/images/content/13808020/7eb91070188ebcdcd2e10bb503362ec8.svg">
[Google Doc](/images/content/13808020/d918cc69603b6a0f00bc9530288050a2.com) :
<img src="/images/content/13808020/fdada0faf902c1469ff3618c5380c06a.com">
<img src="/images/content/13808020/7eb91070188ebcdcd2e10bb503362ec8.svg">
<img src="/images/content/13808020/d918cc69603b6a0f00bc9530288050a2.com">
pour obtenir les résultats de :
Google Doc :
7 réponses
le but de raw.github.com est de permettre aux utilisateurs de voir le contenu d'un fichier, donc pour les fichiers texte (SVG, JS, CSS, etc) cela signifie que vous obtenez les mauvais en-têtes et les choses se cassent dans le navigateur.
mise à Jour:
Github a mis en place une fonctionnalité qui permet aux SVG d'être utilisés avec la syntaxe D'image Markdown. L'image SVG sera aseptisée et affichée avec l'en-tête HTTP correct. Certaines étiquettes (comme <script> ) sont retiré.
pour voir la SVG aseptisée ou pour obtenir cet effet à partir d'autres endroits (i.e. à partir de fichiers markdown non hébergés dans les repos sur http://github.com / ) ajoutez simplement ?sanitize=true à L'URL brute de la SVG.
voir les exemples ci-dessous pour plus de détails.
Bien que vous ne puissiez pas lier directement les images SVG de raw.github.com , vous pouvez mettre les fichiers SVG sur la branche gh-pages (ou configurer master comme source pour les Pages Github) et lien vers les fichiers de github.io
comme le fichier que vous essayez d'obtenir à l'affichage semble faire partie de votre documentation de projets cela pourrait être un situation gagnant-gagnant
si utiliser des Pages Github n'est pas votre truc, rawgithub.com pourrait être option. RawGit récupère vos fichiers et définit les headers corrects pour vous.
-
comme indiqué par AdamKatz dans les commentaires, en utilisant une source autre que github.les Oi peuvent présenter des risques potentiels en matière de protection de la vie privée et de sécurité. Voir réponse de CiroSantilli et 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 a été ouvert sur Github le 13 octobre 2015 et a été résolu le 31 août 2017
exemples
j'ai copié L'image SVG de la question à un rapport sur github afin de créer les exemples ci-dessous:
lien vers des fichiers relatifs (fonctionne, mais évidemment seulement https://github.com / )
Code
<img src="./controllers_brief.svg">
résultat
voir l'exemple de travail sur github.com .
Lien vers les fichiers bruts (ne fonctionne pas)
Code
<img src="/images/content/13808020/7855aa99fa7d59ae85be824ebd503850.svg">
résultat
lien vers des fichiers RAW en utilisant ?sanitize=true (Works)
Code
<img src="/images/content/13808020/7855aa99fa7d59ae85be824ebd503850.svg?sanitize=true">
résultat
Lien vers les fichiers hébergés sur GitHub.io (travaux)
Code
<img src="/images/content/13808020/0421cc400fd4bbffe1c507beab83ab91.svg">
résultat
lien vers les fichiers RAW en utilisant rawgithub.com (fonctionne aussi)
Note: parfois le service RawGithub est en panne / ne fonctionne pas. Si vous ne voyez pas d'image ci-dessous, c'est probablement cas.
Code
<img src="/images/content/13808020/7a6dcf7b7b11e32cf48cb894b7d57538.svg">
résultat
j'ai contacté GitHub pour dire que GitHub.les SVG hébergés par io ne sont plus affichés dans les READMEs de GitHub. J'ai reçu cette réponse:
nous avons dû désactiver le rendu d'image svg GitHub.com en raison de vulnérabilités potentielles de script intersite.
rawgit.com résout bien ce problème. Pour chaque requête, il récupère le document approprié de GitHub et, ce qui est crucial, il lui sert l'en-tête Content-Type correct.
ça va marcher. Lien vers votre SVG en utilisant le motif suivant:
https://cdn.rawgit.com/<repo-owner>/<repo>/<branch>/path/to.svg
l'inconvénient est un codage dur pour le propriétaire et repo dans le chemin, ce qui signifie que la svg va casser si l'un ou l'autre de ceux-ci sont renommés.
mise à Jour de 2017
un dev GitHub est en train d'étudier ceci: https://github.com/github/markup/issues/556#issuecomment-306103203
mise à jour 2014-12 : GitHub rend maintenant SVG sur blob show, donc je ne vois aucune raison pour ne pas rendre sur README renderings:
- https://github.com/blog/1902-svg-viewing-diffing
- https://github.com/cirosantilli/test/blob/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
notez aussi que SVG a une tentative XSS mais qu'elle ne s'exécute pas: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg
Les milliards de rire SVG ne faire Firefox 44 Freeze, mais Chrome 48 est OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg
Petah a mentionné que les blobs sont très bien parce que le SVG est à l'intérieur d'un iframe .
justification Possible pour GitHub, ne sert pas les images SVG
-
vulnérabilités XML générales. Par exemple: j'ouvre un milliard de rires système. Firefox bug avec exploit attaché: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Idem pour le chrome: https://code.google.com/p/chromium/issues/detail?id=231562
-
SVG XSS scripting: bien que la plupart des navigateurs n'exécutent pas de scripts lorsque le SVG est intégré avec
Les navigateursimg, il semble que ce n'est pas requis par les normes, donc peut-être GitHub joue-t-il en toute sécurité.l'exécutent si vous ouvrez directement le SVG (mais il semble que GitHub ne montre jamais d'images directement sur le domaine
github.com) ou si elle est en ligne (qui sont actuellement complètement supprimés par GitHub), de sorte que ces cas ne devraient pas être un problème de sécurité. Liens pertinents:- spec: http://www.w3.org/TR/SVG/script.html
- interactive SVG demo: 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 , ça marche 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 RAWGIT FAQ :
RawGit n'est en aucun cas associé à github. S'il vous plaît ne Contactez pas GitHub demandant de l'aide avec RawGit
entrez l'url de svg vous avez besoin de:
https://github.com/sel-fish/redis-experiments/blob/master/dat/memDistrib-jemalloc-4.0.3.svg
Ensuite, vous pouvez obtenir l'url soufflet 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 une étiquette img, mais vos images ne seront pas affichées. La différence que je vois est le type de contenu.
j'ai vérifié l'image github de votre post (les images google doc ne se chargent pas du tout en raison de pannes de connexion). L'image de github est livrée sous forme de contenu-type: text / plain, qui ne sera pas rendu sous forme d'image par votre navigateur.
la valeur correcte de type de contenu pour svg est image/svg+xml. Ainsi, vous devez vous assurer que les fichiers svg mettent le type mime correct, mais c'est un problème de serveur.
Essayer avec http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg et n'oubliez pas de spécifier la largeur et la hauteur de la balise.
