SVG란｜PNG·JPEG와의 차이와 열리지 않을 때 변환하는 방법

SVG와 PNG·JPEG는 무엇이 다른가

PNG나 JPEG는 색이 있는 점(픽셀)을 격자 모양으로 늘어놓아 그림을 기록합니다. 이를 래스터 형식이라고 합니다. 반면 SVG는 ‘반지름 50인 원을 이 위치에 이 색으로 그린다’는 작도 지시를 문자로 기록한 형식입니다. 표시할 때 그 지시를 읽어 다시 그리기 때문에 아무리 확대해도 윤곽이 흐려지지 않습니다.

SVG의 내용은 XML이라는 텍스트라서 메모장으로 열면 태그가 줄지어 있는 것이 보입니다. 이것이 ‘SVG를 메모장으로 열면 글자가 깨진 것처럼 보인다’의 정체이며, 파일이 손상된 것이 아닙니다. 래스터 형식끼리의 차이는 PNG·JPEG·WebP의 차이와 구분해 쓰는 법에 정리했습니다.

SVG를 쓸 수 있는 곳·쓸 수 없는 곳

문제는 대부분 ‘받는 쪽이 SVG를 지원하지 않는’ 데서 생깁니다. 먼저 지원 여부를 파악해 두면 보내기 전에 변환할지 판단할 수 있습니다.

업로드 양식에서 SVG가 거부되는 것은 용량이나 모양 문제가 아니라 보안상의 이유입니다. SVG는 텍스트라서 안에 스크립트를 써넣을 수 있고, 받는 쪽 사이트에서 그것이 실행되면 곤란하기 때문에 미리 업로드를 금지하는 서비스가 많습니다. 직접 만든 SVG도 똑같이 취급되므로, 업로드 용도라면 처음부터 PNG를 준비해 두는 편이 빠릅니다. 반대로 커팅 시트나 레이저 각인처럼 가공기에 읽히는 용도에는 SVG가 더 맞습니다. 가문 문장을 예로 든 가공 전 주의점은 가문 문장의 SVG·투명 PNG 데이터 만드는 법에 정리했습니다.

SVG를 PNG·JPEG로 변환하는 순서

SVG는 확대해도 화질이 떨어지지 않는 만큼, PNG로 변환할 때는 ‘어떤 크기로 내보낼지’를 직접 정해야 합니다. 이것이 PNG끼리의 변환과 가장 다른 점입니다.

1. 1

   SVG에 폭과 높이가 들어 있는지 확인한다

   텍스트 편집기로 열어 맨 앞의 <svg> 태그에 width와 height가 있는지 봅니다. 없으면 써넣거나 viewBox 값과 같은 비율로 지정합니다. 지정이 없는 SVG는 변환할 때 기본 크기로 처리되어 작게 내보내지는 경우가 있습니다.

2. 2

   필요한 완성 크기를 정한다

   웹용이라면 표시하고 싶은 폭의 2배, 인쇄용이라면 필요한 픽셀 수에서 역산합니다. SVG의 width·height를 목표 크기로 바꾼 뒤 변환하면 그 크기의 PNG를 얻을 수 있습니다.

3. 3

   변환 도구로 드래그한다

   이미지 형식 변환 도구에 SVG를 불러오고 출력 형식으로 PNG를 고릅니다. 처리는 브라우저 안에서 끝나며, 이미지는 서버로 전송되지 않습니다.

4. 4

   배경 처리를 정한다

   PNG라면 배경이 투명한 채로 남습니다. JPEG는 투명을 유지할 수 없어 투명한 부분이 흰색으로 채워집니다. 흰 배경에 놓으면 곤란한 소재는 PNG 그대로 쓰세요.

열리지 않거나 깨질 때 원인 가려내기

SVG 문제는 ‘열리지 않는다’와 ‘열리지만 모양이 다르다’ 두 가지로 나뉩니다. 증상에서 원인을 좁히면 고치는 방법이 정해집니다.

가장 많은 것은 글꼴 문제입니다. SVG 안에 텍스트가 글자 그대로 들어 있으면, 연 기기에 그 글꼴이 없을 때 다른 서체로 바뀌어 폭이 달라지고 레이아웃이 깨집니다. 다른 사람에게 건네는 SVG는 내보낼 때 글자를 윤곽선으로 바꿔 두면 확실합니다. 로고를 교체할 때의 확인 항목은 로고 리뉴얼에 정리했습니다.

