Включить SVG (размещен на github) в MarkDown

Я знаю, что изображение можно поместить в 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">

чтобы получить результаты:

Google Doc:

Ответы

Ответ 1

Цель raw.github.com - разрешить пользователям просматривать содержимое файла, поэтому для текстовых файлов (SVG, JS, CSS и т.д.) это означает, что в браузере появляются неправильные заголовки и вещи.

Update: Github реализовал функцию, которая позволяет использовать SVG с синтаксисом изображения Markdown. Изображение SVG будет дезинфицировано и отображено с правильным HTTP-заголовком. Некоторые теги (например, <script>) удаляются.

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

См. приведенные ниже примеры для получения сведений.

<ы > Хотя вы не можете напрямую ссылаться на изображения SVG с raw.github.com, вы можете поместить файлы SVG в ветвь gh-pages (или configure master в качестве источника для Github Pages) и ссылку на файлы из github.io

Поскольку файл, который вы пытаетесь отобразить, кажется частью вашей документации по проектам, это может быть беспроигрышная ситуация

Если использование Github Pages - это не ваша вещь, rawgithub.com может быть вариантом. RawGit извлекает ваши файлы и устанавливает для вас правильные заголовки. С >

Как указано AdamKatz в комментариях, использование источника, отличного от github.io, может привести к потенциальной угрозе конфиденциальности и безопасности. Подробнее см. от CiroSantilli и от DavidChambers.
Как указано MonsieurDart в комментариях RawGit не работает для частных репозиториев.
Проблема для решения этой проблемы была открыта в Github 13 октября 2015 года и была решена 31 августа 2017 года.

Примеры

Я скопировал изображение SVG из вопроса в репо на github, чтобы создать примеры ниже:

Ссылка на относительные файлы (работает, но, очевидно, только https://github.com/)

Код

![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` (Works)

Код

![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 (Works)

Код

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

Результат

Связывание с RAW файлами с помощью rawgithub.com (также работает)

Примечание. Иногда служба RawGithub работает/не работает. Если вы не видите изображение ниже, это, вероятно, так.

Код

![Alt text](https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg)
<img src="https://rawgithub.com/potherca-blog/StackOverflow/master/question.13808020.include-an-svg-hosted-on-github-in-markdown/controllers_brief.svg">

Результат

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

Обновление 2017

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

Обновление 2014-12. Теперь GitHub отображает SVG на показе blob, поэтому я не вижу причин, почему бы не сделать рендеринг README:

Также обратите внимание, что у 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 с эксплойтом: 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 в целом: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

Ответ 6

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

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

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

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

Ответ 7

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

RawGit никак не связан с GitHub. Пожалуйста, не обращайтесь в GitHub с просьбой о помощи в RawGit

Введите URL-адрес svg, который вам нужен, например:

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

Затем вы можете получить подсказку, которая может быть использована для отображения:

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

Включить SVG (размещен на github) в MarkDown

Ответы

Ответ 1

Примеры

Ссылка на относительные файлы (работает, но, очевидно, только https://github.com/)

Код

Результат

Ссылка на файлы RAW (не работает)

Код

Результат

Связывание с RAW файлами с помощью ?sanitize=true (Works)

Код

Результат

Ссылка на файлы, размещенные на github.io (Works)

Код

Результат

Связывание с RAW файлами с помощью rawgithub.com (также работает)

Код

Результат

Ответ 2

Ответ 3

Ответ 4

Ответ 5

Ответ 6

Ответ 7

Связывание с RAW файлами с помощью `?sanitize=true` (Works)