본문바로가기
시리즈 알려드려요, 깨알정보

SVG란 무엇인가

안녕하세요, 소이정입니다.

오늘은 svg에 관해 소개 드리려고 합니다.
디자인 관련 업무를 하고 계시는 분들은 익숙할 수도 있는데,
많이 접해보지 않은 분들에겐 낯선 단어일 수도 있을 것 같아요.

살짝 말씀드리자면, png나 JPG의 경우는 비트맵 기반의 이미지이지만,
SVG는 벡터 기반인 이미지인데요!

비트맵과 벡터가 무엇인지 헷갈리신다면 먼저 아래 포스팅을 확인해 주세요!

그럼 이제 svg가 무엇인지, 어떻게 사용하는지, 장단점은 무엇인지 한 번 알아볼게요!


SVG의 정의

Scalable Vector Graphics의 약자로 이미지 포맷 방식 중 하나입니다.
여기서 Scalable이라는 단어의 의미에 조금 집중을 해야 하는데요, 이미지 크기를 늘리거나 줄이더라도 화질에 영향을 받지 않는다는 의미입니다.

즉, svg파일은 이미지 크기를 아무리 조정해도 화질의 변화가 없답니다!
벡터로 이루어져 있기도 하며, xml* 문법으로 이루어진 소스이기 때문에 웹문서 안에서도 소스코드 형태로 삽입이 가능합니다.
* XML : 인터넷 웹페이지를 만드는 HTML을 획기적으로 개선하여 만든 언어이다. 홈페이지 구축 기능, 검색 기능 등이 향상되었고, 웹 페이지의 추가와 작성이 편리해졌다.


SVG의 역사

SVG는 1990년대 후반에 시작됩니다. 당시 월드 와이드 웹 컨소시엄(W3C*)에서 개발자에게 새로운 유형의 벡터 그래픽 포맷을 요청했는데 총 6개 안이 제출되었으며, W3C는 이를 기반으로 svg 포맷을 개발했다고 합니다. 국내에서도 2017년도까지는 svg를 지원하는 곳은 비교적 적었는데요. 이후 최신 웹 브라우저에서 svg의 유용성이 드러나기 시작하면서 인기를 얻기 시작했습니다. 대부분의 브라우저와 벡터 파일용 드로잉 앱에서 svg 파일을 간편하게 사용할 수 있게 되면서 2D 웹 사이트 이미지에 널리 사용되고 있습니다.
* W3C : 월드 와이드 웹 브라우저 / 서버 기술의 표준화를 추진하고 있는 교육 · 연구 기관 및 관련 회사들의 단체.


SVG의 용도

SVG의 제일 큰 사용 용도는 두 가지로 나뉘는데요.

1. 아이콘과 로고 표시
첫 번째는 웹사이트 내 아이콘과 로고를 표시할 때 제일 많이 사용합니다. 반응형 웹에 경우 화면 너비에 따라 레이아웃이 바뀌어야 하는데, 이때 품질을 저하시키지 않고 이미지 크기를 자유롭게 조정할 수 있어 다양한 위치에서 다른 크기로 표현되는 그래픽에 적합합니다.

2. 인포그래픽 및 일러스트레이션
두 번째는 인포그래픽 및 일러스트레이션에 적합합니다. SVG 파일은 XML을 사용하므로 Google과 같은 검색 엔진이 텍스트가 많은 차트와 그래프를 읽을 수 있습니다. 따라서 검색 엔진 최적화에 도움이 됩니다. Google이 svg 내의 키워드를 감지하여 웹 페이지의 검색 순위를 높일 수 있기 때문입니다. 또한 svg는 애니메이션을 지원하므로 웹 페이지를 더욱 흥미롭게 만들 수 있습니다.


SVG의 장단점

(1) 장점
픽셀로 구성된 파일과는 다르게 SVG와 같은 벡터 그래픽은 크기에 상관없이 특정 브라우저나 다양한 위치에 맞게 조정해도 품질이 유지됩니다. 
기본 SVG 파일은 많은 컬러 픽셀로 생성되는 비트맵 파일보다 파일 크기가 작습니다.
SVG 파일은 텍스트 편집기로도 직접 수정이 가능해 편집이 필요할 때 용이합니다. 또한 동적인 애니메이션도 사용이 가능합니다.

(2) 단점
SVG 파일은 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합합니다. 그러나 픽셀이 부족하므로 고품질 디지털 사진을 표현하기는 어렵습니다.
최신 브라우저만 SVG 이미지를 지원할 수 있으므로 Internet Explorer 8과 이전 브라우저에서는 SVG 파일을 사용하기가 어렵습니다.
SVG 이미지에 포함된 코드는 약간의 개발 언어를 알고 있어야 해서 SVG 파일 포맷을 처음 사용하는 경우 이해하기 힘들 수 있습니다.


알고 있으면 좋은 SVG의 특징!

(1) SVG는 저장 시 일반 png와 jpg랑은 다르게 인터넷 주소로 저장이 됩니다. 파일 찾다가 놀라지 않으셔도 된답니다! png, jpg, svg 파일별로 이렇게 다르답니다!

(2) SVG는 주요 브라우저를 사용해서 열 수 있습니다. 똑같이 인터넷 브라우저 열듯 해주시면 돼요!

(3) SVG 파일을 생성 및 편집하는 방법은 포토샵과 일러스트에서 가능한데, 포토샵은 비트맵 기반이니 일러스트를 사용해서 생성하고 편집하는 것을 더 선호한답니다.

(4) SVG 파일은 주로 웹에서 사용되긴 하지만, 원본 파일을 아무리 수정해도 화질 저하가 없기 때문에 티셔츠 등 의류 인쇄물 템플릿, CI, BI 로고 등으로도 유용하게 사용됩니다.


svg 관련 내용을 이렇게 쭉 알려드렸는데요.
이해가 잘 되셨나요 !?
결국 이미지 포맷이지만, 개발 텍스트 편집기에서도
편집이 가능한 좋은 친구라고 알고 계시면 되겠습니다.

추가로 용도에 맞추어 사용하면 더 좋겠죠 ?!

그럼 오늘도 여기까지 알려드리고,
다음에 또 오겠습니다.

감사합니다~~!!!