웹개발 및 적용을 위해 PNG 파일과 SVG 파일의 차이를 인식해야한다. 먼저 PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다. PNG 는 화소(pixel) 단위로 구성되는 형태로써, '비트맵' 방식이라고 불린다. 반면, SVG 는 수학을 기반으로 하는 점, 직선, 곡선과 같은 형태로 구성하는 '벡터' 방식이다.
- png, jpeg, gif - 래스터 이미지(Raster Image), 비트맵
- svg - 벡터 이미지(Vector Image), 벡터
비트맵과 벡터는 다음과 같은 이미지를 통해 차이점을 알 수 있다.
주요 지원 그래픽 툴을 빗대어 설명하자면, 벡터 방식은 '일러스트레이터'이고, 비트맵 방식은 '포토샵'을 예로 들 수 있다.
왼쪽 - 벡터 VS 오른쪽 - 비트맵
웹 개발 시 SVG 의 가장 큰 장점은 HTML, CSS, JAVASCRIPT 와 함께 동작할 수 있다는 것이다. 이 의미는 SVG 파일을 편집기를 통해 확인하거나, SVG 태그를 사용해보면 알 수 있다.
아래는 svg 태그를 활용해 HTML 에 임베디드한 코드로써, 이미지를 그려주는 예제가 된다.
<svg class="a" viewBox="0 0 24 24"> <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg>
별도 파일이 존재하지 않아도 이미지를 나타낼 수 있다. .svg 파일 로 포맷된 이미지 파일도 XML로 작성되어, 확인해보면 위와 같은 형태로 존재하는 것을 볼 수 있다. 이를 통해서 수정, 추가, 애니메이션 등 원하는 작업을 동적으로 할 수 있다.
또 하나의 장점으로 이미지가 깨지지 않는다.
PNG 파일은 원래의 크기보다 크게 보여지게 할 경우 이미지가 깨진다는 것을 알고 있다.
하지만 벡터 방식으로써, SVG 파일은 깨질 경우가 없다. 그로인해, hover effect 와 같이 크기 변화가 필요한 아이콘에 사용할 수 있다.
See the Pen SVG vs PNG by leejunghyun (@mygumi) on CodePen.
PNG의 경우에는 원래의 크기보다 크게 표현할 경우, 깨지기 때문에 크기를 늘려야된다. 그로인해, 최악의 경우에는 크기를 늘리거나, 여러 개의 이미지 파일이 존재할 수 있다. 색 표현에 있어서도, 여러 개의 이미지 파일을 대비해놓는 경우가 발생할 수 있다. 그에 반해, SVG 는 그럴 필요가 없어보인다.
이렇게만 보면, PNG 보다는 SVG 만을 사용하는 것이 더 나은 것 같은데 왜 PNG가 더 익숙할까?
가장 큰 이유는 바로 SVG 는 IE8 이하에서는 지원되지 않기 때문이다.
그렇다면 IE8 이하를 신경쓰지 않는다면, SVG 만 사용해도 되는것인가?
그렇지도 않다. SVG 의 경우는 수학적 계산 능력을 요구한다. 단순한 이미지는 신경쓰지 않아도 되지만, 복잡해질수록 크기가 커지거나 속도 저하를 초래한다. 또한 SVG 로 표현하기 어려운 이미지들도 많이 존재한다. 그렇기에, SVG 는 로고 또는 단순화된 이미지에 많이 활용한다.
