Я знаю, что изображение может быть помещено в 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) отправляются правильные заголовки Content-Type.

Примеры

Все способы, указанные ниже, будут работать.

^{Я скопировал изображение 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.

• Как говорится в комментариях AdamKatz , использование источника, отличного от github.io, может создать потенциальную угрозу конфиденциальности и безопасности. См. Ответ CiroSantilli и ответ DavidChambers для более подробной информации.

• Вопрос для решения этой проблемы был открыт на Github 13 октября 2015 года и был решен 31 августа 2017 года.

Я связался с GitHub, чтобы сказать, что размещенные на github.io SVG больше не отображаются в GitHub README. Я получил этот ответ:

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

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

Это будет работать Ссылайтесь на ваш SVG, используя следующий шаблон:

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

Недостатком является жесткое кодирование владельца и репо в пути, что означает, что svg сломается, если любой из них будет переименован.

Обновление 2020

GitHub, похоже, использует два подхода к безопасности, это хорошая статья: https://digi.ninja/blog/svg_xss.php, см. Также: /security/148507/how-to-prevent- XSS-в-SVG-файлов для загрузки

• показать SVG внутри <img тега, который запрещает запуск сценариев, например, в README: https://github.com/cirosantilli/test-git-web-interface/tree/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a

• использовать Content-Security-Policy: default-src 'none'; style-src 'unsafe-inline'; sandbox. Это предотвращает запуск сценария даже в rawтом случае, если он содержит необработанный файл SVG: https://raw.githubusercontent.com/cirosantilli/test-git-web-interface/8e394cdb012cba4bcf55ebdb89f36872b4c6c12a/svg-foreignObject.svg

  Вы можете увидеть заголовок с curl -vvv. На обычных github.comстраницах тоже есть content-security-policy, но это намного больше.

Обновление 2017

Разработчик GitHub в настоящее время изучает это: https://github.com/github/markup/issues/556#issuecomment-306103203

Обновление 2014-12 : GitHub теперь SVG на шоу BLOB- , поэтому я не вижу причин, почему бы не выполнять рендеринг в 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, но с Chromium 48 все в порядке: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

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

Возможное обоснование того, что GitHub не обслуживает изображения SVG

• общие уязвимости XML. Например, использование миллиарда смехов заставило Firefox разбить мою систему. Ошибка Firefox с приложенным эксплойтом: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html . То же самое в Chromium: https://code.google.com/p/chromium/issues/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

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

Я проверил изображение GitHub из вашего поста (изображения Google Doc вообще не загружаются из-за сбоев соединения). Изображение из github поставляется в виде содержимого: text / plain, которое не будет отображаться вашим браузером как изображение.

Правильным значением типа содержимого для svg является image / svg + xml. Поэтому вы должны убедиться, что SVG-файлы имеют правильный тип MIME, но это проблема сервера.

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

Используйте этот сайт: https://rawgit.com , он работает для меня, так как у меня нет проблемы с разрешением файла SVG.
Пожалуйста, обратите внимание, что RawGit не является сервисом github, как упоминалось в Rawgit FAQ :

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