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

Question

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

J'utilise finalement rails3, et je change fréquemment le modèle en ce moment, donc j'utilise RailRoady pour générer un SVG du diagramme de schéma des modèles. J'aimerais que ce SVG soit ensuite placé dans le fichier ReadMe.md, puis affiché. Lorsque j'ouvre le fichier SVG localement, il fonctionne, alors comment faire pour que le navigateur rende 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 excessif et il me manque une approche pour accomplir cela.

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 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 "Aperçu"

---

Google Doc :

Answer 1

J'ai un exemple fonctionnel avec un img-tag, mais vos images ne s'affichent pas. La différence que je vois est le content-type.

J'ai vérifié l'image github de votre post (les images google doc ne se chargent pas du tout à cause d'échecs de connexion). L'image de github est livrée comme content-type : text/plain, ce qui ne sera pas rendu comme une image par votre navigateur.

La valeur correcte du type de contenu pour svg est image/svg+xml. Vous devez donc vous assurer que les fichiers svg définissent le bon type de contenu, 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 préciser la largeur et la hauteur dans la balise.

Answer 2

Comme cela a fonctionné pour moi sur Github.

![Image Caption](ImageAddressOnGitHub.svg)

ou

<img src="ImageAddressOnGitHub.svg">

Answer 3

Depuis janvier 2022, cela semble possible (et facile) :

Permettre de télécharger des fichiers .svg dans le format Markdown

Il est désormais possible de télécharger .svg à des commentaires dans des problèmes, des RP, des discussions et des fichiers Markdown, par exemple READMEs .

Il vous suffit de glisser et de déposer le fichier dans la zone de texte.

Answer 4

Utilisez ce site : https://rawgit.com Si j'ai choisi de le faire, 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 rubrique FAQ Rawgit :

RawGit n'est pas associé à GitHub de quelque manière que ce soit. Veuillez ne pas contacter GitHub pour demander de l'aide sur RawGit.

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

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

Answer 5

Outre les SVG ordinaires, vous pouvez également insérer des images SVG animées dans le fichier markdown comme n'importe quel autre format. Il peut être une bonne alternative aux images GIF.

Utilisez des liens relatifs si votre SVG animé et votre fichier de balisage se trouvent dans le même dépôt GitHub :

![image description](relative/path/in/repository/to/image.svg)
OR
<img src="relative/path/in/repository/to/image.svg" width="128"/>

Exemple (en supposant que l'image est en assets dans le référentiel) :

![My animated logo](assets/my-logo.svg)

Résultat :