카테고리 없음
SVG vs PNG
PNG
특징
- 픽셀(래스터) 기반
- 각 픽셀(작은 사각형) 하나에 색상하나의 정보가 있음
- 픽셀이 많을수록 품질이 좋음
- 래스터 이미지를 너무 확대하면 입자가 거칠어지는 픽셀화 현상이 나타남
- 이미지를 너무 축소해도 이미지가 희미해짐
- 래스터 기반으로 JPEG, GIF, PNG가 있음
- 투명도 지원
- 압축
- 무손실 압축을 사용해 이미지를 압축한다. 이미지 품질을 유지하면서 파일 크기를 줄일 수 있음
- JPEG 같은 손실 압축보다 파일 크기가 크다
- 복잡한 이미지
장점
- 5~20%정도 줄어드는 무손실 압축으로 인해 이미지 품질이 높음
- 투명도와 다양한 색상 지원
- PNG는 래스터 기반의 투명 파일에 가장 적합한 포맷 중 하나
- 픽셀과 투명도가 중요한 작업을 한다면 PNG가 적합하다
단점
- 파일 크기가 클 수 있음
- 해상도에 의존하므로, 크기를 키우면 이미지가 깨질 수 있음
SVG
특징
- 벡터 기반
- 점과 선, 곡선을 수학적으로 정의하여 이미지를 표현한다
- 이를 통해 이미지를 크기와 해상도에 관계 없이 자유롭게 확대하거나 축소 가능
- 텍스트 기반
- SVG는 XML 형식의 텍스트로 작성되므로, 파일 크기가 복잡성에 따라 달라짐
- 압축
- SVG파일은 텍스트로 작성되므로, 압축이 가능하고, 일반적으로 PNG보다 작은 크기를 가짐
- 복잡한 이미지에 비적합
- 사진처럼 복잡한 이미지보다는 아이콘, 로고, 단순한 그래픽에 적합하다
- SEO
- 구글과 같은 검색 엔진이 SVG의 XML 프로그래밍 언어를 인식하여 SEO와 웹 사이트 순위 향상에 도움을 줌
장점
- 해상도 독립적이라서 어떤 크기에도 깨지지 않고 선명하게 표시됨
- 파일 크기가 작고, 간단한 이미지를 표현할 때 효율적임
- CSS와 JS를 사용해 애니메이션 및 스타일링이 가능
단점
- 매우 복잡한 이미지를 표현하기 어렵고, 이러한 이미지를 표현하려면 파일 크기가 커질 수 있음
- 모든 브라우저에서의 호환성은 좋지만, 아주 오래된 브라우저에서느 문제가 있을 수 있음
성능 비교
성능 면에서 SVG가 더 유리한 경우
- 크기 및 해상도: SVG는 크기와 해상도에 상관없이 선명하게 렌더링되므로, 다양한 화면 크기와 해상도를 지원하는 반응형 웹 디자인에서 더 효율적입니다.
- 파일 크기: 단순한 그래픽, 아이콘, 로고 등에서는 SVG가 PNG보다 파일 크기가 작아져 로딩 속도가 빠릅니다.
- 애니메이션: SVG는 CSS와 JavaScript로 쉽게 애니메이션을 적용할 수 있습니다.
성능 면에서 PNG가 더 유리한 경우
- 복잡한 이미지: 사진, 복잡한 그래픽이나 텍스처 등 픽셀 단위의 디테일이 중요한 경우에는 PNG가 더 적합합니다.
- 브라우저 호환성: 거의 모든 상황에서 PNG는 확실한 호환성을 제공하며, 그래픽 요소에 특수한 조작이 필요하지 않은 경우에 적합합니다.
