SVG를 PNG로 바꿀 때 필터와 마스크가 달라지는 이유

벡터 장면이 픽셀로 고정되는 순간을 이해하세요

SVG는 도형, 글자, 필터와 마스크의 관계를 기술하고 렌더러가 표시할 때 화면을 만듭니다. PNG로 변환하면 그 장면이 정해진 가로세로 픽셀 격자에 한 번 그려집니다. 이후 PNG를 확대해도 벡터처럼 다시 계산되지 않으므로, 최종 사용 크기와 필요한 배율을 변환 전에 결정해야 합니다. viewBox와 출력 너비·높이의 비율도 함께 확인하세요.

작은 아이콘과 큰 포스터를 같은 픽셀 크기로 내보내면 경계와 필터의 인상이 달라질 수 있습니다. 선 두께, 작은 글자, 모서리와 흐림 반경을 실제 사용 배율에서 확인하세요. 고해상도 화면용으로 두 배 크기를 만들 계획이라면 최종 배치에서 절반 크기로 표시했을 때도 점검합니다. 변환본의 픽셀 크기를 기록해 원본과 비교 조건을 고정하세요.

SVG의 preserveAspectRatio 설정과 출력 캔버스 비율이 다르면 빈 여백이 생기거나 장면 일부가 잘릴 수 있습니다. 변환기가 너비만 받고 높이를 자동 계산하는지, 지정한 두 값에 맞춰 늘리는지 확인하세요. 기준이 되는 브라우저 화면을 같은 배경색과 장치 배율로 캡처해 두면 필터 차이와 단순한 크기 조정 차이를 구분하기 쉽습니다. 비교할 때는 보간된 확대 화면이 아니라 원래 출력 픽셀을 우선 봅니다. 배경 투명도도 같은 조건으로 맞추세요.

• 최종 표시 크기와 출력 픽셀 수 정하기
• viewBox와 가로세로 비율 확인하기
• 실제 배치 배율에서 결과 보기

필터 영역에서 잘린 효과를 찾으세요

흐림과 그림자는 원래 도형의 경계 밖으로 퍼질 수 있습니다. SVG 필터는 효과를 계산하고 그릴 영역을 가지므로 그 범위가 좁으면 바깥쪽 픽셀이 잘린 것처럼 보일 수 있습니다. 원본 브라우저 미리보기에서 이미 잘려 있다면 변환기만의 문제로 단정하지 말고 filter 요소의 영역과 좌표 체계를 확인해야 합니다.

PNG 결과의 네 모서리와 캔버스 경계를 확대해 그림자 끝이 직선으로 끊기거나 블러가 갑자기 사라지는지 봅니다. 필터 연결 순서도 결과에 영향을 줍니다. 예를 들어 흐림 뒤 색을 합성하는 과정과 합성 뒤 흐림을 적용하는 과정은 같은 모양이 아닐 수 있습니다. 변환 전에 원본 SVG를 서로 다른 표준 브라우저에서 열어 기준 화면을 확보하세요.

• 캔버스 경계의 직선형 잘림 찾기
• 필터 영역과 좌표 체계 검토하기
• 두 개 이상의 렌더러에서 원본 비교하기

마스크의 알파와 밝기 해석을 구분하세요

마스크는 단순히 흰색은 보이고 검은색은 숨기는 그림이라고만 이해하면 부족합니다. 마스크 유형과 색·알파 값에 따라 투명도를 만드는 방식이 달라질 수 있고, 회색이나 반투명 색은 중간 단계로 해석됩니다. 예상보다 전체가 옅거나 특정 색 부분이 사라진다면 mask-type, mask-mode와 마스크 소스의 실제 알파를 확인하세요.

결과 PNG를 흰색, 검은색과 강한 색 배경 위에 올려 마스크 경계를 비교합니다. 가장자리의 한 픽셀 띠, 반투명 그라데이션, 도형이 겹치는 부분을 확대하세요. 원본에서 마스크가 객체 경계 상자 기준인지 사용자 좌표 기준인지도 중요합니다. 크기 변경 뒤 위치가 어긋났다면 마스크 단위와 변환 행렬을 우선 살펴봅니다.

• 마스크 유형과 소스 알파 확인하기
• 여러 배경에서 반투명 경계 보기
• 마스크 단위와 위치 변화 점검하기

글꼴과 외부 리소스 누락을 분리해 진단하세요

SVG가 웹 글꼴, 외부 이미지, 스타일시트 또는 참조 파일에 의존하면 변환기가 그 리소스를 읽지 못할 수 있습니다. 이 경우 글꼴이 대체되어 줄바꿈이 달라지거나, 필터에 사용하는 이미지가 비고, 마스크 참조가 사라질 수 있습니다. 네트워크에서 보이는 원본과 단독 파일을 연 화면이 다르다면 외부 의존성을 의심하세요.

공유 가능한 SVG를 만들 때는 라이선스를 확인한 글꼴을 경로로 변환하거나 적절히 포함하고, 외부 이미지는 접근 가능한 방식으로 준비합니다. 보안 정책 때문에 원격 참조를 차단하는 변환기도 있으므로 작동을 가정하지 마세요. 요소 id가 중복되거나 참조 경로가 잘못되지 않았는지도 검사합니다. 간단한 버전으로 필터와 마스크를 하나씩 꺼보면 문제 원인을 좁히기 쉽습니다.

• 웹 글꼴과 외부 이미지 의존성 목록 만들기
• 참조 id와 경로 확인하기
• 필터·마스크를 하나씩 꺼서 원인 분리하기

최종 PNG를 기준 화면과 체계적으로 비교하세요

SVG→PNG 도구에서 목표 크기와 배경을 설정해 대표 파일을 변환한 뒤 원본 브라우저 화면과 같은 배율로 나란히 놓습니다. 바깥 그림자, 내부 흐림, 마스크 그라데이션, 작은 글자와 얇은 선을 순서대로 확인하세요. 예상한 투명 배경이 남았는지, 캔버스 여백과 픽셀 크기가 맞는지 기록합니다. 자동 비교가 있더라도 눈에 중요한 영역은 직접 확인하세요.

PNG를 실제 문서나 앱 화면에 넣고 최종 배경에서 한 번 더 봅니다. 결과가 다르면 출력 크기, 외부 리소스, 필터 영역, 마스크 방식 순으로 원인을 분리해 수정한 뒤 다시 변환하세요. 만족한 설정과 사용한 렌더러 버전을 남기고, 원본 SVG는 편집 가능한 기준 파일로 보관합니다. 다른 크기가 필요하면 기존 PNG를 확대하기보다 SVG에서 새로 렌더링하는 편이 낫습니다.

여러 크기를 배포한다면 각 크기를 별도 산출물로 검사하세요. 큰 PNG가 통과했다고 작은 아이콘의 한 픽셀 선과 마스크 경계까지 보장되지는 않습니다. 파일명에 출력 크기와 배경 조건을 표시하고, 투명본과 배경 합성본을 섞지 마세요. 변경된 SVG를 다시 내보낼 때는 이전 PNG를 수동으로 덮어쓰기보다 동일한 체크리스트를 반복해 효과의 잘림, 글꼴 대체와 여백 변화를 새로 확인합니다.

• 그림자·마스크·글자·얇은 선 순서로 검사하기
• 실제 문서와 배경에서 확인하기
• 다른 크기는 SVG에서 다시 렌더링하기