HTML - 비트맵 그래픽 vs 벡터 그래픽

비트맵 그래픽

비트맵 그래픽은 특정 색상 값을 갖는 점(픽셀)의 배열로 이미지를 표현하는 방식이다. 대표적인 비트맵 그래픽인 jpeg, gif, png 형식의 이미지 파일을 확대하다보면 아래의 그림 좌측과 같이 이미지가 손상되는 현상이 발생한다. 비트맵 그래픽은 고정된 크기의 틀에 픽셀이라는 단위로 점을 찍어서 이미지를 표현하기 때문에 원본 크기보다 이미지를 확대하면 이미지가 손상되는 결과가 발생한다. 그러나 비트맵 그래픽은 단순히 데이터의 배열로써 이미지를 표현하기 때문에 컴퓨터가 연산하기 용이하다. 따라서, 비트맵 그래픽은 하드웨어의 자원을 적게 소모하는 장점이 있다.

벡터 그래픽

벡터 그래픽은 픽셀의 배열로 이미지를 표현하는 것이 아니라 실제로 이미지에 표현되는 점에 대한 정보를 저장하여 이미지를 표현한다. 두 개의 점에 대한 정보를 갖고 있으면 선을 표현할 수 있고, 세 개 이상의 선에 대한 정보를 갖고 있으면 면을 형성할 수 있다. 벡터 그래픽은 이러한 기하학적 정보와 선의 두께, 색상, 곡률 등의 정보를 이용하여 이미지를 표현하는 방식이다.
벡터 그래픽의 가장 큰 장점으로는 해상도를 변경해도 이미지가 손상되는 현상이 발생하지 않는다는 것이다. 비트맵 그래픽은 고정된 크기에 데이터를 채워 넣어 이미지를 표현하지만, 벡터 그래픽은 이미지를 구성하는 요소들의 정보를 저장하고 있으므로 해상도를 변경해도 이미지를 다시 구성하면 되기 때문이다. 또한, 벡터 그래픽은 이미지 자체의 정보가 아니라 이미지를 구성하는 요소들의 정보를 저장하고 있으므로 이미지의 크기가 변경되어도 내용이 같으면 데이터의 양은 변함이 없다.
그러나 무조건 벡터 그래픽이 비트맵 그래픽보다 좋은 것은 아니다. 만약 이미지가 복잡한 경우, 벡터 그래픽은 복잡한 이미지를 표현하기 위해 막대한 양의 정보가 필요하기 때문에 오히려 비트맵 그래픽보다 훨씬 많은 저장 용량을 필요로 한다. 또한 일부 필터는 벡터 그래픽 포맷을 지원하지 않는다는 단점도 존재한다. 따라서, 디자인 작업 시에 먼저 생성하려는 이미지가 벡터 그래픽에 적합한지를 고려해볼 필요가 있다.

 

SVG

SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)에 의해 개발된 표준 벡터 그래픽 파일 형식이다. W3C에서 작성한 SVG에 대한 표준 문서를 참조하면 더 자세한 정보를 얻을 수 있다. 2016년을 기준으로 현재 마이크로소프트 익스플로러 8 이전 버전을 제외한 Chrome, Firefox, Safari 등과 같은 대부분 주요 웹 브라우저에서 SVG를 지원한다. 특히 근래에는 스마트폰, 태블릿뿐만 아니라 모니터의 크기 또한 다양해져 해상도의 제약이 없는 SVG 기반 이미지를 지원하는 브라우저가 증가하고 있다.

 

HTML5와 SVG

HTML5에서는 svg 태그를 이용하여 벡터 그래픽을 구현하며 경로, 사각형, 원, 글자, 이미지를 그리기 위한 메소드를 제공한다. 브라우저별 SVG 지원여부는 아래와 같다

 

 

<svg width="400" height="200">
  <polyline points="10,10 20,25 25,30 300,150"
  style="fill:none; stroke:#000000; stroke-width:2" />
</svg>

HTML5에서 제공하는 태그를 이용하여 벡터 그래픽으로 구성된 polyline을 그리는 코드이다.

자바스크립트와 SVG

자바스크립트를 이용하면 HTML5의 svg 태그에 접근하여 동적으로 벡터 그래픽을 생성할 수 있다. 아래의 코드는 자바스크립트를 이용하여 벡터 그래픽으로 구성된 polyline을 동적으로 생성하는 코드이다.

<svg id="svg" width="400" height="200"></svg>

<script type="text/javascript">
    window.onload = function () {
        var polyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');

        polyline.setAttribute('points', '10,10 50,35 80,150 200,120');
        polyline.setAttribute('style', 'fill:none; stroke-width:2; stroke:#6799FF;');

        document.getElementById('svg').appendChild(polyline);
    }
</script>