앞서
흔히 보게 되는 jpg png gif BMP와 같은 것들은 이미지를 디지털 공간에 표현하기 위해 사용하는 확장자로 이를 이미지 파일 형식(image file format) 라고 한다. 이들은 용량과 화질, 색상 표현의 다양성, 압축방식, 호환성 등 제 각각의 특성을 가지고 있다. 그렇기 때문에 같은 이미지임에도 표현된 파일형식에 따라 차이가 발생한다.
SVG(Scalable Vector Graphics)란?
사전적 정의
SVG 는 W3C(?) 가 개발한 개방형 표준으로, 2차원 벡터 그래픽의 표현을 위한 XML(?) 마크업 언어 이다. 웹 등에서 스크립트가 가능한 다목적 벡터 포맷의 필요를 위해 제작된 것으로, W3C 표준인
CSS,DOM,SMIL과 호환된다. 확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며 용량이PNG,GIF보다 적다. 중첩된 경로, 알파 마스크, 애니메이션, 다양한 그래픽 명령어, 하이퍼링크 등의 기능을 지원한다. SVG 파일형식은 어도비 일러스트레이터 등의 벡터 드로잉 프로그램이나 메모장, 문서 편집기 등에서도 작업할 수 있다.
- W3C : 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직
- XML(Extensible Markup Language) : W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어
역시 "사전"적 정의 답게 생소한 단어가 많아 이해하기가 힘들다.
레스터(Raster) 와 벡터 (Vector)
레스터 방식으로 표현으로 표현하는 JPG, PNG, GIF, BMP 와 달리
SVG 는 벡터화된 그래픽 이미지 이다.
레스터? 벡터? 는 무엇이며 둘의 차이에 대해 알아보자.
레스터(Raster) 방식이란?
레스터 방식은 이미지의 모양과 색을 색상정보가 담긴 픽셀(pixel) 로 표현하는 방식이다. (.jpg / .png / .gif)
특징
- 각각의 픽셀에 색을 입히고, 그 작은 픽셀을 하나로 모아서 그림과 선을 표현한다.
- 픽셀을 이용하는 만큼 자연스러운 이미지를 표현할 수 있지만 확대할 경우
그림이 모자이크처럼 깨져보이는 현상(계단식현상)이 나타난다. - 픽셀의 수가 많아질 수록 파일의 크기가 커진다.
벡터(Vector) 란?
수학적 함수를 이용하여 도형이나 선을 그려서 표현하는 방식이다. (.svg)
특징
- 확대를 하더라도 계단식 현상이 일어나지 않고 선명함 을 유지하고, 이로 인해 CI, BI 로고 및 홍보물,인쇄물 을 표현하는데 적절하다.
- 레스터 방식에 비해 용량이 적은 편 이다.
- 반면, 색상의 자연스러운 변화 나 세밀한 표현 이 어렵다.
- 색 표현의 한계 가 있고 수학적 계산이 필요하기 때문에 이미지가 복잡할수록 로딩 시간 이 오래 걸린다.
