Wiem, że obraz można umieścić w MD ze składnią MD albo ![Alt text](/path/to/img.jpg)lub ![Alt text](/path/to/img.jpg "Optional title"), ale mam trudności z umieszczeniem SVG w MD, gdzie kod jest hostowany na GitHub.

Ostatecznie używam rails3 i często zmieniam model w tej chwili, więc używam RailRoady do generowania SVG schematu schematu modeli. Chciałbym, aby ten plik SVG został następnie umieszczony w pliku ReadMe.md i wyświetlony. Kiedy otwieram plik SVG lokalnie, to działa, więc jak mam skłonić przeglądarkę do renderowania SVG w pliku MD? Biorąc pod uwagę, że kod będzie dynamiczny, dopóki nie zostanie sfinalizowany (najwyraźniej nigdy), umieszczenie SVG w oddzielnym miejscu wydaje się przesadą i brakuje mi podejścia, aby to osiągnąć.

Plik SVG, który próbuję dołączyć, jest tutaj na GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Wypróbowałem następujące rozwiązania, również z rzeczywistym obrazem, aby sprawdzić, czy składnia działa, ale kod SVG nie jest renderowany:

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

aby uzyskać wyniki:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg „Overview”

Dokument Google :

Celem raw.github.comjest umożliwienie użytkownikom przeglądania zawartości pliku, więc w przypadku plików tekstowych oznacza to (w przypadku niektórych typów zawartości) nieprawidłowe nagłówki i błędy w przeglądarce.

Kiedy zadano to pytanie (w 2012 r.), Pliki SVG nie działały. Od tego czasu Github wprowadził różne ulepszenia. Teraz (przynajmniej w przypadku SVG) wysyłane są prawidłowe nagłówki Content-Type.

Przykłady

Wszystkie opisane poniżej sposoby będą działać.

^{Skopiowałem obraz SVG z pytania do repozytorium na github , aby stworzyć poniższe przykłady}

Łączenie do plików przy użyciu ścieżek względnych (działa, ale oczywiście tylko na github.com / github.io)

Kod

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

Wynik

Zobacz przykład roboczy na github.com .

Linkowanie do plików RAW

Kod

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

Wynik

Łączenie z plikami RAW przy użyciu ?sanitize=true

Kod

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

Wynik

Łączenie do plików hostowanych na github.io

Kod

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

Wynik

Kilka uwag dotyczących zmian, które zaszły po drodze:

• Github zaimplementował funkcję, która umożliwia używanie plików SVG ze składnią obrazu Markdown. Obraz SVG zostanie oczyszczony i wyświetlony z poprawnym nagłówkiem HTTP. Niektóre tagi (takie jak <script>) są usuwane.

  Aby wyświetlić oczyszczony plik SVG lub osiągnąć ten efekt z innych miejsc (np. Z plików markdown, które nie są hostowane w repozytoriach na http://github.com/ ), wystarczy dołączyć ?sanitize=truedo surowego adresu URL SVG.

• Jak stwierdził AdamKatz w komentarzach, korzystanie ze źródła innego niż github.io może stanowić potencjalne zagrożenie dla prywatności i bezpieczeństwa. Zobacz odpowiedź CiroSantilli i odpowiedź DavidaChambersa, aby uzyskać więcej informacji.

• Kwestia rozwiązania tego problemu została otwarta na Github 13 października 2015 r. I rozwiązana 31 sierpnia 2017 r

Skontaktowałem się z GitHub, aby powiedzieć, że pliki SVG hostowane na github.io nie są już wyświetlane w plikach README GitHub. Otrzymałem odpowiedź:

Musieliśmy wyłączyć renderowanie obrazu svg na GitHub.com z powodu potencjalnych luk w zabezpieczeniach skryptów między witrynami.

rawgit.com ładnie rozwiązuje ten problem. Dla każdego żądania pobiera odpowiedni dokument z GitHub i, co najważniejsze, podaje go z odpowiednim nagłówkiem Content-Type.

To zadziała. Połącz z plikiem SVG, używając następującego wzoru:

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

Wadą jest zakodowanie właściciela i repozytorium na ścieżce, co oznacza, że ​​plik SVG ulegnie awarii, jeśli nazwa któregoś z nich zostanie zmieniona.

Zaktualizuj 2017

Deweloper GitHub obecnie się tym zajmuje: https://github.com/github/markup/issues/556#issuecomment-306103203

Aktualizacja 2014-12 : GitHub renderuje teraz SVG na pokazie blobów , więc nie widzę powodu, by nie renderować na renderach README:

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

Zwróć również uwagę, że SVG ma próbę XSS, ale nie działa: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Miliard śmiechu SVG sprawia, że ​​Firefox 44 zamraża, ale Chromium 48 jest w porządku: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah wspomniał, że bloby są w porządku, ponieważ SVG znajduje się wewnątrz pliku iframe.

Możliwe powody, dla których GitHub nie obsługuje obrazów SVG

• ogólne luki w zabezpieczeniach XML. Np. Otwarcie miliarda śmiechu spowodowało właśnie awarię mojego systemu Firefoksa. Błąd Firefoksa z załączonym exploitem: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . To samo w Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• Skrypty SVG XSS: podczas gdy większość przeglądarek nie uruchamia skryptów, gdy SVG jest osadzony img, wydaje się, że nie jest to wymagane przez standardy, więc może GitHub gra bezpiecznie.

  Przeglądarki uruchamiają go, jeśli otworzysz plik SVG bezpośrednio (ale wygląda na to, że GitHub nigdy nie wyświetla obrazów bezpośrednio w github.comdomenie) lub jeśli jest on wbudowany (które są obecnie całkowicie usuwane przez GitHub), więc te przypadki nie powinny stanowić zagrożenia dla bezpieczeństwa. Odpowiednie linki:

  • specyfikacja: http://www.w3.org/TR/SVG/script.html
  • interaktywne demo SVG: http://www.w3.org/TR/SVG/images/script/script01.svg

Poniższe pytania dotyczą ogólnych zagrożeń związanych z SVG: /security/11384/exploits-or-other-security-risks-with-svg-upload

Mam działający przykład z tagiem img, ale twoje obrazy nie będą wyświetlane. Różnica, którą widzę, to rodzaj treści.

Sprawdziłem obraz github z twojego postu (obrazy dokumentów google nie ładują się w ogóle z powodu awarii połączenia). Obraz z github jest dostarczany jako typ zawartości: tekst / zwykły, który nie zostanie wyrenderowany jako obraz przez Twoją przeglądarkę.

Prawidłowa wartość typu zawartości dla svg to image / svg + xml. Musisz więc upewnić się, że pliki svg ustawiają właściwy typ MIME, ale jest to problem z serwerem.

Wypróbuj z http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg i nie zapomnij podać szerokości i wysokości w tagu.

Skorzystaj z tej strony: https://rawgit.com , działa dla mnie, ponieważ nie mam problemu z uprawnieniami do pliku SVG.
Zwróć uwagę, że RawGit nie jest usługą github, jak wspomniano w FAQ Rawgita :

RawGit nie jest w żaden sposób powiązany z GitHubem. Prosimy nie kontaktować się z GitHub prosząc o pomoc z RawGit

Wprowadź adres URL pliku SVG, którego potrzebujesz, na przykład:

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

Następnie możesz uzyskać poniższy adres URL, którego można użyć do wyświetlenia:

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

Tak jak to działało dla mnie na Githubie.

![Imgae Caption](ImageAddressOnGitHub.svg)

lub

<img src="ImageAddressOnGitHub.svg">