SVG PNG 차이: 로고 확대해도 안 깨지는 벡터의 원리

로고 파일을 화면 가득 확대했더니 테두리가 계단처럼 삐죽삐죽해진 경험이 있으실 겁니다. 그런데 같은 로고를 다른 파일로 받으면 아무리 확대해도 테두리가 매끈한 채로 그대로 남아 있기도 합니다. 이 차이는 편집 프로그램의 성능 문제가 아니라, 이미지가 애초에 저장되는 방식 자체가 다르기 때문에 생깁니다.

그 두 방식의 이름이 벡터와 래스터입니다. SVG는 벡터 방식으로, PNG는 래스터 방식으로 이미지를 저장합니다. 이 저장 방식의 차이를 알면 왜 로고는 SVG로 보관해야 하는지, 그리고 PNG로 바꿀 때 어떤 값이 최종 화질을 좌우하는지가 명확해집니다.

요약 ① SVG는 도형의 좌표와 경로를 수식으로 저장하고, PNG는 격자에 나열된 픽셀 하나하나에 색을 저장합니다. ② SVG는 어떤 크기로 보여주든 그 크기에 맞춰 좌표를 다시 계산해 그리므로 깨지지 않지만, PNG는 저장된 픽셀 수가 고정이라 확대하면 픽셀 자체가 늘어나 계단현상이 생깁니다. ③ SVG를 PNG로 바꿀 때는 "배율(scale)" 값이 원본 좌표를 몇 배 크기로 다시 그릴지를 정하므로, 이 값이 곧 결과물의 실제 해상도와 화질을 결정합니다.

SVG는 좌표를, PNG는 픽셀을 저장합니다

SVG 파일을 텍스트 편집기로 열어보면 이미지가 아니라 코드가 보입니다. <svg> 태그 안에 원이나 선, 곡선의 좌표값이 숫자로 적혀 있고, viewBox라는 속성이 이 좌표들을 어떤 기준 크기 안에서 해석할지를 정합니다. 즉 SVG는 "이 지점에서 저 지점까지 이런 곡선으로 잇는다"는 수학적 설명을 저장하는 방식입니다.

반면 PNG는 완전히 다른 방식으로 이미지를 담습니다. 가로세로 격자를 촘촘히 나누고, 그 칸 하나하나(픽셀)마다 어떤 색을 칠할지 값을 저장합니다. 예를 들어 가로 512칸, 세로 512칸짜리 PNG라면 262,144개 칸 각각에 색상값이 고정되어 저장되어 있는 셈입니다. 여기에는 도형이 원래 어떤 곡선이었는지에 대한 정보가 전혀 남아 있지 않습니다.

확대할 때 실제로 벌어지는 일이 다릅니다

이 저장 방식의 차이는 확대하는 순간 눈에 보이는 결과로 드러납니다. SVG를 더 큰 화면에 표시하면, 화면을 그리는 프로그램이 저장된 좌표 수식을 그 새로운 크기에 맞춰 처음부터 다시 계산해서 그립니다. 곡선은 여전히 곡선의 수식 그대로 그려지므로 아무리 확대해도 매끈한 테두리가 유지됩니다.

PNG를 확대하면 사정이 다릅니다. 이미 고정된 262,144개의 색칠된 칸을 억지로 늘려서 빈틈을 채우는 것뿐입니다. 원래 없던 세부 정보가 새로 생기는 게 아니라, 있던 픽셀 하나가 여러 칸으로 뻥튀기됩니다. 그 결과 매끈해 보이던 곡선 테두리가 크고 뭉툭한 계단 모양으로 드러납니다. 로고를 확대했을 때 깨진다는 현상은 대부분 이 뻥튀기 과정에서 생기는 것입니다.

그런데도 로고를 PNG로 바꿔야 하는 이유

이렇게 보면 SVG가 무조건 우월해 보이지만, 실제로는 PPT나 워드 문서, 일부 게시판이나 이미지 업로드 양식에 로고를 넣을 때 SVG를 그대로 받아주지 않는 경우가 있습니다. 이런 프로그램들은 좌표 수식을 해석해서 그려주는 벡터 렌더링 기능이 아예 없거나, 이미지 자리에 고정된 픽셀 격자 파일만 받도록 만들어져 있기 때문입니다.

즉 SVG를 보관용 원본으로 유지하되, 특정 프로그램이나 양식에 넣어야 할 때는 그 환경이 확실히 받아줄 수 있는 고정된 픽셀 이미지, 다시 말해 PNG로 바꿔서 제출하는 편이 안전합니다. 이때 중요한 것은 확대할 필요가 없는 최종 크기를 미리 정해서 넉넉한 해상도로 변환해 두는 것입니다.

직접 해보기 →

변환기가 "배율(scale)" 값으로 화질을 정하는 방식

SVG to PNG 변환기에 SVG 코드를 붙여넣으면, 먼저 원본 태그에 적힌 width·height 값이나 viewBox 크기를 읽어 기준 크기를 정합니다. 둘 다 없는 SVG라면 512×512를 기준으로 처리합니다. 그다음 화면의 배율 슬라이더에서 고른 값(1배~10배)을 이 기준 크기에 곱해서 최종 픽셀 크기를 계산합니다.

