D3.js에서 svg 사용하기

SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML-based image format

왜 SVG인가?

SVG를 사용하는 것은

• SVG기반의 전문 그래픽 프로그램에서 나온 산출물을 그대로 활용할 수 있다
• 검색화, 목록화, 스크립트화가 가능하고, 필요하면 압축도 가능하다
• 확대/축소시 퍼짐 현상이 없고 품질의 손상이 없다

D3에서 SVG를 사용하는 것은

• 브라우저에 상관없이 일관적이다  (div 등의 html 엘리먼트로 차트 또는 그래프를 그릴 경우 투박하고 브라우저에 따라 불일치할 수 있음)
• 믿을만 하다
• 빠르다

Canvas와 SVG의 비교.

Canvas	SVG
비트맵 그래픽을 표현 해상도에 의존 이벤트 핸들러에 대한 지원 없음 텍스트 렌더링 기능 미약 canvas 확대 보기 한 경우	XML 형식의 그래픽을 표현 해상도에 독립적 이벤트 핸들러에 대한 지원 각 그려진 shape은 객체로 기억 svg 확대 보기 한 경우

Sites.

가능한 브라우저 정보 (거의 모든 최신 브라우저에서 사용 가능함)

How to use.

index.html

<svg width="500" height="50"> </svg>

SVG 핵심

#top-left : (0,0)을 시작점으로 px, em, pt, in, cm, mm가 사용된다

(x,y)라고 할 때 x는 오른쪽으로 증가하며 y는 아래로 증가한다

svg top-left

값이 증가하는 방향으로 그래프가 그려지기 때문에 bar graph를 그리더라도 bar의 높이height에서 부터 x축까지 그려야 한다. transition도 마찬가지이다.

#Simple Shape : 기본 도형 및 텍스트

index.html

<rect x="0" y="0" width="500" height="50"/> <circle cx="250" cy="25" r="25"/> <ellipse cx="250" cy="25" rx="100" ry="25"/> <line x1="0" y1="0" x2="500" y2="50" stroke="black"/> <text x="250" y="25">Easy-peasy</text> <text x="250" y="25" font-family="sans-serif" font-size="25" fill="gray">Easy-peasy</text>

#styling : 스타일링

SVG styling

• fill - 채우기 컬러 값, named colors:orange, hex 값: #3388aa, RGB 값: rgb(10,150,20), RGB with alpha transparency: rgba(10,150,20,0.5)
• stroke - 선 컬러 값
• stroke-width - 선 굵기(pixel)
• opacity - 0~1 투명도
• font-family - 폰트 명
• font-size - 폰트 크기

index.html

<svg>     <circle cx="25" cy="25" r="22" class="pumpkin"></circle> </svg>

style.css

svg .pumpkin{     fill: yellow;     stroke: orange;     stroke-width: 5; }