Chapter 3. SVG의 기본


SVG란 무엇인가?

SVG는 Scalable Vector Graphics의 줄임말로, 마크업 언어를 가지고 벡터 기반의 그래픽을 표현한다.

마크업 언어라고 하면 HTML이나 XML을 떠올릴 수 있다. SVG는 XML의 한 종류이기 때문에 XML의 문법을 그대로 이용할 수 있다.

D3에서는 보통 SVG를 통해 그래프를 구현하게 된다. D3에는 그래픽을 직접 그리는 기능이 없지만, HTML 페이지에 생성되는 SVG를 조작해서 다양한 표현을 하게 된다.


벡터 vs 비트맵

SVG는 벡터를 기반으로 그래프를 그린다.

  • 벡터 기반의 그래픽은 각 요소의 좌표를 조합하여 그림을 그리게 된다.
  • 작은 데이터로도 도형을 그릴 수 있으며, 해상도가 바뀌거나 도형을 확대하더라도 선이 깨끗하게 표시되는 장점이 있다.
  • 복잡한 도형은 계산해야 하는 좌표의 수가 많아서 처리하는데 시간이 많이 걸릴 수 있다.

벡터 기반의 그래픽과 반대되는 개념은 비트맵 (책에서는 픽셀 이라고 표시하고 있습니다. 래스터 raster 라는 표현도 많이 씁니다.) 기반의 그래픽이 있다.

  • 복잡한 이미지를 효율적으로 보여줄 수 있다.
  • 이미지를 편집하는 과정에서 손실이 많이 발생할 수 있다.
  • 특히 확대할 경우 아래 그림처럼 계단 현상이 발생한다.

벡터와 비트맵에 대해서 자세히 알고싶다면 스포카 기술 블로그에 정리된 글을 읽어보자.



SVG 사용해보기

SVG에는 다양한 요소들이 존재한다. 일단은 자주 사용하게 될 사각형, 원, 텍스트, 그룹 네 가지 요소의 사용법에 대해서 알아보자.

사각형과 원 그리기

jupyter의 기능을 이용해서 SVG 포맷의 간단한 도형을 그려보자.

사각형을 그릴 수 있는 rect 요소의 경우 다음과 같은 속성을 필요로 한다. SVG에서 좌표의 원점은 좌측 상단이기 때문에 x, y 속성을 지정하지 않을 경우 이미지 좌측 최상단을 기준으로 시작된다는 것을 조심하자.

속성 설명
x X 좌표 (기본값은 0)
y Y 좌표 (기본값은 0)
width 너비
height 높이
rx 좌우 방향의 둥근 모서리 반지름
ry 위아래 방향의 둥근 모서리 반지름

원을 그리는 circle 요소의 경우에는 다음과 같은 속성을 필요로 한다.

속성 설명
cx 원의 중심 X 좌표 (기본값 0)
cy 원의 중심 Y 좌표 (기본값 0)
r 원의 반지름
In [16]:
%%html # jupyter에서 HTML 문법을 바로 사용하기 위한 magic command

<svg width="320px" height="240px">
    <rect x="10" y="20" width="180" height="160" />
    <circle cx="190" cy="140" r="80" />
</svg>

SVG도 CSS를 이용해 스타일을 지정할 수 있다. CSS를 이용해 스타일링 할 경우, 코드와 디자인을 분리하는 데 도움이 된다

In [14]:
%%html 

<style>
    svg#sample-01 { /* 이미지 전체에 대한 스타일 설정 */
        width: 320px;
        height: 240px;
    }

    svg#sample-01 rect { /* 사각형에 대한 스타일 설정 */
        stroke: steelblue;
        stroke-width: 4px;
        fill: teal;
    }

    svg#sample-01 circle { /* 원에 대한 스타일 설정 */
        stroke: black;
        stroke-width: 4px;
        fill: yellow;
        opacity: 0.5; 
    }
</style>

<svg id="sample-01">
    <rect x="10" y="20" width="180" height="160" />
    <circle cx="190" cy="140" r="80" />
</svg>

문자 그리기

text 요소를 사용하면 문자를 그릴 수 있다. 자세한 옵션에 대해서는 책을 참고하자.

속성 설명
x X 좌표
y Y 좌표
font-family 글꼴
font-size 글자 크기
font-weight 글자 굵기 (100~900 또는 normal, bold 등)
text-anchor 글자를 표시하는 기준 위치를 지정 (start: 왼쪽, middle: 가운데, end: 오른쪽 맞춤)
In [23]:
%%html

<svg width="200px" height="100px">
    <text x="100" y="20">SVG 텍스트</text>
    <text x="100" y="50" text-anchor="middle">SVG 텍스트</text>
    <text x="100" y="80" text-anchor="end">SVG 텍스트</text>
</svg>
SVG 텍스트 SVG 텍스트 SVG 텍스트

도형 그룹 만들기

여러 개의 요소들을 한꺼번에 다룰 때는 그룹으로 지정하는 것이 좋다. 파워포인트로 프레젠테이션 만들 때 쓰는 객체 그룹과 비슷한 개념이다.

도형을 그룹으로 다루게 되면 1. 스타일을 한 번에 처리할 수 있고, 2. 위치변화, 회전 등을 적용하기 편해진다

In [33]:
%%html

<svg width="400px" height="250px">
    <g transform="rotate(45, 100, 0)">
        <rect x="200" y="10" width="100" height="80" />
        <text x="200" y="0">group</text>
    </g>
</svg>
group