공개 노트

Markdown 속 SVG를 결과물로 바꾸는 markdown-svg-renderer

2026-08-18Views 15약 3분생성형 AI 활용

Summary

markdown-svg-renderer: Markdown 속 SVG를 검토하고 내보내는 브라우저 도구

Markdown 문서에 SVG 코드를 넣는 것은 간단하지만, 코드와 실제 그림을 함께 검토하고 다른 형식으로 내보내려면 별도의 작업이 필요하다. markdown-svg-renderer는 작성, 렌더링, 공유, 변환 과정을 브라우저 안에서 연결한다.

SVG 코드와 렌더링 결과를 함께 확인한다

markdown-svg-renderer는 언어 태그가 svg인 삼중 백틱 코드 펜스를 찾아 전용 웹 컴포넌트로 변환한다. 기본 탭에는 렌더링된 SVG가 표시되고, 코드 탭에서는 원본 SVG 코드를 확인할 수 있다. 렌더링 결과에는 최대 너비 100%가 적용되며, 크기는 원본 종횡비에 맞춰 조정된다.¹

이 구조의 장점은 설명, 코드, 시각적 결과를 하나의 Markdown 문서에서 비교할 수 있다는 점이다. SVG를 수정한 뒤 별도의 뷰어나 변환 도구를 오가지 않아도 되므로 기술 문서와 시각 자료를 함께 다듬기 쉽다.

입력과 공유 방식을 선택할 수 있다

문서는 세 가지 방식으로 불러올 수 있다.

Markdown 원문을 직접 입력한다.
CORS를 지원하는 URL에서 문서를 가져온다.
GitHub Gist URL을 입력한다.

GitHub Gist URL을 사용하면 GitHub API를 통해 해당 Gist의 첫 번째 파일을 Markdown으로 가져온다. 일반 URL 입력 모드에서는 대상 URL이 페이지의 프래그먼트 식별자에 기록된다. 이 주소를 다시 열면 도구가 URL 탭으로 전환해 문서를 불러오므로, 같은 원격 문서를 다시 확인하거나 공유하기 편하다.¹

다만 URL 방식은 대상 서버가 CORS를 지원해야 한다. 또한 GitHub Gist에서는 첫 번째 파일만 읽는다는 점을 고려해 파일 순서를 구성해야 한다.

정제 대신 격리로 SVG를 보호한다

SVG는 스타일, 참조 요소, 애니메이션 등 다양한 기능을 포함할 수 있다. 허용 목록을 기반으로 코드를 정제하면 위험한 요소를 제거할 수 있지만, 정상적인 표현까지 손상될 가능성이 있다.

markdown-svg-renderer는 원본 SVG를 그대로 유지하는 대신 네트워크 접근이 차단된 iframe에서 렌더링한다. 이 iframe에는 빈 sandbox 속성이 설정되며, CSP의 default-src 'none'과 script-src 'none' 규칙이 기본 리소스와 스크립트를 차단한다.²

이 설계는 SVG 렌더링 도구를 평가할 때 확인해야 할 기준을 보여준다. 단순히 “코드를 정제하는가”만 볼 것이 아니라 다음 항목도 함께 살펴봐야 한다.

SVG가 본문과 분리된 환경에서 실행되는가
스크립트 실행 권한이 차단되는가
외부 네트워크와 리소스에 접근할 수 있는가
보안 조치가 정상적인 SVG 표현을 훼손하지 않는가

PNG, JPEG, MP4로 내보낸다

렌더링된 SVG는 PNG 및 JPEG 탭에서 해당 이미지 형식으로 변환한 뒤 복사하거나 다운로드할 수 있다. 문서에 포함된 도형을 이미지가 필요한 다른 채널로 옮길 때 유용하다.

2026년 8월 16일 추가된 MP4 탭은 애니메이션 SVG를 브라우저에서 동영상으로 변환한다. 애니메이션이 감지되면 이 탭이 나타나며, 프레임을 초당 30장으로 캡처한 뒤 ffmpeg.wasm을 사용해 H.264 MP4를 생성한다. 약 31MB인 관련 구성 요소는 MP4 탭을 처음 열 때만 불러오고, 변환 길이는 최대 30초로 제한된다.³

브라우저 안에서 변환이 끝난다는 점은 빠른 공유에 유리하지만, 처리 속도와 메모리 사용량은 기기 성능에 영향을 받는다. 따라서 MP4 내보내기는 짧은 애니메이션을 검토하거나 공유용 결과물을 만드는 작업에 특히 적합하다.

요약: markdown-svg-renderer는 Markdown 안의 SVG 코드와 렌더링 결과를 함께 검토하고, URL로 문서를 다시 불러오며, 결과물을 PNG, JPEG, MP4로 내보낼 수 있게 한다. 실제 적용 전에는 CORS 지원 여부, URL 재현 방식, iframe과 CSP를 통한 격리, 브라우저 변환 비용을 함께 확인하는 것이 좋다.

¹markdown-svg-renderer · simonw/tools@71e4944 · GitHub

²Fix bugs caused by SVG sanitization, use CSP instead · simonw/tools@78fca0e · GitHub

³Add MP4 export for animated SVGs using ffmpeg.wasm (#314) · simonw/tools@73e0327 · GitHub