Fügen Sie eine SVG (auf GitHub gehostet) in MarkDown ein

173

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:

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

Alt-Text


Google Doc :

Chris Frisina
quelle
1
GitHub hat jetzt einen relevanten offenen Fehlerbericht: github.com/github/markup/issues/556
sampablokuper
Um den Leuten den Klick zu ersparen, wurde der Fehlerbericht auf Github am 13. Oktober 2015 geöffnet.
Potherca

Antworten:

206

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

Alt-Text

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

Alt-Text

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

Alt-Text


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

Potherca
quelle
Um ganz klar zu sein, Sie sagen, dass die SVG-Bilder nicht gerendert werden, richtig?
ShreevatsaR
@ShreevatsaR Nein, alles außer dem Hotlinking der Datei raw.github.com funktioniert einwandfrei. Ich hatte gerade etwas im Github-Repo umbenannt und vergessen, meine Antwort zu aktualisieren, um die Beispiele zu brechen. Jetzt behoben.
Potherca
1
@ShreevatsaR Richtig. Github erwähnt niemals die Rohansicht, die zum Hosten von Dateien verwendet werden soll, sondern nur zum Anzeigen. Daher wird ein text/plainHeader gesendet.
Potherca
2
Warnung: rawgit.com und rawgithub.com sind nicht Eigentum von GitHub oder werden von GitHub betrieben. Dies führt zu Datenschutz- und sogar Sicherheitsrisiken durch Missbrauch, wenn nicht von seinem derzeitigen Eigentümer, dann möglicherweise von einem zukünftigen Eigentümer, wenn die DNS-Registrierung verfällt. Dies macht die github.io-Lösung zur sichersten. Siehe auch die Antwort von @ CiroSantilli und die Antwort von @ davidchambers, die beide ein XSS- Risiko feststellen , das dadurch entsteht.
Adam Katz
1
@ MonsieurDart Ich habe Ihre Besorgnis zur Antwort hinzugefügt.
Potherca
36

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.

Davidkammern
quelle
3
Warten Sie, passiert das? Wusste es nicht.
Camilo Martin
Interessanterweise wird es in der Blob-Show gerendert: siehe meine Antwort . Ich kann also nicht verstehen, warum nicht in der README.
Ciro Santilli 20 冠状 病 六四 事件 20
@CiroSantilli bl 事件 法轮功 包 包 轩 Der Blob verwendet einen Iframe, der XSS nicht wie ein eingebettetes SVG ausführen kann.
Petah
3
Kam hier genau auf der Suche, ob dies möglich war. Proof of Concept, dass dies möglich ist: jsfiddle.net/franciscop/krqea6gc
Francisco Presencia
1
Hm, klicken Sie hier, um Zeuge eines XSS-Angriffs zu werden? Nett.
Adam Katz
15

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.

Davidkammern
quelle
Das ist fantastisch! Muss in die Website einfügen? oder kann man zum Beispiel die URL einfach dynamisch per Skript schreiben. Ich möchte dies in mein TextExpander-Snippet aufnehmen.
Eonist
Sie müssen nicht zuerst die Website @GitSyncApp besuchen. :)
Davidchambers
1
Ich antworte mir selbst… 😄 RawGit funktioniert nicht für private Repos: github.com/rgrove/rawgit/issues/62
MonsieurDart
7
rawgit.com geht weg. Laut der Website: "RawGit hat das Ende seiner Nutzungsdauer erreicht 8. Oktober 2018 RawGit befindet sich jetzt in einer Sonnenuntergangsphase und wird bald heruntergefahren. Es hat fünf Jahre Spaß gemacht, aber alles muss enden. GitHub-Repositories, die Inhalte bereitstellten über RawGit innerhalb des letzten Monats wird weiterhin bis mindestens Oktober 2019 bereitgestellt. URLs für andere Repositorys werden nicht mehr bereitgestellt. Wenn Sie derzeit RawGit verwenden, beenden Sie die Verwendung so bald wie möglich. "
Jeffhale
1
Ebenfalls aus der Sunset-Ankündigung von rawgit.com: "Was Sie stattdessen verwenden sollten Die folgenden kostenlosen Dienste bieten fantastische Alternativen zu einigen oder allen Funktionen von RawGit. Sie mögen sie möglicherweise sogar mehr als RawGit. JsDelivr GitHub Pages CodeSandbox unpkg"
jeffhale
8

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.

Tanner Perrien
quelle
Ein weiterer Nachteil der Verwendung cdn.rawgit.comist, dass die "Dateien basierend auf der URL permanent zwischengespeichert werden". Es wird niemals aktualisiert, wenn Sie die Datei ändern, es sei denn, Sie ändern den Namen oder den Pfad.
Mottie
@Mottie: rawgit hat jetzt ein Update: "Neue Änderungen, die Sie an GitHub vornehmen, werden innerhalb von Minuten übernommen."
Eonist
Wichtig! RawGit funktioniert nicht für private Repos: github.com/rgrove/rawgit/issues/62
MonsieurDart
5
Update 2018. rawgit geht unter. Siehe meinen Kommentar oben.
Jeffhale
8

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:

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

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

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
quelle
2
Browser führen kein Skript aus, wenn auf SVG über ein Image-Tag zugegriffen wird. Fühlen Sie sich frei, sich selbst zu überprüfen.
Robert Longson
@ RobertLongson Danke für die Korrektur. Ist das im Standard nur für ein allgemeines Browserverhalten festgelegt? Wird es aus Sicherheitsgründen gemacht?
Ciro Santilli 法轮功 冠状 病 六四 事件 1
Es ist für die Privatsphäre gemacht, und es ist nicht wirklich in einem Standard. Die Leute verstehen, wie Rasterbilder funktionieren und was sie können / nicht können, wenn sie als Bild verwendet werden. SVG-Bilder sollten auf die gleiche Weise funktionieren.
Robert Longson
4

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.

Karsten S.
quelle
1

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
egoistisch
quelle
2
Wichtig! RawGit funktioniert nicht für private Repos: github.com/rgrove/rawgit/issues/62
MonsieurDart
1

Genau so hat es bei Github funktioniert.

![Imgae Caption](ImageAddressOnGitHub.svg)

oder

<img src="ImageAddressOnGitHub.svg">
Mohammad Heydari
quelle