[TIL] Day 30. SVG 파일에 대해서

 

웹에서 사용되는 이미지는 주로 png 파일이 많아서 svg 파일에 대해 잘 모르는 경우가 많습니다. 저도 이번 프로젝트 진행 전까지는 svg 파일에 대해 잘 몰랐는데요. 오늘의 포스팅은 웹 코딩 중 자주 마주치게 되는 svg 파일에 대해 알아보도록 하겠습니다. 

 

1. svg 파일이 뭔가요?

 

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의
파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형
식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 
필요하다면 압축도 가능하다.

SVG 형식의 파일은 어도비 일러스트레이터와 같은 벡터 드로잉 프로그램을 사용하여 편집이 가능하다. 
물론 XML 형식으로 되어 있으므로 메모장과 같은 문서 편집기로도 편집이 가능하다.
From 위키백과

 

svg는 xml 언어로 주로 이미지를 그리는데 사용되는 언어입니다. svg를 이용하면 여느 png 파일을 이용하는 것과 마찬가지로 부드러운 이미지를 구현할 수 있습니다. 

 

2. png 파일과의 차이점

 

png 파일과 svg 파일은 모두 웹 상에서 그림을 표현하는데 사용되는 파일 형식이라는 것은 동일합니다. 그렇다면 두 파일간에 어떤 차이가 있기에 이렇게나 생소한 파일 형식이 존재하는 것일까요? 

 

두 파일의 근본적인 차이는 이미지를 구성하는 방식에 있다고 할 수 있습니다. png는 pixel 단위로 구성되는 형태로서 비트맵 방식이라고도 불립니다. 반면 svg는 벡터를 기반으로 한 점과 선을 이용하여 파일을 구성하게 됩니다. 

 

3. svg 파일의 특징

 

1) svg 파일은 HTML, CSS, JAVASCRIPT 와 함께 동작할 수 있다.

svg 파일은 파일 그 자체로도 존재할 수 있지만, html 코드 내에서 svg 태그로 존재할 수 있어 별도의 파일이 존재하지 않더라도 코드로 이미지를 구현할 수 있습니다(물론 그 태그 내용을 뜯어보면 어마무시한 내용들이 들어있습니다;;;). html 내에 태그로서 존재할 수 있기 때문에 css나 javascript를 활용해 다양한 효과를 주거나 함수를 활용하여 변화를 줄 수 도 있습니다. 

 

2) 이미지가 깨지지 않는다.

 

pixel 방식으로 만들어진 png 파일은 이미지가 점 하나하나로 찍어 만든 파일이기 때문에, 이미지를 크게 확대한다면 그 모습이 깨져서 나타나게 됩니다. 반면 svg 파일은 벡터방식을 활용하여 수학적으로 그래프 그리듯 만든 것이기 때문에 이미지를 아무리 확대해도 파일이 깨져보이는 현상은 나타나지 않습니다. 요즘처럼 모바일 상에서 크게 확대하는 경우가 많은 시대에 아주 좋은 특징이라고 할 수 있죠.

 

3) 파일 용량을 줄일 수 있다.

 

png 파일은 그 용량이 대체로 정해져있고 줄이려고 한다면 이미지 편집기를 통해 별도의 작업을 수행해야 합니다(그래도 용량을 줄이는데 큰 한계가 존재합니다). 하지만 svg 파일은 코드로서도 존재하기 때문에 코드 효율화를 달성한다면(ex - 불필요한 코드 삭제), 용량을 크게 줄일 수 있습니다. 웹이 하나의 앱으로서 존재함과 동시에 다양한 기능을 구사해야하는 최신 웹 환경에서는 파일의 용량을 줄이는 것이 매우 중요한 일이라고 할 수 있습니다.   

 

4. 마무리

svg파일은 분명 장점을 가지고 있는 파일 형식인 것은 맞지만, 역시나 그 자체로 완벽하진 않습니다. 그래서 보통 png 파일은 사진과 같은 파일형식에 많이 사용하고, svg 파일은 아이콘, 로고, 일러스트, 애니메이션 등에 사용되고 있습니다. 다양한 웹을 구사할줄 아는 만능 프론트엔드 개발자가 되기 위해선 svg 파일에 대해서도 잘 알고 활용할 줄 아는 능력이 필요할 것 같습니다. 

 

오늘 포스팅한 필자의 모습