# SVG만 있으면 충분하다

> Clean Markdown view of GeekNews topic #25033. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25033](https://news.hada.io/topic?id=25033)
- GeekNews Markdown: [https://news.hada.io/topic/25033.md](https://news.hada.io/topic/25033.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-13T05:33:10+09:00
- Updated: 2025-12-13T05:33:10+09:00
- Original source: [jon.recoil.org](https://jon.recoil.org/blog/2025/12/an-svg-is-all-you-need.html)
- Points: 2
- Comments: 1

## Topic Body

- **SVG**는 단순한 XML 기반의 벡터 그래픽 형식으로, 거의 모든 플랫폼에서 지원되고 **스크립트를 내장해 상호작용형 시각화**를 구현할 수 있음  
- 과거 **균사체 네트워크 연구**에서 제작된 SVG 시각화 도구가 20년이 지난 지금도 최신 브라우저에서 완벽히 작동함을 통해 **형식의 내구성**이 입증됨  
- 하나의 **자급자족형 SVG 파일**만으로 데이터 로딩, 처리, 시각화, 인터랙션을 모두 클라이언트 측에서 수행 가능  
- **Anil의 ‘네 가지 P’(Permanence, Provenance, Permission, Placement)** 개념과의 연계 속에서 SVG의 지속성, 버전 관리 호환성, 권한 분리, 공간적 표현력을 강조  
- 현대 브라우저의 연산 능력 향상으로 **데이터 분석 파이프라인 전체를 SVG 내에서 구현할 수 있는 가능성**이 열렸으며, 이는 연구 공유와 재현성을 높이는 도구로 중요함  

---

### SVG의 잠재력과 과학 출판의 이상
- **SVG**는 간단한 XML 포맷의 벡터 그래픽으로, 모든 기기에서 선명하게 표시되고 **스크립트를 내장해 상호작용형 콘텐츠** 제작 가능  
  - 대부분의 사용자가 인식하지 못한 **강력한 기능**을 지니며, 이를 더 적극적으로 활용할 수 있음  
- **과학 논문**이 데이터 탐색과 실험 재현을 지원하는 **완전한 인터랙티브 환경**을 제공해야 한다는 이상을 제시  
  - 일부 실험은 비용과 시간 제약으로 즉시 재현이 어렵지만, **컴퓨터 과학 분야 논문**에서는 충분히 실현 가능  

### 20년 전 SVG 시각화 도구의 재발견
- 케임브리지 식물과학과 박사후 연구 시절, **균사체 네트워크의 시너지 연구**를 위해 SVG 기반 시각화 도구를 제작  
  - 실제 페트리 접시에서 성장한 균사체 네트워크 데이터를 탐색할 수 있도록 설계  
- 최근 해당 SVG를 다시 실행해본 결과, **Firefox 1.5나 Adobe SVG 플러그인을 요구하던 시절의 코드가 최신 브라우저에서도 완벽히 작동**  
  - 이는 SVG 포맷의 **장기적 호환성과 안정성**을 보여주는 사례  

### 완전 자급형 SVG의 구조
- 하나의 **SVG 파일**만으로 데이터 로딩, 처리, 시각화, 인터랙션을 모두 수행 가능  
  - 데이터는 외부 버전 저장소에서 가져오거나 파일 내부에 직접 포함 가능  
  - 모든 연산이 **클라이언트 측 브라우저**에서 실행되며, **서버 측 로직이 불필요**  
  - 정적 웹 서버에서 손쉽게 배포 및 공유 가능  

### Anil의 ‘네 가지 P’와의 연계
- **Permanence(영속성)** : SVG는 논문이나 데이터셋처럼 **DOI 부여 가능**, 20년 전 제작된 파일이 여전히 작동함이 이를 입증  
- **Provenance(출처 추적)** : SVG는 **텍스트 기반**이므로 Git 등 버전 관리 시스템과 호환되며, 외부 데이터 사용 시 동일한 추적 전략 적용 가능  
- **Permission(권한 관리)** : 데이터와 처리 로직이 분리되어 있어, 일반 데이터와 동일한 **권한 모델** 적용 가능  
- **Placement(공간성)** : SVG는 **본질적으로 공간적 표현**을 지니며, 예시로 **세계 지도 시각화** 제작이 용이함  

### 브라우저 연산력 향상과 새로운 가능성
- 20년 전 제작된 SVG는 단순 시각화 도구였지만, **현대 브라우저의 연산 능력 향상**으로 이제는 **전체 데이터 분석 파이프라인**을 SVG 내부에서 구현 가능  
  - 노트북 팬이 돌지 않을 정도의 가벼운 연산으로도 충분히 처리 가능  

### 연구 공유 생태계 속의 SVG
- **Jupyter 노트북**, **Marimo botebooks**, **slipshow/x-ocaml 조합**, **Forester**, **개인 노트북 프로젝트** 등과 함께  
  - SVG는 **연구 결과의 손쉬운 공유와 재조합을 지원하는 도구**로 추가됨  
- 이러한 도구들은 **협업과 재현 가능한 연구 환경 구축**을 위한 지속적 시도의 일부임

## Comments



### Comment 47657

- Author: neo
- Created: 2025-12-13T05:33:10+09:00
- Points: 1

###### [Hacker News 의견들](https://news.ycombinator.com/item?id=46235959) 
- 시각화 이야기가 주된 주제이지만, 예전에 **무용 안무 소프트웨어**를 만든 적이 있음  
  UI 전체를 SVG로 렌더링했는데, 생각보다 훌륭하게 작동했음  
  프로젝트 이름은 [StageKeep](https://stagekeep.com/)이며, 원래는 React Three Fiber로 만들었다가 SVG로 리팩터링했음  
  **Signed Distance Function** 개념에서 영감을 받았고, 입력을 받아 SVG를 출력하는 **원자적 함수** 아이디어가 마음에 들었음
  - 예전에 SVG가 **Flash 대체재**로 주목받았던 시절이 있었음  
    SVG + CSS + JavaScript로 Flash로 하던 거의 모든 걸 구현할 수 있었지만, Flash처럼 좋은 **저작 도구**가 없었음  
    결국 Flash는 사라졌고, 그 자리를 완전히 대체한 것은 없음
  - 사이트 하단에 “Start free tiral”이라고 되어 있던데, 아마 “trial”의 오타 같음 :)
  - 무대 연출가로서 안무를 다루는데, 이런 도구로 **무대 동선**을 미리 계획할 수 있다면 정말 멋질 것 같음
  - 정말 멋진 프로젝트임. 혹시 **AI로 영상에서 안무를 자동 추출**하는 기능도 가능할까 궁금함  
    예를 들어 Project21이나 Avantgardey 영상에서 안무를 분석해 가져오는 식으로 말임
  - 혹시 직접 춤을 추는 사람인지 궁금함
- SVG의 단점들을 정리해봤음  
  - **텍스트 줄바꿈 불가**  
  - **폰트 글리프 임베드 불가** — 사용자의 폰트가 없으면 읽을 수 없음  
  - 브라우저마다 지원 버전과 기능이 다름  
  - JS나 외부 리소스가 포함될 수 있어 **보안 격리 환경**에서 보기 어려움  
  해결책으로는 Inkscape용 원본 SVG와, 텍스트를 곡선으로 변환한 **배포용 SVG** 두 버전을 두는 방법이 있음
  - 다른 문제들도 많음  
    브라우저마다 렌더링이 달라 일관된 결과를 얻기 어렵고, 복잡한 SVG는 **메모리 누수**나 **렌더링 속도 저하**가 심함  
    Inkscape 외엔 리눅스에서 쓸만한 편집기도 거의 없음  
    그럼에도 불구하고 대안이 없어서 여전히 SVG를 쓰지만, 가능한 한 단순하게 유지하려고 함
  - `<foreignObject>`로 HTML을 임베드하면 **텍스트 줄바꿈**이 가능하긴 함  
    SVG 2에서는 `inline-size` 속성으로 해결 예정임  
    폰트 임베드는 `<font>` 요소나 **WOFF**를 data URI로 포함하는 방식이 이미 존재함  
    하지만 텍스트 기준선이나 스케일링 제어 같은 부분은 여전히 **불완전한 사양**임  
    관련 문서: [SVG2 InlineSizeProperty](https://www.w3.org/TR/SVG2/text.html#InlineSizeProperty), [SVG11 Fonts](https://www.w3.org/TR/SVG11/fonts.html)
  - Safari에서는 `<style>` 내 `@font-face`로 **base64 인코딩된 폰트**를 임베드할 수 있음  
    하지만 파일 크기가 커져서 추천하지 않음
  - 텍스트를 곡선으로 변환하면 **선택 불가** 문제가 생김  
    Safari에서는 `<text>` 요소로 선택이 가능하므로, 어느 쪽이든 완전한 해결책은 아님
- 과학 논문이 **인터랙티브 환경**과 함께 제공되어, 독자가 데이터를 직접 조작하고 실험을 재현할 수 있는 비전을 좋아함  
  NVIDIA의 [Illustrated Evo2 블로그](https://research.nvidia.com/labs/dbr/blog/illustrated-evo2/)도 인상 깊었음
  - 동료들이 낸 [CloudSpecs 논문](https://www.cs.cit.tum.de/fileadmin/w00cfj/dis/papers/cloudspecs-final.pdf)이 떠오름  
    모든 그림이 웹사이트와 연결되어, **DuckDB + WebR + ggplot**으로 브라우저에서 재현 가능함  
    예시: [Figure 1 데모](https://tum-dis.github.io/cloudspecs/?state=N4IgzgjgNgigrgUw...)
  - 실험을 브라우저에서 다시 실행하는 건 **모델링 기반 연구**에서나 가능할 듯함  
    하지만 데이터를 다양한 시각으로 탐색할 수 있게 하는 건 흥미로운 아이디어임
  - SVG 대신 쓸 포맷이 마땅치 않음  
    PDF는 인터랙티브 기능이 제한적이고, Word나 PDF 모두 **멀티미디어 내장**에 약함
  - GIF나 동영상만이라도 삽입할 수 있으면 큰 가치가 있을 것 같음
  - SVG는 복잡한 렌더링에 시간이 걸려 **인터랙티브성과는 잘 안 맞음**  
    벡터 그래픽만 필요하다면 PostScript도 대안이 될 수 있음
- 2년 전 “Spurious Correlations” 프로젝트를 리뉴얼하면서 **Python으로 직접 SVG 차트 생성기**를 만들었음  
  기존 JS/PHP 차트 도구(pCharts, HighCharts 등)가 마음에 안 들어서 직접 구현했는데, 의외로 잘 작동했음  
  수학만으로 깔끔한 SVG를 만들 수 있고, **무한 확장성**은 덤이었음
  - JS 차트 프레임워크를 찾는다면 **Observable Plot**을 추천함  
    D3 제작자가 만든 도구로, 간결하고 **API 사용성**이 뛰어남  
    애니메이션은 없지만 논문용 차트엔 충분함
  - Postscript가 더 널리 쓰이지 못한 게 아쉬움  
    다른 세계선에서는 HTML이나 SVG 대신 Postscript가 표준이 되었을지도 모름
  - 사이트 덕분에 통계 수업 첫날에 **잘못된 상관관계 예시**로 활용했음
  - “직접 만들면 망한다”는 두려움을 업계가 버려야 한다고 생각함
- Distill의 첫 번째 논문 [Augmented RNNs](https://distill.pub/2016/augmented-rnns/)이 인상 깊었음  
  **SVG 위에 D3.js로 최소한의 인터랙션**을 얹은 사례로, Shan Carter의 스타일을 처음 보고 그의 팀에 합류하고 싶어졌음
- 15년 전 **바비큐 컨트롤러**를 만들었는데, 온도 센서 4개와 PID 제어 알고리즘을 사용했음  
  내장 HTTP 서버를 통해 **SVG 기반 웹 UI**로 온도 그래프와 다이얼을 표시했는데, JS와 함께 잘 작동했음
  - 정말 멋진 프로젝트임. 혹시 작동 영상을 찍어둔 적이 있는지 궁금함
- 글쓴이로서, 이번에 글을 수정하며 강조하고 싶은 점은 **20년 된 SVG가 여전히 작동한다는 사실**임  
  그 시절에 쓴 다른 코드는 대부분 고쳐야 하지만, SVG는 그대로임
  - 초창기엔 브라우저 간 **SVG 호환성**이 낮아서 쓰기 어려웠지만,  
    지금은 20년 전 SVG도 대부분의 브라우저에서 문제없이 작동함
- SVG를 좋아하지만, **속도 문제**는 여전히 있음  
  QR 코드나 복잡한 지도처럼 DOM 요소가 100개 이상이면 느려지고, 애니메이션도 canvas나 Lottie보다 느림
  - 체스판 SVG 안에 **체스 엔진을 내장**해 자동으로 두게 만든 적이 있음  
    [프로젝트 링크](https://github.com/jnykopp/svg-embedded-chess)  
    친구의 예술 설치물에서 수십 개의 체스 SVG를 동시에 투사했는데, 브라우저가 버티는 한계가 꽤 낮았음
  - 나도 **SVG+JS로 지도 뷰어**를 만들어 게임에 썼는데, 객체 밀도가 높아지면 너무 느려져서 결국 canvas로 바꿨음  
    다만 그 과정에서 SVG의 일부 기능을 잃었음
- **3D용 SVG와 비슷한 경량 포맷**이 있는지 궁금함  
  CAD 모델을 시각화할 때, 전체 .step 파일을 내보내지 않고 **부분 변경만 반영**할 수 있는 방법을 찾고 있음
- 예전에 **Shapeoko v2 CNC 조립 설명서**를 만들 때, 사용자가 부품을 클릭하면 **도면의 해당 부품이 강조 표시**되도록 SVG를 사용했음  
  [예시 링크](https://github.com/shapeoko/Docs/blob/gh-pages/content/tPictures/PS20028-100.svg)  
  Inkscape로 제작했으며, 브라우저에서 바로 작동했음
  - 정말 멋진 구현임