Tôi biết rằng một hình ảnh có thể được đặt trong MD với cú pháp MD là ![Alt text](/path/to/img.jpg)hoặc ![Alt text](/path/to/img.jpg "Optional title"), nhưng tôi gặp khó khăn khi đặt một SVG trong MD nơi mã được lưu trữ trên GitHub.

Cuối cùng sử dụng rails3 và thay đổi mô hình thường xuyên ngay bây giờ, vì vậy tôi đang sử dụng RailRoady để tạo ra một SVG của sơ đồ lược đồ của các mô hình. Tôi muốn cho SVG đó sau đó được đặt trong ReadMe.md và được hiển thị. Khi tôi mở tệp SVG cục bộ, nó hoạt động, vậy làm cách nào để trình duyệt hiển thị SVG trong tệp MD? Cho rằng mã sẽ động cho đến khi nó được hoàn thành (dường như không bao giờ), việc lưu trữ SVG ở một nơi riêng biệt có vẻ quá mức cần thiết và tôi đang thiếu một cách tiếp cận để thực hiện điều này.

SVG tôi đang cố gắng đưa vào đây trên GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Tôi đã thử như sau, với một hình ảnh thực tế cũng như để xác minh cú pháp đang hoạt động, chỉ là mã SVG không được hiển thị:

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

để có được kết quả của:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllftimebrief.svg "Tổng quan"

Tài liệu Google :

Mục đích của raw.github.comviệc cho phép người dùng xem nội dung của tệp, vì vậy đối với các tệp dựa trên văn bản, điều này có nghĩa (đối với một số loại nội dung nhất định), bạn có thể nhận được các tiêu đề sai và những thứ bị hỏng trong trình duyệt.

Khi câu hỏi này được hỏi (năm 2012), SVG không hoạt động. Kể từ đó, Github đã thực hiện nhiều cải tiến khác nhau. Bây giờ (ít nhất là đối với SVG), các tiêu đề Kiểu nội dung chính xác được gửi.

Ví dụ

Tất cả các cách được nêu dưới đây sẽ làm việc.

^{Tôi đã sao chép hình ảnh SVG từ câu hỏi sang repo trên github để tạo các ví dụ bên dưới}

Liên kết đến các tệp bằng các đường dẫn tương đối (Hoạt động, nhưng rõ ràng chỉ có trên github.com / github.io)

Mã

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

Kết quả

Xem ví dụ làm việc trên github.com .

Liên kết đến các tệp RAW

Mã

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

Kết quả

Liên kết đến các tệp RAW bằng cách sử dụng ?sanitize=true

Mã

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

Kết quả

Liên kết đến các tệp được lưu trữ trên github.io

Mã

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

Kết quả

Một số ý kiến ​​liên quan đến những thay đổi đã xảy ra trên đường đi:

