SVG 마크업을 PNG 이미지로 변환하는 방법

SVG 이미지 변환을 시작하기 전에

SVG 마크업을 PNG 이미지로 바꾸는 작업은 벡터 형식의 내용을 래스터 이미지 결과로 받아야 할 때 사용할 수 있습니다. 이 도구에는 변환할 SVG 텍스트를 넣고, 필요할 때 너비와 높이를 함께 지정하는 방식으로 진행합니다. SVG 콘텐츠 입력은 선택 항목으로 취급되지만, 실제 변환을 하려면 비어 있지 않은 마크업이 필요합니다. 입력된 내용이 허용되고 필요한 변환 지원을 이용할 수 있으면 결과에는 PNG 데이터가 base64 텍스트로 표시됩니다. PNG의 바이트 크기와 보고된 너비 및 높이도 성공 결과에서 확인할 수 있습니다.

크기 값을 따로 정하지 않을 때와 출력 크기를 조정하려고 할 때의 처리 조건은 서로 다릅니다. 너비와 높이는 선택적인 숫자 입력이며 기본값은 0입니다. 두 입력을 모두 0이 아닌 값으로 지정하면 SVG 텍스트 안의 특정 속성이 변환 전에 바뀔 수 있습니다. 반대로 두 값을 0으로 두면 입력된 SVG의 크기 정보를 바꾸려는 조건을 사용하지 않고 변환을 시도할 수 있습니다. 따라서 목적에 맞는 SVG 내용과 치수 입력을 준비하는 것이 첫 단계입니다.

입력과 크기를 설정하는 순서

변환할 SVG 마크업을 준비합니다. 시작 태그와 도형, 텍스트 또는 스타일 정보가 포함된 내용을 그대로 복사해 입력 영역에 붙여 넣습니다. 입력 영역을 공백으로만 두지 말고 변환 대상인 SVG 텍스트를 제공해야 합니다. 콘텐츠가 빈 값이면 변환 단계에 도달하기 전에 작업이 실패합니다.
너비와 높이를 각각 검토합니다. 두 항목은 숫자로 입력하며 값을 넣지 않으면 기본값 0이 사용됩니다. 원본 SVG의 크기 정보를 그대로 활용하려는 경우에는 두 값을 0으로 둔 상태에서 진행할 수 있습니다. 이때 성공한 결과에서 해당 입력 차원은 자동으로 보고됩니다.
출력 크기를 지정해야 한다면 너비와 높이를 모두 0이 아닌 숫자로 입력합니다. 이 조건이 충족될 때 도구는 SVG 텍스트에서 처음 나오는 큰따옴표 형식의 width="..." 속성과 height="..." 속성을 찾아 입력한 값으로 바꾼 다음 변환을 시도합니다. 두 값 가운데 하나만 0이 아닌 경우에는 이 치수 속성 교체 조건이 적용되지 않습니다.
SVG 안의 속성 표기를 확인합니다. 큰따옴표로 묶인 첫 번째 일치 속성만 교체 대상이므로, 작은따옴표를 사용한 표기나 따옴표가 없는 표기는 같은 방식으로 바뀌지 않습니다. 같은 종류의 속성이 여러 개라면 처음 일치하는 항목만 조건에 해당합니다. 원하는 크기 변경이 일어나지 않을 때는 이 표기와 속성 순서를 먼저 살펴봅니다.
준비한 내용을 다시 읽고 변환을 실행합니다. SVG가 올바르게 해석되어야 하며, 필요한 SVG-to-PNG 변환 지원을 이용할 수 있어야 성공 결과가 생성됩니다. 변환이 끝나면 표시된 결과가 성공인지 실패인지부터 구분합니다.
성공한 경우 base64 텍스트로 표현된 PNG 데이터를 확인합니다. 함께 표시된 PNG 바이트 크기는 결과 데이터의 크기를 살펴볼 때 참고할 수 있으며, 보고된 너비와 높이는 선택한 치수 처리 결과를 확인하는 기준이 됩니다. 입력 차원 중 0으로 둔 항목은 결과에서 자동으로 표시됩니다.
실패한 경우 SVG 콘텐츠가 실제로 입력되었는지 확인한 뒤 마크업을 점검합니다. 문법이 잘못되었거나 변환 대상이 지원되지 않거나 다른 이유로 변환이 거부된 SVG는 실패할 수 있습니다. 필요한 변환 지원을 이용할 수 없는 상황에서도 작업은 실패하므로, 같은 내용만 반복해서 실행하기보다 입력과 변환 조건을 나누어 확인합니다.

