SVG 는 언제 써야하는가? :: 마이구미

이 글은 이미지 파일 포맷 방식인 PNG 와 SVG를 비교하면서 SVG 를 알아가는 글이 된다.

개발 시 이미지 파일은 대부분 .png를 사용하고 있어, .svg 를 모르는 경우도 많이 존재한다.

모르더라도 크게 도움이 될 것이니 읽어보길 바란다.

참고 링크 - https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sites

svg 응용 - https://codepen.io/collection/DKaZba/

먼저 기본적인 이해를 위해 무엇인지 알아보자.

PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다.

PNG 는 화소(pixel) 단위로 구성되는 형태로써, 비트맵 방식이라고 불린다.

SVG 는 수학을 기반으로 하는 점, 직선, 곡선과 같은 형태로 구성하는 방식이다.

• png, jpeg, gif - 래스터 이미지(Raster Image), 비트맵
• svg - 벡터 이미지(Vector Image), 벡터

비트맵과 벡터는 다음과 같은 이미지를 통해 차이점을 알 수 있다.

왼쪽 - 벡터, 오른쪽 - 비트맵

툴로 설명하자면, 벡터 방식은 일러스트레이터이고, 비트맵 방식은 포토샵을 예로 들 수 있다.

웹 개발 시 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 Image by leejunghyun (@mygumi) on CodePen.

위의 예제를 통해 다음의 결과를 얻을 수 있다.

PNG의 경우에는 원래의 크기보다 크게 표현할 경우, 깨지기 때문에 크기를 늘려야된다.

그로인해, 최악의 경우에는 크기를 늘리거나, 여러 개의 이미지 파일이 존재할 수 있다.

색 표현에 있어서도, 여러 개의 이미지 파일을 대비해놓는 경우가 발생할 수 있다.

그에 반해, SVG 는 그럴 필요가 없어보인다.

이렇게만 보면, PNG 보다는 SVG 만을 사용하는 것이 더 나은 것 같은데 왜 PNG 가 더 익숙할까?

가장 큰 이유는 바로 SVG 는 IE8 이하에서는 지원되지 않기 때문이다.

그렇다면 IE8 이하를 신경쓰지 않는다면, SVG 만 사용해도 되는것인가?

그렇지도 않다.

SVG 의 경우는 수학적 계산 능력을 요구한다.

단순한 이미지는 신경쓰지 않아도 되지만, 복잡해질수록 크기가 커지거나 속도 저하를 초래한다.

또한 SVG 로 표현하기 어려운 이미지들도 많이 존재한다.

그렇기에, SVG 는 로고 또는 단순화된 이미지에 많이 활용한다.

SVG 를 안 써도 무방하지만, 사용하지 않기에는 너무나 좋은 기술이다.

절대 손해볼 일은 없을 것이다.

SVG를 활용한 하나의 예로 SNS 아이콘은 다음과 같다.

See the Pen sns icon and tooltip in svg by leejunghyun (@mygumi) on CodePen.