Ich weiß damit, dass ein Bild in einer MD mit der MD-Syntax von entweder ![Alt text](/path/to/img.jpg)oder platziert werden kann![Alt text](/path/to/img.jpg "Optional title") , aber ich habe Schwierigkeiten, eine SVG in MD zu platzieren, in der der Code auf GitHub gehostet wird.

Letztendlich verwende ich Rails3 und ändere das Modell gerade häufig. Daher verwende ich RailRoady , um eine SVG des Schemadiagramms der Modelle zu generieren. Ich möchte, dass diese SVG dann in ReadMe.md platziert und angezeigt wird. Wenn ich die SVG-Datei lokal öffne, funktioniert dies. Wie kann ich den Browser dazu bringen, die SVG-Datei in der MD-Datei zu rendern? Angesichts der Tatsache, dass der Code bis zu seiner Fertigstellung dynamisch sein wird (scheinbar nie), scheint es übertrieben, die SVG an einem separaten Ort zu hosten, und ich vermisse einen Ansatz, um dies zu erreichen.

Die SVG, die ich aufnehmen möchte, ist hier auf GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Ich habe Folgendes versucht, auch mit einem tatsächlichen Bild, um zu überprüfen, ob die Syntax funktioniert, nur dass der SVG-Code nicht gerendert wird:

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

um die Ergebnisse zu erhalten von:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Übersicht"

Google Doc :

Der Zweck von raw.github.combesteht darin, Benutzern das Anzeigen des Inhalts einer Datei zu ermöglichen. Bei textbasierten Dateien bedeutet dies, dass Sie (für bestimmte Inhaltstypen) die falschen Header erhalten und im Browser Probleme auftreten können.

Als diese Frage gestellt wurde (im Jahr 2012), funktionierten SVGs nicht. Seitdem hat Github verschiedene Verbesserungen implementiert. Jetzt (zumindest für SVG) werden die richtigen Content-Type-Header gesendet.

Beispiele

Alle unten angegebenen Möglichkeiten funktionieren.

^{Ich habe das SVG-Bild von der Frage in ein Repo auf Github kopiert , um die folgenden Beispiele zu erstellen}

Verknüpfen mit Dateien über relative Pfade (funktioniert, aber offensichtlich nur auf github.com / github.io)

Code

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

Ergebnis

Siehe das Arbeitsbeispiel auf github.com .

Verknüpfen mit RAW-Dateien

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

Ergebnis

Verknüpfen mit RAW-Dateien mit ?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">

Ergebnis

Verknüpfen mit Dateien, die auf github.io gehostet werden

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

Ergebnis

Einige Kommentare zu Änderungen, die auf dem Weg stattgefunden haben:

