Saya tahu bahwa gambar dapat ditempatkan di MD dengan sintaks MD salah satu ![Alt text](/path/to/img.jpg)atau ![Alt text](/path/to/img.jpg "Optional title"), tapi saya mengalami kesulitan menempatkan SVG di MD di mana kode di-host di GitHub.

Akhirnya menggunakan rails3, dan mengubah model sering sekarang, jadi saya menggunakan RailRoady untuk menghasilkan SVG dari diagram skema model. Saya ingin agar SVG itu kemudian ditempatkan di ReadMe.md, dan ditampilkan. Ketika saya membuka file SVG secara lokal, itu berfungsi, jadi bagaimana cara saya membuat browser untuk membuat SVG dalam file MD? Mengingat bahwa kode akan dinamis sampai selesai (sepertinya tidak pernah), hosting SVG di tempat yang terpisah tampaknya berlebihan dan bahwa saya kehilangan pendekatan untuk mencapai ini.

SVG yang saya coba sertakan ada di sini di GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Saya telah mencoba yang berikut ini, dengan gambar yang sebenarnya juga untuk memverifikasi sintaks berfungsi, hanya saja kode SVG tidak dirender:

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

untuk mendapatkan hasil:

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

Google Doc :

Tujuan dari raw.github.com adalah untuk memungkinkan pengguna melihat konten file, jadi untuk file berbasis teks ini berarti (untuk jenis konten tertentu) Anda bisa mendapatkan header yang salah dan hal-hal yang merusak browser.

Ketika pertanyaan ini diajukan (pada 2012), SVG tidak berfungsi. Sejak itu Github telah menerapkan berbagai perbaikan. Sekarang (setidaknya untuk SVG), header Tipe Konten yang benar dikirim.

Contohnya

Semua cara yang disebutkan di bawah ini akan berhasil.

^{Saya menyalin gambar SVG dari pertanyaan ke repo di github untuk membuat contoh di bawah ini}

Menautkan ke file menggunakan jalur relatif (Bekerja, tetapi jelas hanya di github.com / github.io)

Kode

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

Hasil

Lihat contoh kerja di github.com .

Menautkan ke file RAW

Kode

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

Hasil

Menautkan ke file RAW menggunakan ?sanitize=true

Kode

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

Hasil

Menautkan ke file yang dihosting di github.io

Kode

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

Hasil

Beberapa komentar tentang perubahan yang terjadi di sepanjang jalan:

• Github telah mengimplementasikan fitur yang memungkinkan SVG untuk digunakan dengan sintaks gambar Markdown. Gambar SVG akan disanitasi dan ditampilkan dengan header HTTP yang benar. Tag tertentu (seperti <script>) dihapus.

  Untuk melihat SVG yang telah disanitasi atau untuk mencapai efek ini dari tempat lain (yaitu dari file penurunan harga yang tidak di-host dalam repo di http://github.com/ ) cukup tambahkan ?sanitize=trueke URL mentah SVG.

• Seperti yang dinyatakan oleh AdamKatz dalam komentar, menggunakan sumber selain github.io dapat berpotensi menimbulkan risiko privasi dan keamanan. Lihat jawaban oleh CiroSantilli dan jawaban oleh DavidChambers untuk lebih jelasnya.

• Masalah untuk menyelesaikan ini dibuka di Github pada 13 Oktober 2015 dan diselesaikan pada 31 Agustus 2017

Saya menghubungi GitHub untuk mengatakan bahwa SVG yang dihosting github.io tidak lagi ditampilkan di GitHub READMEs. Saya menerima balasan ini:

Kami harus menonaktifkan rendering gambar svg di GitHub.com karena kerentanan skrip lintas situs yang potensial.

rawgit.com memecahkan masalah ini dengan baik. Untuk setiap permintaan, itu mengambil dokumen yang sesuai dari GitHub dan, yang terpenting, menyajikannya dengan header Tipe Konten yang benar.

Ini akan bekerja Tautkan ke SVG Anda menggunakan pola berikut:

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

The downside adalah hardcoding pemilik dan repo di jalan, yang berarti svg akan pecah jika salah satu dari mereka diganti namanya.

Perbarui 2017

Seorang pengembang GitHub saat ini sedang menyelidiki hal ini: https://github.com/github/markup/issues/556#issuecomment-306103203

Pembaruan 2014-12 : GitHub sekarang membuat SVG di acara gumpalan, jadi saya tidak melihat alasan mengapa tidak membuat rendering README:

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

Juga perhatikan bahwa SVG memang memiliki upaya XSS tetapi tidak berjalan: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Satu miliar tawa SVG membuat Firefox 44 membeku, tetapi Chromium 48 tidak masalah: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah menyebutkan bahwa gumpalan baik-baik saja karena SVG ada di dalam sebuah iframe.

Alasan yang mungkin untuk GitHub tidak menyajikan gambar SVG

• kerentanan XML umum. Misalnya membuka satu miliar tertawa mengeksploitasi baru saja membuat Firefox crash sistem saya. Bug Firefox dengan exploit terlampir: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Sama dengan Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• SVG XSS scripting: sementara sebagian besar browser tidak menjalankan skrip ketika SVG disematkan img, tampaknya ini tidak diperlukan oleh standar, jadi mungkin GitHub memainkannya dengan aman.

  Peramban menjalankannya jika Anda membuka SVG secara langsung (tetapi tampaknya GitHub tidak pernah menampilkan gambar langsung di github.comdomain) atau jika itu sebaris (yang saat ini sepenuhnya dihapus oleh GitHub), sehingga kasus-kasus tersebut seharusnya tidak menjadi masalah keamanan. Tautan yang relevan:

  • spec: http://www.w3.org/TR/SVG/script.html
  • Demo SVG interaktif: http://www.w3.org/TR/SVG/images/script/script01.svg

Pertanyaan-pertanyaan berikut menanyakan tentang risiko SVG secara umum: /security/11384/exploits-or-other-security-risks-with-svg-upload

Saya memiliki contoh yang berfungsi dengan img-tag, tetapi gambar Anda tidak akan ditampilkan. Perbedaan yang saya lihat adalah tipe konten.

Saya memeriksa gambar github dari posting Anda (gambar google doc tidak memuat sama sekali karena kegagalan koneksi). Gambar dari github dikirimkan sebagai tipe konten: teks / polos, yang tidak akan ditampilkan sebagai gambar oleh browser Anda.

Nilai tipe konten yang benar untuk svg adalah image / svg + xml. Jadi Anda harus memastikan bahwa file svg mengatur tipe mime yang benar, tetapi itu masalah server.

Cobalah dengan http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg dan jangan lupa untuk menentukan lebar dan tinggi dalam tag.

Gunakan situs ini: https://rawgit.com , ini berfungsi untuk saya karena saya tidak memiliki masalah izin dengan file svg.
Harap perhatikan bahwa RawGit bukan layanan github, seperti yang disebutkan dalam FAQ Rawgit :

RawGit tidak terkait dengan GitHub dengan cara apa pun. Tolong jangan hubungi GitHub untuk meminta bantuan dengan RawGit

Masukkan url svg yang Anda butuhkan, seperti:

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

Kemudian, Anda bisa mendapatkan url di bawah ini yang dapat digunakan untuk menampilkan:

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

Sama seperti ini bekerja untuk saya di Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

atau

<img src="ImageAddressOnGitHub.svg">