성공 결과와 실패 범위 읽기

성공 결과에서 base64 텍스트가 보이면 PNG 데이터가 해당 표현으로 제공된 것입니다. 바이트 크기는 PNG 결과가 차지하는 데이터 양을 나타내는 보고 항목이며, 보고된 너비와 높이는 변환 결과의 치수 정보를 보여 줍니다. 입력한 너비 또는 높이가 0이었다면 그에 대응하는 결과 차원은 자동으로 표시되므로, 숫자가 직접 나타나지 않는다는 이유만으로 변환 실패로 판단하지 않아도 됩니다.

두 치수를 모두 0이 아닌 값으로 지정했을 때 숫자가 반영되려면 SVG 안에 처음 일치하는 큰따옴표 속성이 있어야 합니다. 작은따옴표, 따옴표 없음, 또는 다른 형태의 속성은 이 교체 조건의 대상이 아닙니다. 한 치수만 0이 아닌 상태도 두 치수 입력 조건을 충족하지 않으므로, 일부 크기만 바꾸려는 경우에는 SVG 마크업 자체의 치수와 결과 보고 방식을 구분해서 해석해야 합니다.

실패 결과는 빈 콘텐츠, 변환이 거부된 SVG, 또는 필요한 변환 지원의 부재와 관련될 수 있습니다. 비어 있지 않다는 사실만으로 성공을 보장하지 않으므로 문법과 지원 여부를 함께 확인해야 합니다. 반대로 성공 결과가 반환되었다면 base64 PNG 데이터, 바이트 크기, 보고된 치수를 각각 확인해 결과의 형태와 입력한 치수 조건이 기대와 맞는지 판단할 수 있습니다.

사용 예시

배너용 SVG의 출력 크기를 320×180으로 지정해 PNG 결과를 받으려는 상황입니다.

width="640" height="360"이 포함된 SVG 마크업을 입력하고 너비 320, 높이 180을 지정한 뒤 변환을 실행합니다.

변환이 성공하면 base64 형식의 PNG 데이터, PNG 바이트 크기, 보고된 너비 320과 높이 180이 포함된 결과가 표시됩니다.

제한 사항

입력이 비어 있지 않아도 SVG가 잘못되었거나 지원되지 않으면 변환이 실패할 수 있으며, 필요한 SVG-to-PNG 변환 지원을 이용할 수 없는 경우에도 결과가 생성되지 않습니다.

자주 발생하는 오류

너비만 0이 아닌 값으로 입력하고 SVG의 치수가 바뀌기를 기대하는 것이 오류 원인입니다. 너비와 높이를 모두 0이 아닌 숫자로 지정하거나, 원하는 치수를 SVG 마크업에 직접 반영한 뒤 다시 실행하세요.

자주 묻는 질문

SVG 입력을 비워 두어도 되나요?

SVG 콘텐츠가 빈 값이면 변환 전에 작업이 실패하므로, 변환하려는 마크업을 입력해야 합니다. SVG 입력이 선택 항목으로 제공된다는 점과 실제 변환에 내용이 필요하다는 점을 구분하세요.

너비 하나만 입력해도 SVG 크기가 바뀌나요?

한 값만 0이 아닌 상태에서는 두 치수가 모두 0이 아닌 경우에만 실행되는 속성 교체 조건이 충족되지 않습니다. 크기 속성을 바꾸려면 너비와 높이를 모두 0이 아닌 숫자로 지정해야 합니다.

성공한 결과에는 무엇이 표시되나요?

변환이 성공하면 base64로 표현된 PNG 데이터와 PNG 바이트 크기, 보고된 너비 및 높이를 확인할 수 있습니다. 입력 차원이 0인 항목은 해당 결과 차원에서 자동으로 보고됩니다.