Я знаю, що зображення може бути розміщене в MD з синтаксисом MD або, ![Alt text](/path/to/img.jpg)або ![Alt text](/path/to/img.jpg "Optional title"), але у мене виникають труднощі з розміщенням SVG в MD, де код розміщений на GitHub.

Зрештою, використовую rails3 і часто змінюю модель прямо зараз, тому я використовую RailRoady для створення SVG схеми діаграм моделей. Я хотів би, щоб SVG потім був розміщений у ReadMe.md і відображався. Коли я відкриваю файл SVG локально, він працює, тож як мені змусити браузер відобразити SVG у файлі MD? Зважаючи на те, що код буде динамічним до його завершення (здавалося б, ніколи), розміщення SVG в окремому місці здається непосильним, і мені не вистачає підходу для цього.

SVG, який я намагаюся включити, знаходиться тут на GitHub:https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg

Я спробував наступне, з фактичним зображенням, щоб перевірити, чи працює синтаксис, лише те, що SVG-код не видається:

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

щоб отримати результати:

1 : https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "Огляд"

Документ Google :

Мета raw.github.com- дозволити користувачам переглядати вміст файлу, тому для текстових файлів це означає (для певних типів вмісту) ви можете отримати неправильні заголовки, і в браузері все порушиться.

Коли було задано це питання (у 2012 році), SVG не працювали. З тих пір Github впровадив різні вдосконалення. Тепер (принаймні для SVG) надсилаються правильні заголовки типу вмісту.

Приклади

Всі наведені нижче способи працюватимуть.

^{Я скопіював зображення SVG з питання в репо на github , щоб створити приклади нижче}

Посилання на файли за допомогою відносних шляхів (працює, але очевидно лише на github.com / github.io)

Код

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

Результат

Побачити робочий приклад на github.com .

Посилання на файли RAW

Код

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

Результат

Посилання на файли RAW за допомогою ?sanitize=true

Код

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

Результат

Посилання на файли, розміщені на github.io

Код

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

Результат

Деякі зауваження щодо змін, які відбулися попутно:

• Github реалізував функцію, завдяки якій SVG можна використовувати з синтаксисом зображень Markdown. Зображення SVG буде дезінфіковано та відображене з правильним заголовком HTTP. Певні теги (наприклад,<script> ) видаляються.

  Для перегляду очищеного SVG або досягнення цього ефекту з інших місць (тобто з файлів розмітки, які не розміщені в репортах на http://github.com/ ), просто додайте?sanitize=true до необробленої URL-адреси SVG.

• Як зазначає Адам Катц у коментарях, використання іншого джерела, ніж github.io, може спричинити ризики конфіденційності та безпеки. Дивіться відповідь CiroSantilli та відповідь DavidChambers для отримання більш детальної інформації.

• Питання щодо вирішення цього питання було відкрито в Github 13 жовтня 2015 року і було вирішено 31 серпня 2017 року

Я зв’язався з GitHub, щоб сказати, що SVG-файли, розміщені github.io, більше не відображаються в GitHub README. Я отримав цю відповідь:

Нам довелося вимкнути візуалізацію svg зображень на GitHub.com через потенційні вразливості сценаріїв міжсайтового сценарію.

rawgit.com прекрасно вирішує цю проблему. Для кожного запиту він отримує відповідний документ з GitHub і, головне, подає його з правильним заголовком Content-Type.

Це спрацює. Посилання на ваш SVG, використовуючи наступний зразок:

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

Мінусом є жорстке кодування власника та репост у шляху, тобто svg порушиться, якщо будь-який із них буде перейменований.

Оновлення 2017 року

Зараз розробник GitHub вивчає це: https://github.com/github/markup/isissue/556#issuecomment-306103203

Оновлення 2014-12 : GitHub тепер рендерує SVG у шоу, тому я не бачу жодної причини, чому б не відобразити README-рендерінг:

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

Також зауважте, що у SVG є спроба XSS, але вона не працює: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

SVG мільярда сміху робить Firefox 44 Freeze, але з Chromium 48 все добре: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Петах зазначив, що краплі добре, тому що SVG знаходиться всередині iframe.

Можливо, GitHub не обґрунтовує зображення SVG

• загальні вразливості XML Наприклад, відкриття мільярду сміху тільки що змусило Firefox розбити мою систему. Помилка Firefox із додаванням exploit: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . Те саме в Chromium: https://code.google.com/p/chromium/isissue/detail?id=231562

• Сценарії SVG XSS: хоча більшість браузерів не запускає сценарії, коли SVG вбудований img, схоже, що цього не вимагають стандарти, тому, можливо, GitHub відтворює це безпечно.

  Браузери запускають його, якщо ви відкриваєте SVG безпосередньо (але, здається, GitHub ніколи не показує зображення безпосередньо в github.comдомені) або якщо вони є вбудованими (які в даний час повністю видаляються GitHub), тож ці випадки не повинні заважати безпеці. Відповідні посилання:

  • spec: http://www.w3.org/TR/SVG/script.html
  • інтерактивна демонстрація SVG: http://www.w3.org/TR/SVG/images/script/script01.svg

Наступні запитання задають питання про ризики SVG взагалі: /security/11384/exploits-or-other-security-risks-with-svg-upload

У мене є робочий приклад із імг-тегом, але ваші зображення не відображатимуться. Я бачу різницю - тип вмісту.

Я перевірив зображення github з вашого допису (зображення doc google взагалі не завантажуються через збої в зв’язку). Зображення з github подається у вигляді вмісту: text / plain, який не відображатиметься як зображення у вашому браузері.

Правильне значення типу вмісту для svg - це image / svg + xml. Отже, ви повинні переконатися, що у SVG-файлах встановлено правильний тип mime, але це проблема сервера.

Спробуйте це з http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg і не забудьте вказати ширину та висоту в тезі.

Використовуйте цей сайт: https://rawgit.com , він працює для мене, оскільки у мене немає проблеми з дозволом на файл SVG.
Зверніть увагу, що RawGit - це не сервіс github, як згадується у FAQ щодо Rawgit :

RawGit жодним чином не асоціюється з GitHub. Будь ласка, не зв'яжіться з GitHub з проханням про допомогу з RawGit

Введіть потрібний URL svg, наприклад:

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

Потім ви можете отримати URL-адресу нижче, який можна використовувати для відображення:

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

Так само, як це працювало для мене на Github.

![Imgae Caption](ImageAddressOnGitHub.svg)

або

<img src="ImageAddressOnGitHub.svg">