• Github đã triển khai một tính năng giúp cho SVG có thể được sử dụng với cú pháp hình ảnh Markdown. Hình ảnh SVG sẽ được vệ sinh và hiển thị với tiêu đề HTTP chính xác. Một số thẻ (như <script>) được loại bỏ.

  Để xem SVG được khử trùng hoặc để đạt được hiệu ứng này từ những nơi khác (tức là từ các tệp đánh dấu không được lưu trữ trong repos trên http://github.com/ ) chỉ cần thêm ?sanitize=truevào URL thô của SVG.

• Như AdamKatz đã nêu trong các bình luận, sử dụng một nguồn khác ngoài github.io có thể gây ra rủi ro bảo mật và quyền riêng tư tiềm ẩn. Xem câu trả lời của CiroSantilli và câu trả lời của DavidChambers để biết thêm chi tiết.

• Vấn đề để giải quyết vấn đề này đã được mở trên Github vào ngày 13 tháng 10 năm 2015 và đã được giải quyết vào ngày 31 tháng 8 năm 2017

Tôi đã liên lạc với GitHub để nói rằng các SVG được lưu trữ trên github.io không còn được hiển thị trong GitHub READMEs. Tôi đã nhận được trả lời này:

Chúng tôi đã phải vô hiệu hóa kết xuất hình ảnh svg trên GitHub.com do các lỗ hổng kịch bản chéo trang tiềm năng.

rawgit.com giải quyết vấn đề này độc đáo. Đối với mỗi yêu cầu, nó lấy tài liệu thích hợp từ GitHub và, đặc biệt, phục vụ nó với tiêu đề Kiểu nội dung chính xác.

Điều này sẽ làm việc. Liên kết với SVG của bạn bằng cách sử dụng mẫu sau:

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

Nhược điểm là mã hóa chủ sở hữu và repo trong đường dẫn, có nghĩa là svg sẽ bị hỏng nếu một trong hai được đổi tên.

Cập nhật 2017

Một nhà phát triển GitHub hiện đang xem xét điều này: https://github.com/github/markup/issues/556#issuecomment-306103203

Cập nhật 2014-12 : GitHub hiện kết xuất SVG trên chương trình blob, vì vậy tôi không thấy bất kỳ lý do nào tại sao không hiển thị trên kết xuất README:

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

Cũng lưu ý rằng SVG không có nỗ lực XSS nhưng nó không chạy: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

Tỷ phú cười SVG khiến Firefox 44 đóng băng, nhưng Chromium 48 vẫn ổn: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah đã đề cập rằng các đốm màu vẫn ổn vì SVG nằm trong một iframe.

Lý do có thể có cho GitHub không phục vụ hình ảnh SVG

• lỗ hổng XML chung. Ví dụ, việc mở một tỷ lượt cười chỉ khiến Firefox bị sập hệ thống của tôi. Lỗi Firefox có khai thác kèm theo: https://ormszilla.mozilla.org/page.cgi?id=v biểu / user.html . Tương tự trên Chromium: https://code.google.com.vn/p/chromium/issues/detail?id=231562

• Tập lệnh SVG XSS: trong khi hầu hết các trình duyệt không chạy tập lệnh khi SVG được nhúng img, có vẻ như điều này không bắt buộc theo tiêu chuẩn, vì vậy có lẽ GitHub đang chơi an toàn.

  Các trình duyệt sẽ chạy nó nếu bạn mở SVG trực tiếp (nhưng có vẻ như GitHub không bao giờ hiển thị hình ảnh trực tiếp trên github.commiền) hoặc nếu nó là nội tuyến (hiện đang bị GitHub xóa hoàn toàn), vì vậy những trường hợp đó không phải là vấn đề bảo mật. Các liên kết có liên quan:

  • thông số kỹ thuật: http://www.w3.org/TR/SVG/script.html
  • Bản demo SVG tương tác: http://www.w3.org/TR/SVG/images/script/script01.svg

Các câu hỏi sau đây hỏi về các rủi ro của SVG nói chung: /security/11384/Exloits-or-other-security-risks-with-svg-upload

Tôi có một ví dụ hoạt động với thẻ img, nhưng hình ảnh của bạn sẽ không hiển thị. Sự khác biệt tôi thấy là loại nội dung.

Tôi đã kiểm tra hình ảnh github từ bài đăng của bạn (hình ảnh tài liệu google hoàn toàn không tải vì lỗi kết nối). Hình ảnh từ github được phân phối dưới dạng nội dung: văn bản / thuần túy, sẽ không được hiển thị dưới dạng hình ảnh bởi trình duyệt của bạn.

Giá trị loại nội dung chính xác cho svg là image / svg + xml. Vì vậy, bạn phải đảm bảo rằng các tập tin svg đặt đúng loại mime, nhưng đó là sự cố máy chủ.

Hãy thử với http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg và đừng quên chỉ định chiều rộng và chiều cao trong thẻ.

Sử dụng trang web này: https://rawgit.com , nó hoạt động với tôi vì tôi không gặp vấn đề về quyền với tệp svg.
Xin lưu ý rằng RawGit không phải là dịch vụ của github, như được đề cập trong Câu hỏi thường gặp về Rawgit :

RawGit không được liên kết với GitHub dưới bất kỳ hình thức nào. Vui lòng không liên hệ với GitHub để yêu cầu trợ giúp với RawGit

Nhập url của svg bạn cần, chẳng hạn như:

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

Sau đó, bạn có thể lấy url dưới đây có thể được sử dụng để hiển thị:

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

Giống như điều này làm việc cho tôi trên Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

hoặc là

<img src="ImageAddressOnGitHub.svg">