SVG를 PNG로 변환

SVG와 PNG, 왜 변환해야 할까?

SVG는 벡터 형식으로, 이미지를 픽셀이 아니라 도형과 곡선으로 표현합니다. 그래서 어떤 크기에서도 선명한 로고, 아이콘, 일러스트에 딱 맞습니다. 하지만 SNS, 메신저, 쇼핑몰, 인쇄소, 온라인 신청서, 일부 사무용 프로그램처럼 일반 이미지만 받는 곳이 많습니다. 이럴 때 가장 좋은 선택이 PNG입니다. 픽셀로 된 이미지지만 화질 손실이 없고 투명 배경도 유지합니다. SVG를 PNG로 바꾸면 로고의 선명함과 투명 배경은 그대로 두면서 누구나 열 수 있는 파일이 됩니다.

크기 고르기: 1배, 2배, 4배 또는 너비 지정

SVG의 원래 크기는 width와 height 속성, 없으면 viewBox로 정해지며, 도구가 파일마다 이 크기를 보여 줍니다. 1배는 PNG가 정확히 그 크기이고, 2배는 두 배 크기라 레티나 같은 고해상도 화면에 알맞습니다. 4배로 하면 인쇄나 큰 이미지에도 쓸 만큼 커집니다. ‘너비 지정’을 고르면 SNS 게시물용 1080이나 아이콘용 512처럼 원하는 픽셀 수를 정확히 입력할 수 있고, 높이는 그림의 비율에 맞춰 정해집니다. SVG는 매번 다시 그려지므로 아주 큰 크기에서도 선명합니다. 단, 한 변이 16,384픽셀을 넘거나 아이폰과 아이패드에서 전체 1,600만 픽셀을 넘으면 브라우저 한계 때문에 이미지가 줄어들며, 도구가 이를 알려 줍니다.

투명 배경, 흰 배경, JPG 형식

투명한 PNG는 어떤 배경 위에도 올릴 수 있어서, 웹사이트, 동영상, 발표 자료에 쓸 로고라면 이 형식을 고르세요. 흰 배경은 인쇄할 문서나 투명한 부분을 검게 보여 주는 서비스에서 유용합니다. JPG는 투명을 지원하지 않으므로 SVG의 투명한 부분이 고른 배경색(기본은 흰색)으로 채워집니다. 그러데이션이 많은 일러스트는 JPG가 더 가볍지만, 글자와 단색 면 주변에 작은 얼룩이 생길 수 있고 PNG는 그대로 선명합니다. 잘 모르겠다면 PNG를 고르세요.

원본과 다르게 보인다면

SVG는 브라우저가 이미지로 그립니다. 보안을 위해 코드는 페이지에서 실행되지 않고, 외부 리소스도 불러오지 않습니다. 그래서 두 가지 차이가 생길 수 있습니다. 파일에 포함되지 않은 글꼴은 기기에 있는 글꼴로 바뀝니다. 디자인 프로그램에서 글자를 윤곽선으로 바꾼 뒤(일러스트레이터라면 ‘윤곽선 만들기’) SVG를 내보내세요. 다른 파일이나 사이트에 링크된 이미지는 보이지 않지만, SVG 안에 포함된 이미지는 잘 나옵니다. HTML 코드(foreignObject 태그)가 들어 있는 SVG는 대부분의 브라우저가 이미지로 내보내지 않아 변환할 수 없습니다. 움직이는 SVG는 첫 상태의 정지 이미지로 변환됩니다.