계기

서버 측의 matplotlib에 의한 도면 Tips - Qiita

안전하게 도형 파일을 출력 할 수있었습니다. 도형 표시의 도구는 좋아하는 것을 사용하면 좋지만, 여기서는 Visual Studio Code를 추천하고 싶다. 아시다시피 Visual Studio Code는 텍스트 편집기이므로 텍스트 취급이 메인이지만, Folder 단위로 open 할 수있어 그 안에서 액티브하게 File를 전환하면서 작업을 진행할 수 있다. 우연히 이미지 파일 (png)을 지정 (접촉)하면 이미지가 표시되면이 기능을 알 수있었습니다.
...
렌더링 될 것이라고 잠시 생각했지만 SVG는 텍스트였습니다.

그렇다면 해보자.

구현

HTML 템플릿에 열려있는 SVG 파일 포함

표준 HTML 미리보기로 표시

이상!

처음 여러가지 어려워 생각해 버렸지만, 이하의 샘플을 찾아서 사고방식 바꾸면 뻔뻔할 수 있었다.
vscode-extension-samples/textdocumentprovider-sample at master · Microsoft/vscode-extension-samples

덤

npm에서 svg2png 뭐 딱 좋은 라이브러리가 있었으므로 내보내기 기능도 구현.

리포지토리

SVG Viewer | Visual Studio Marketplace

cssho/vscode-svgviewer: SVG Viewerfor Visual Studio Code

ScreenShot

2016/04/25 추가

몇 가지 새로운 기능 추가

SVG를 data URI scheme로 변환하고 클립 보드에 복사

크기를 명시 적으로 지정하여 SVG를 PNG로 변환

Visual Studio Marketplace에서 추천된 덕분에 2000 installs 이상!

2016/05/06 추가

Visual Studio Code 블로그에서 소개되었습니다.

Visual Studio Code Extensions Roundup May 2016