• SVG 는 언제 써야하는가? :: 마이구미
    웹 관련 2018. 1. 14. 22:13
    반응형

    이 글은 이미지 파일 포맷 방식인 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.


    반응형

    댓글

Designed by Tistory.