PNG에서 SVG로 되돌릴 수 있을까

결론부터 말하면 자동으로는 되돌릴 수 없습니다. PNG는 픽셀의 모음이라서 ‘여기는 원’, ‘여기는 글자’라는 정보가 남아 있지 않습니다. 변환 프로그램이 하는 일은 색의 경계를 추정해 윤곽선을 다시 긋는 트레이스라는 처리로, 원래 도형을 복원하는 것이 아닙니다.

• 단색에 또렷한 형태(실루엣, 단순한 마크)는 트레이스로도 그런대로 결과가 나옵니다.
• 가는 선이나 그러데이션, 그림자가 있는 로고는 윤곽이 물결치거나 색 수가 늘어 무너지기 쉽습니다.
• 글자는 패스가 되므로 나중에 문구나 서체를 고칠 수 없습니다.
• JPEG를 원본으로 하면 압축 노이즈까지 도형으로 잡아 버립니다.

즉 로고를 오래 쓸 생각이라면 처음에 SVG를 받아 두는 것이 가장 확실합니다. 제작을 의뢰할 때 SVG와 내보낸 PNG(대·중·소)를 세트로 받는 형태로 해 두면, 웹·자료·SNS 어디에 쓰든 다시 만들 필요가 없습니다.

자주 묻는 질문

SVG 파일은 어떻게 여나요?

가장 간단한 방법은 브라우저에 드래그 앤 드롭하는 것입니다. Chrome이든 Safari든 그대로 이미지로 표시됩니다. 더블클릭하면 코드가 열리는 것은 기본 앱이 텍스트 편집기로 되어 있기 때문이며, 파일이 손상된 것이 아닙니다. 편집하고 싶다면 Illustrator나 Inkscape, Figma 같은 벡터 편집 프로그램으로 엽니다. 다른 사람에게 건넬 때는 상대 환경에서 열린다는 보장이 없으니 PNG도 함께 주면 친절합니다.

SVG와 PNG 중 어느 것을 써야 하나요?

자기 웹사이트에 두는 로고나 아이콘이라면 SVG, 다른 사람이나 서비스에 건네는 이미지라면 PNG가 기본입니다. SVG는 확대해도 화질이 떨어지지 않고 단순한 도형이라면 파일도 작지만, SNS나 업로드 양식, Google 프레젠테이션 등 받아 주지 않는 곳이 남아 있습니다. 사진은 둘 다 맞지 않으니 JPEG나 WebP를 쓰세요. 망설여진다면 SVG를 원본 데이터로 보관하고 쓰는 곳마다 PNG를 내보내는 방식으로 관리하면 편합니다.

SVG를 인쇄하면 글자가 어긋나는 것은 왜인가요?

SVG 안에 글자가 텍스트 그대로 들어 있고, 인쇄하는 기기에 그 글꼴이 없으면 다른 서체로 바뀌기 때문입니다. 서체가 바뀌면 글자 폭도 달라지므로 줄이 넘어가거나 틀 밖으로 삐져나옵니다. 내보낼 때 글자를 윤곽선(패스)으로 바꾸면 도형으로 취급되어 깨지지 않습니다. 인쇄소에 입고하는 경우에는 애초에 PDF나 AI 형식을 지정받는 경우가 많으니 미리 지원 형식을 확인하세요.

PNG를 SVG로 변환하는 도구가 있나요?

트레이스라는 처리로 비슷한 것을 만들 수는 있지만, 원래 SVG가 복원되는 것은 아닙니다. 단색 실루엣이나 단순한 마크라면 쓸 만한 경우도 있지만, 가는 선이나 그러데이션, 글자가 들어간 로고는 윤곽이 흐트러집니다. 참고로 이 사이트의 이미지 형식 변환 도구가 출력할 수 있는 것은 PNG·JPEG·WebP이며, SVG로 내보내기는 지원하지 않습니다. SVG가 필요하다면 제작처에 원본 데이터를 요청하는 것이 확실합니다.