여기서 핵심은 이 계산이 단순히 작게 만든 그림을 나중에 늘리는 방식이 아니라는 점입니다. 변환기는 목표 크기를 SVG 자체에 다시 써넣은 뒤 그 크기 그대로 벡터를 새로 그립니다. 즉 좌표 수식을 목표 해상도에 맞춰 처음부터 다시 계산하는 것이므로, 배율을 높게 잡을수록 원본을 억지로 뻥튀기한 흐릿한 결과가 아니라 그 해상도에 맞게 실제로 다시 그려진 선명한 PNG가 나옵니다. 배율 값이 곧 최종 화질을 결정한다는 말은 이런 뜻입니다.

투명 배경이냐 배경색이냐 — PNG와 JPG의 갈림길

출력 포맷을 고를 때 PNG는 "투명 유지", JPG는 "배경 채움"이라고 표시되어 있습니다. 이것도 앞서 설명한 픽셀 저장 방식과 맞닿아 있습니다. PNG 픽셀은 색상값 외에 투명도(알파) 값도 함께 저장할 수 있어서 로고 배경을 비운 채로 둘 수 있습니다. 반면 JPG 픽셀에는 투명도 항목이 아예 없어서, 모든 칸에 반드시 어떤 색이든 채워 넣어야 합니다.

그래서 JPG를 선택하면 변환기에 배경색 선택 항목이 함께 나타납니다. 이 색이 원래 비어 있던 자리를 대신 채우게 됩니다. 흰 배경 문서에 넣을 로고라면 흰색으로, 특정 색 배경 위에 올릴 로고라면 그 색을 맞춰 넣으면 최종 결과물에서 어색한 사각형 테두리가 보이지 않습니다.

정리

• SVG는 도형의 좌표와 경로를 수식으로 저장하고, PNG는 고정된 픽셀 격자에 색상값을 저장합니다.
• SVG는 표시할 때마다 그 크기에 맞춰 좌표를 다시 계산해 그리므로 확대해도 깨지지 않습니다.
• PNG는 이미 저장된 픽셀 수가 고정이라, 확대하면 픽셀 자체가 늘어나며 계단현상이 생깁니다.
• 로고 원본은 SVG로 보관하되, SVG를 받아주지 않는 프로그램·양식에 넣을 때만 PNG로 바꿔 제출하는 편이 안전합니다.
• 변환기의 배율(scale) 값은 원본 좌표를 몇 배 크기로 다시 그릴지를 정하므로, 최종 결과물의 실제 해상도와 화질을 좌우합니다.

자주 묻는 질문

SVG 파일을 그냥 이미지 뷰어로 열면 안 되나요?

대부분의 최신 브라우저와 이미지 뷰어는 SVG를 문제없이 보여줍니다. 다만 PPT·워드 같은 문서 프로그램이나 일부 웹 게시판, 이미지 업로드 양식은 좌표 수식을 해석해서 그려주는 벡터 렌더링 기능을 지원하지 않거나 파일 형식 자체를 PNG·JPG로 제한해 둔 경우가 있습니다. 그런 환경에 넣어야 한다면 미리 PNG로 바꿔두는 편이 안전합니다.

배율을 몇 배로 설정해야 화질이 가장 좋아지나요?

정해진 정답은 없고, 최종적으로 어디에 쓸 것인지에 따라 달라집니다. 배율을 높일수록 출력 픽셀 크기와 화질은 올라가지만 그만큼 파일 크기도 커집니다. 작은 아이콘으로만 쓸 이미지라면 낮은 배율로도 충분하고, 인쇄물이나 큰 화면에 띄울 이미지라면 배율을 넉넉히 높여서 실제 표시 크기보다 해상도가 작아지지 않게 맞추는 편이 안전합니다.

PNG를 다시 SVG로 되돌릴 수 있나요?

픽셀에 저장된 색상값만으로는 원래의 좌표와 경로를 정확히 복원할 수 없습니다. 래스터 이미지를 벡터처럼 보이게 만드는 도구들은 픽셀 패턴을 분석해서 비슷하게 보이는 새로운 경로를 추정해 그리는 것이지, 원본 SVG에 있던 좌표값 자체를 그대로 되살리는 것이 아닙니다. 즉 PNG로 한 번 바꾸면 원본 SVG의 정밀한 수치 정보는 사라진다고 보는 편이 정확합니다.

JPG로 변환했는데 배경이 특정 색으로 채워져요, 왜 그런가요?

JPG(JPEG) 형식은 픽셀마다 투명도 값을 저장하는 항목이 없어서, 원래 비어 있던 자리도 반드시 어떤 색으로든 채워야 합니다. 이 때문에 출력 포맷을 JPG로 고르면 배경색을 지정하는 항목이 함께 나타나고, 그 색이 비어 있던 영역을 대신 채우게 됩니다. 투명한 배경을 그대로 유지하고 싶다면 JPG 대신 PNG를 선택하면 됩니다.