MarkDown에 SVG (github에서 호스팅) 포함

MarkDown에 SVG (github에서 호스팅) 포함

---

MD ![Alt text](/path/to/img.jpg)또는 구문 중 하나를 사용하여 이미지를 MD에 배치 할 수 있다는 것을 알고 ![Alt text](/path/to/img.jpg "Optional title")있지만 코드가 Github에서 호스팅되는 위치에 MD에 SVG를 배치하는 데 어려움이 있습니다.

궁극적으로 rails3을 사용하고 내가 사용하고 있으므로, 지금 자주 모델을 변경 RailRoady을 모델의 스키마 다이어그램의 SVG를 생성합니다. 그 SVG를 ReadMe.md에 넣고 표시하고 싶습니다. SVG 파일을 로컬로 열면 작동하지만 어떻게 MD 파일에서 SVG를 렌더링하도록 브라우저를 가져 옵니까? 코드가 완성 될 때까지 역동적 인 것으로 가정하면 (아마도 절대로) 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 문서 :

---

raw.github.com사용자가 파일의 내용을 볼 수 있도록 하는 것이 목적 이므로 텍스트 기반 파일 (SVG, JS, CSS 등)의 경우 브라우저에서 잘못된 헤더 및 항목이 표시됩니다.

업데이트 : Github은 SVG를 Markdown 이미지 구문과 함께 사용할 수있는 기능을 구현했습니다. SVG 이미지가 삭제되고 올바른 HTTP 헤더가 표시됩니다. 와 같은 특정 태그 <script>는 제거됩니다.

위생 처리 된 SVG를 보거나 다른 위치 (예 : http://github.com/의 repos에서 호스팅되지 않은 markdown 파일)에서이 효과를 얻으 ?sanitize=true려면 SVG의 원시 URL에 추가 하면됩니다.

렌더링 세부 사항은 아래 예를 참조하십시오.

SVG 이미지에 직접 링크 할 수는 없지만 raw.github.comSVG 파일을 gh-pages브랜치에 놓거나 (또는 Github 페이지의 소스 로 구성master )github.io

표시하려는 파일이 프로젝트 문서의 일부인 것처럼 보이므로 이는 윈-윈 상황 일 수 있습니다.

Github Pages를 사용하지 않는 경우 rawgithub.com 이 옵션이 될 수 있습니다. RawGit은 파일을 검색하고 올바른 헤더를 설정합니다.

• 의견에서 AdamKatz 가 언급 한 바와 같이 github.io 이외의 소스를 사용하면 개인 정보 보호 및 보안 위험이 발생할 수 있습니다. 자세한 내용은 CiroSantilli 의 답변 과 DavidChambers 의 답변 을 참조하십시오.

• 의견 에 MonsieurDart 가 언급했듯이 RawGit 은 개인 저장소 에는 작동하지 않습니다 .

• 이 문제를 해결하는 문제 는 2015 년 10 월 13 일 Github에서 시작되어 2017 년 8 월 31 일에 해결되었습니다.

---

예

아래 예를 만들기 위해 SVG 이미지를 질문 에서 github의 repo로 복사했습니다 .

상대 파일에 링크 (작동하지만 분명히 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">

결과

?sanitize=true(Works)를 사용하여 RAW 파일에 연결

암호

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

결과

rawgithub.com을 사용하여 RAW 파일에 연결 (또한 작동)

참고 : 때때로 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">

결과

---

GitHub에 연락하여 github.io 호스팅 SVG가 더 이상 GitHub README에 표시되지 않는다고 말했습니다. 이 답장을 받았습니다.

교차 사이트 스크립팅 취약점으로 인해 GitHub.com에서 svg 이미지 렌더링을 비활성화해야했습니다.

---

rawgit.com solves this problem nicely. For each request, it retrieves the appropriate document from GitHub and, crucially, serves it with the correct Content-Type header.

---

This will work. Link to your SVG using the following pattern:

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

The downside is hardcoding the owner and repo in the path, meaning the svg will break if either of those are renamed.

---

Update 2017

A GitHub dev is currently looking into this: https://github.com/github/markup/issues/556#issuecomment-306103203

Update 2014-12: GitHub now renders SVG on blob show, so I don't see any reason why not to render on README renderings:

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

Also note that that SVG does have an XSS attempt but it does not run: https://raw.githubusercontent.com/cirosantilli/test/2144a93333be144152e8b0d4144b77b211afce63/svg.svg

The billion laugh SVG does make Firefox 44 Freeze, but Chromium 48 is OK: https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

Petah mentioned that blobs are fine because the SVG is inside an iframe.

Possible rationale for GitHub not serving SVG images

• general XML vulnerabilities. E.g. opening a billion laughs exploit just made Firefox crash my system. Firefox bug with exploit attached: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html. Same on Chromium: https://code.google.com/p/chromium/issues/detail?id=231562

• SVG XSS scripting: while most browsers don't run scripts when the SVG is embedded with img, it seems that this is not required by the standards, so maybe GitHub is playing it safe.

  Browsers do run it if you open the SVG directly (but it appears that GitHub never shows images directly on the github.com domain) or if it is inline (which are currently completely removed by GitHub), so those cases shouldn't be a security concern. Relevant links:

  • spec: http://www.w3.org/TR/SVG/script.html
  • interactive SVG demo: http://www.w3.org/TR/SVG/images/script/script01.svg

The following questions asks about the risks of SVG in general: https://security.stackexchange.com/questions/11384/exploits-or-other-security-risks-with-svg-upload

---

I have a working example with an img-tag, but your images won't display. The difference I see is the content-type.

I checked the github image from your post (the google doc images don't load at all because of connection failures). The image from github is delivered as content-type: text/plain, which won't get rendered as an image by your browser.

The correct content-type value for svg is image/svg+xml. So you have to make sure that svg files set the correct mime type, but that's a server issue.

Try it with http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg and don't forget to specify width and height in the tag.

---

이 사이트를 사용하십시오 : https://rawgit.com svg 파일에 권한 문제가 없으므로 저에게 효과적입니다. Rawgit FAQ
에서 언급했듯이 RawGit 은 github의 서비스가 아닙니다 .

RawGit은 GitHub와 관련이 없습니다. RawGit에 대한 도움을 요청하는 GitHub에 연락하지 마십시오

다음과 같이 필요한 svg의 URL을 입력하십시오.

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

그런 다음 표시하는 데 사용할 수있는 url bellow를 얻을 수 있습니다.

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

참고 URL : https://stackoverflow.com/questions/13808020/include-an-svg-hosted-on-github-in-markdown