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

궁극적으로 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">

결과를 얻으려면 :

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의 repo로 복사했습니다.}

상대 경로를 사용하여 파일에 링크 (작동하지만 분명히 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/의 repos에서 호스팅되지 않은 markdown 파일)에서이 효과를 얻으 ?sanitize=true려면 SVG의 원시 URL에 추가 하면됩니다.

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

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

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

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

rawgit.com 은이 문제를 잘 해결합니다. 각 요청에 대해 GitHub에서 적절한 문서를 검색하고 결정적으로 올바른 Content-Type 헤더와 함께 제공합니다.

작동합니다. 다음 패턴을 사용하여 SVG에 연결하십시오.

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

단점은 소유자를 하드 코딩하고 경로에 repo를 저장하는 것입니다. 즉, svg 중 하나의 이름이 바뀌면 svg가 중단됩니다.

2017 업데이트

GitHub 개발자는 현재 다음을 조사하고 있습니다 : https://github.com/github/markup/issues/556#issuecomment-306103203

2014-12 업데이트 : GitHub는 이제 BLOB 쇼에서 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가 10 억 건의 웃음으로 Firefox 44 Freeze를 만들지 만 Chromium 48은 괜찮습니다 : https://github.com/cirosantilli/web-cheat/blob/master/svg-billion-laughs.svg

페타 언급 는 SVG가 내부에 있기 때문에 얼룩이 iframe좋습니다.

SVG 이미지를 제공하지 않는 GitHub의 이론적 근거

• 일반적인 XML 취약점. 예를 들어, 10 억 건의 웃음 익스플로잇을 열면 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에 의해 완전히 제거 된 경우) 인 하므로 보안 상 문제가되지 않아야합니다. 관련 링크 :

  • 사양 : 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-tag에 대한 실제 예제가 있지만 이미지가 표시되지 않습니다. 내가 보는 차이점은 내용 유형입니다.

게시물에서 github 이미지를 확인했습니다 (연결 오류로 인해 Google 문서 이미지가 전혀로드되지 않습니다). github의 이미지는 content-type : text / plain으로 제공되며 브라우저에서 이미지로 렌더링되지 않습니다.

svg의 올바른 컨텐츠 유형 값은 image / svg + xml입니다. 따라서 svg 파일이 올바른 MIME 유형을 설정했는지 확인해야하지만 서버 문제입니다.

http://svg.tutorial.aptico.de/grafik_svg/dummy3.svg를 사용 하여 시도 하고 태그에 너비와 높이를 지정하는 것을 잊지 마십시오.

이 사이트를 사용하십시오 : 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을 표시하여 다음과 같이 표시 할 수 있습니다.

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