▲

SVG만 있으면 충분하다

 (jon.recoil.org)
1P by GN⁺ 2일전 | ★ favorite | 댓글 1개
  • 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는 연구 결과의 손쉬운 공유와 재조합을 지원하는 도구로 추가됨
  • 이러한 도구들은 협업과 재현 가능한 연구 환경 구축을 위한 지속적 시도의 일부임
▲
GN⁺ 2일전  [-]
Hacker News 의견들
  • 시각화 이야기가 주된 주제이지만, 예전에 무용 안무 소프트웨어를 만든 적이 있음
    UI 전체를 SVG로 렌더링했는데, 생각보다 훌륭하게 작동했음
    프로젝트 이름은 StageKeep이며, 원래는 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, SVG11 Fonts
    • Safari에서는 <style> 내 @font-face로 base64 인코딩된 폰트를 임베드할 수 있음
      하지만 파일 크기가 커져서 추천하지 않음
    • 텍스트를 곡선으로 변환하면 선택 불가 문제가 생김
      Safari에서는 <text> 요소로 선택이 가능하므로, 어느 쪽이든 완전한 해결책은 아님
  • 과학 논문이 인터랙티브 환경과 함께 제공되어, 독자가 데이터를 직접 조작하고 실험을 재현할 수 있는 비전을 좋아함
    NVIDIA의 Illustrated Evo2 블로그도 인상 깊었음
    • 동료들이 낸 CloudSpecs 논문이 떠오름
      모든 그림이 웹사이트와 연결되어, DuckDB + WebR + ggplot으로 브라우저에서 재현 가능함
      예시: Figure 1 데모
    • 실험을 브라우저에서 다시 실행하는 건 모델링 기반 연구에서나 가능할 듯함
      하지만 데이터를 다양한 시각으로 탐색할 수 있게 하는 건 흥미로운 아이디어임
    • 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이 인상 깊었음
    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 안에 체스 엔진을 내장해 자동으로 두게 만든 적이 있음
      프로젝트 링크
      친구의 예술 설치물에서 수십 개의 체스 SVG를 동시에 투사했는데, 브라우저가 버티는 한계가 꽤 낮았음
    • 나도 SVG+JS로 지도 뷰어를 만들어 게임에 썼는데, 객체 밀도가 높아지면 너무 느려져서 결국 canvas로 바꿨음
      다만 그 과정에서 SVG의 일부 기능을 잃었음
  • 3D용 SVG와 비슷한 경량 포맷이 있는지 궁금함
    CAD 모델을 시각화할 때, 전체 .step 파일을 내보내지 않고 부분 변경만 반영할 수 있는 방법을 찾고 있음
  • 예전에 Shapeoko v2 CNC 조립 설명서를 만들 때, 사용자가 부품을 클릭하면 도면의 해당 부품이 강조 표시되도록 SVG를 사용했음
    예시 링크
    Inkscape로 제작했으며, 브라우저에서 바로 작동했음
    • 정말 멋진 구현임
답변달기