PNG vs. SVG

래스터 vs. 벡터

가장 근본적인 차이점은 PNG는 래스터 파일 포맷이고, SVG는 벡터 파일 포맷이라는 것입니다.

PNG는 픽셀 기반의 래스터 이미지 포맷입니다. 래스터 이미지를 너무 확대하면 입자가 거칠어지는 픽셀화 현상이 나타납니다. 또한, 이미지를 너무 축소해도 이미지가 희미해집니다. PNG가 고해상도를 지원하기는 하지만, 무한대로 확대할 수는 없습니다.

SVG는 선, 점, 도형, 알고리즘의 복잡한 수학적 조합으로 만든 벡터 기반의 파일 포맷이기 때문에 크기를 변경해도 해상도가 저하되지 않습니다.

래스터와 벡터에 대해 더 알아보기

파일 크기

PNG 파일은 고해상도를 지원하므로 파일 크기가 큽니다. 따라서 이미지를 처리, 공유, 저장, 실행하는 데 시간이 더 걸려 페이지 로딩 시간이 길어집니다. 이런 문제를 보완하기 위해 8비트 PNG 버전도 있지만 지원하는 색상이 256개에 불과합니다. 이런 이유로 온라인 사진에는 JPEG가 더 많이 사용됩니다

SVG 파일은 PNG 파일보다 훨씬 더 작으므로 컴퓨터나 웹 사이트의 속도를 저하시키지 않습니다. 세부 정보가 많은 디자인이라면 느려질 수 있습니다. SVG는 벡터 파일 포맷이므로 아무리 크기를 확대하거나 축소해도 이미지 품질이 저하되지 않습니다.

압축 방식

SVG는 해상도, 세부 정보, 품질에 아무런 영향을 주지 않으면서 더 작은 파일 크기로 압축하는 무손실 압축 방식을 사용합니다.

PNG는 5~20%정도 줄어드는 무손실 압축을 통해 파일 크기가 크다는 단점을 보완합니다. 하지만 여전히 SVG보다는 파일이 큽니다.

포토그래피.

PNG 파일은 웹 사진에 일반적으로 사용하는 포맷은 아닙니다. 그러나 세부 정보가 많은 고품질 디지털 사진의 인쇄, 편집 등에 사용할 수 있습니다. Adobe Photoshop에서 주로 이용하는 파일 포맷입니다.

반면, SVG는 픽셀 기반의 포맷이 아니므로 고품질 사진을 표현하기 어렵습니다.

웹

PNG와 SVG 파일 모두 웹 그래픽, 일러스트레이션, 로고, 인포그래픽, 표 등 복잡한 세부 사항을 표현할 수 있습니다.

하지만, SVG는 XML 프로그래밍 언어로 작성된다는 장점이 있습니다. 화면에 표시되는 SVG 파일은 모두 코드가 아닌 텍스트로 작성되기 때문에 스크린 리더와 검색 엔진이 해당 텍스트를 분석하므로 접근성과 SEO(검색 엔진 최적화) 측면에서 좋습니다.

SVG 파일은 크기가 작아 페이지에서 빠르게 로딩할 수 있습니다. 페이지 로딩 시간은 검색 엔진 순위를 높이는 데 매우 중요한 요소입니다.

PNG가 텍스트 기반의 그래픽을 지원하기는 하지만 SVG보다는 낮은 수준입니다.

호환성 및 복잡성

SVG가 PNG보다 발전된 파일 포맷이라고 하지만, 모든 브라우저와 운영 체제에서 호환되지는 않습니다. 또한, SVG의 프로그래밍 언어와 벡터 기반의 구성은 새로운 사용자에게는 익숙하지 않은 개념입니다.

반면, PNG는 표준 온라인 포맷으로 웹 브라우저와 운영 체제에서 폭넓게 지원하는 파일 포맷입니다.

애니메이션

PNG는 또 다른 래스터 기반의 이미지인 GIF와 달리 애니메이션을 지원하지 않습니다.

SVG는 애니메이션을 지원하지만, Adobe Illustrator의 기본 포맷인 AI와 같은 파일 포맷보다는 사용하기 어렵습니다.

AI 파일에 대해 더 알아보기

투명도

PNG와 SVG 모두 투명도를 조절할 수 있으므로 온라인 로고와 그래픽에 적합합니다.

PNG는 래스터 기반의 투명 파일에 가장 적합한 포맷 중 하나입니다. 픽셀과 투명도가 중요한 작업을 한다면 SVG보다는 PNG가 더 적합합니다.

1. Adobe Illustrator를 엽니다.
2. ‘파일 > 열기’를 클릭하고, 컴퓨터에서 이미지를 선택합니다.
3. ‘열기’를 클릭합니다.
4. 상단 메뉴에서 ‘추적’ 옵션을 클릭하고, ‘이미지 추적’을 선택합니다.
5. 색상 변경을 비롯해 변환을 사양에 맞게 조정합니다.
6. 변환이 완료되면 이미지를 선택하고, ‘그룹 풀기’를 클릭합니다. 그러면 색상과 모양이 분리됩니다.
7. ‘파일 > 내보내기’를 클릭합니다.
8. 파일을 SVG로 저장합니다.

1. Adobe Photoshop을 엽니다.
2. ‘파일 > 열기’를 클릭합니다.
3. 컴퓨터에서 SVG 파일을 선택합니다.
4. ‘내보내기 > 다음으로 내보내기 > PNG’를 클릭합니다.
5. 파일을 PNG로 저장합니다.