Skip to content

SVG와 PNG의 차이에 대해

jihee1103 edited this page Jan 29, 2024 · 2 revisions

SVG (Scalable Vector Graphic)

SVG파일은 벡터 형식의 이미지다. XML로 작성되기 때문에 텍스트로 값을 조작하는 등 편집이 가능하다.

벡터 이미지란?

벡터 이미지는 점과 점을 연결해 수학적 원리로 그림을 그려서 표현한다. 따라서 이미지를 아무리 확대를 시켜도 깨지지 않는다는 장점이 있으나, 선이 많거나 색이 많은 이미지의 경우, 많은 연산을 해야하기에 급격하게 파일의 용량이 커지고 무거워져 렌더링이 느려질 수 있다. 단순한 선이나 색으로 이루어진 아이콘 혹은 일러스트같은 파일에 적합하다.

PNG (Portable Network Graphics)

PNG는 비트맵(래스터) 형식의 이미지다. 비손실압축방식을 이용하기때문에 원본이 훼손되지 않고, 화질이 좋은 편이다. 투명이나 반투명을 표현할 수 있어서 투명함을 표현해야 할 경우에 이용한다. 다만 고해상도를 지원하기때문에 렌더링을 할 때 시간이 걸릴 수 있다.

비트맵 이미지란?

래스터 이미지는 하나의 픽셀 안에 하나의 색을 넣어 이미지를 표현한다. 벡터이미지에 비해 정교하고 화려한 표현이 가능하다. 픽셀이 많아질수록 선명하고 깔끔한 이미지를 표현할 수 있으나, 용량이 커져서 렌더링에 시간이 걸릴 수 있다. .jpg, .jpeg, .gif도 비트맵 방식의 파일이다. 고해상도의 이미지가 필요 없다면 .jpg를 이용하는것이 렌더링 속도에 긍정적인 효과를 미칠 수 있다.

image