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"
Antworten:
Der Zweck von
raw.github.com
besteht 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
Ergebnis
Siehe das Arbeitsbeispiel auf github.com .
Verknüpfen mit RAW-Dateien
Code
Ergebnis
Verknüpfen mit RAW-Dateien mit
?sanitize=true
Code
Ergebnis
Verknüpfen mit Dateien, die auf github.io gehostet werden
Code
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=true
die 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
quelle
text/plain
Header gesendet.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:
quelle
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.
quelle
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.
quelle
cdn.rawgit.com
ist, 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.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
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.com
Domain anzeigt ) oder wenn es inline ist (die derzeit vollständig von GitHub entfernt werden), sodass diese Fälle kein Sicherheitsrisiko darstellen sollten. Relevante Links:Die folgenden Fragen beziehen sich auf die Risiken von SVG im Allgemeinen: /security/11384/exploits-or-other-security-risks-with-svg-upload
quelle
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.
quelle
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 :
Geben Sie die URL von svg ein, die Sie benötigen, z.
Dann können Sie die unten stehende URL abrufen, mit der Folgendes angezeigt werden kann:
quelle
Genau so hat es bei Github funktioniert.
oder
quelle