Включить 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">

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

Overviewcontrollers_brief.svg

Alt text

Google Doc:

pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720

controllers_brief.svg

edit

Ответ 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 извлекает ваши файлы и устанавливает для вас правильные заголовки. С >


Примеры

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

Результат

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

Результат

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

Результат

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

Результат

Alt textcontrollers_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), поэтому эти случаи не должны " это проблема безопасности. Соответствующие ссылки:

Следующие вопросы касаются рисков 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