• Github hat eine Funktion implementiert, die es SVGs ermöglicht, mit der Markdown-Bildsyntax verwendet zu werden. Das SVG-Bild wird bereinigt und mit dem richtigen HTTP-Header angezeigt. Bestimmte Tags (wie <script>) werden entfernt.

  Um die bereinigte SVG anzuzeigen oder diesen Effekt von anderen Stellen aus zu erzielen (z. B. von Markdown-Dateien, die nicht in Repos auf http://github.com/ gehostet werden ), fügen Sie einfach ?sanitize=truedie Roh-URL der SVG an.

• Wie von AdamKatz in den Kommentaren angegeben, kann die Verwendung einer anderen Quelle als github.io potenzielle Datenschutz- und Sicherheitsrisiken mit sich bringen. Weitere Informationen finden Sie in der Antwort von CiroSantilli und in der Antwort von DavidChambers .

• Das Problem zur Behebung dieses Problems wurde am 13. Oktober 2015 auf Github eröffnet und am 31. August 2017 behoben

Ich habe GitHub kontaktiert, um zu sagen, dass von github.io gehostete SVGs nicht mehr in GitHub READMEs angezeigt werden. Ich habe diese Antwort erhalten:

Wir mussten das Rendern von SVG-Bildern auf GitHub.com aufgrund möglicher Sicherheitslücken in Bezug auf Cross-Site-Scripting deaktivieren.

rawgit.com löst dieses Problem gut. Für jede Anforderung wird das entsprechende Dokument von GitHub abgerufen und vor allem mit dem richtigen Content-Type-Header versehen.

Das wird funktionieren. Verknüpfen Sie Ihre SVG mit dem folgenden Muster:

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

Der Nachteil ist die Hardcodierung des Besitzers und des Repos im Pfad, was bedeutet, dass die SVG-Datei unterbrochen wird, wenn eine dieser Optionen umbenannt wird.

Update 2017

Ein GitHub-Entwickler untersucht dies derzeit: https://github.com/github/markup/issues/556#issuecomment-306103203

Update 2014-12 : GitHub rendert SVG jetzt in der Blob-Show, daher sehe ich keinen Grund, warum ich nicht in README-Renderings rendern sollte:

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

Beachten Sie auch, dass SVG einen XSS-Versuch hat, dieser jedoch nicht ausgeführt wird: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Das milliardenschwere SVG lässt Firefox 44 zwar einfrieren, aber Chrom 48 ist in Ordnung: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah erwähnte, dass Blobs in Ordnung sind, weil sich die SVG in einem befindet iframe.

Mögliche Gründe dafür, dass GitHub keine SVG-Bilder bereitstellt

• allgemeine XML-Schwachstellen. Zum Beispiel hat das Öffnen einer Milliarde Lacher den Firefox zum Absturz gebracht. Firefox-Fehler mit angehängtem Exploit: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Gleiches gilt für Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• SVG XSS-Skripterstellung: Während die meisten Browser keine Skripte ausführen, wenn die SVG-Datei eingebettet ist img, scheint dies von den Standards nicht verlangt zu werden. Vielleicht geht GitHub also auf Nummer sicher.

  Browser führen es aus, wenn Sie das SVG direkt öffnen (aber es scheint, dass GitHub niemals Bilder direkt in der github.comDomain anzeigt ) oder wenn es inline ist (die derzeit vollständig von GitHub entfernt werden), sodass diese Fälle kein Sicherheitsrisiko darstellen sollten. Relevante Links:

  • Spezifikation: http://www.w3.org/TR/SVG/script.html
  • Interaktive SVG-Demo: http://www.w3.org/TR/SVG/images/script/script01.svg

Die folgenden Fragen beziehen sich auf die Risiken von SVG im Allgemeinen: /security/11384/exploits-or-other-security-risks-with-svg-upload

Ich habe ein funktionierendes Beispiel mit einem img-Tag, aber Ihre Bilder werden nicht angezeigt. Der Unterschied, den ich sehe, ist der Inhaltstyp.

Ich habe das Github-Bild aus Ihrem Beitrag überprüft (die Google Doc-Bilder werden aufgrund von Verbindungsfehlern überhaupt nicht geladen). Das Bild von github wird als Inhaltstyp geliefert: Text / Plain, der von Ihrem Browser nicht als Bild gerendert wird.

Der korrekte Inhaltstypwert für svg ist image / svg + xml. Sie müssen also sicherstellen, dass SVG-Dateien den richtigen MIME-Typ festlegen, aber das ist ein Serverproblem.

Versuchen Sie es mit http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg und vergessen Sie nicht, Breite und Höhe im Tag anzugeben.

Verwenden Sie diese Site: https://rawgit.com , sie funktioniert für mich, da ich kein Berechtigungsproblem mit der SVG-Datei habe.
Bitte beachten Sie, dass RawGit kein Github-Dienst ist, wie in den Rawgit-FAQ erwähnt :

RawGit ist in keiner Weise mit GitHub verbunden. Bitte kontaktieren Sie GitHub nicht und bitten Sie um Hilfe bei RawGit

Geben Sie die URL von svg ein, die Sie benötigen, z.

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

Dann können Sie die unten stehende URL abrufen, mit der Folgendes angezeigt werden kann:

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

Genau so hat es bei Github funktioniert.

![Imgae Caption](ImageAddressOnGitHub.svg)

oder

<img src="ImageAddressOnGitHub.svg">