SVG를 PNG로 변환기

SVG를 PNG로 변환이란?

SVG를 PNG로 변환하는 것은 벡터 그래픽의 래스터화 과정으로, 수학적으로 정의된 도형과 곡선을 픽셀 그리드로 변환합니다. 이 과정은 래스터 포맷 간의 단순한 재인코딩과는 근본적으로 다릅니다. 기하학적 명령을 해석하여 특정 해상도에서 시각화하는 작업입니다.

SVG(Scalable Vector Graphics)는 이미지를 수학적 객체의 집합으로 표현합니다: 사각형, 타원, 베지에 곡선 경로, 텍스트 요소 등. SVG 파일은 XML 문서로, 각 도형은 좌표와 속성으로 정의됩니다: <circle cx="50" cy="50" r="40" fill="red"/>는 중심점 (50, 50)에 반지름 40 단위의 빨간 원을 그립니다. 어떤 배율에서도 브라우저나 그래픽 편집기가 픽셀 좌표를 다시 계산하여 완벽한 선명도를 유지합니다.

PNG(Portable Network Graphics)는 이미지를 고정된 픽셀 매트릭스로 저장합니다. 각 픽셀은 특정 색상과 투명도 수준을 가집니다. PNG 이미지를 확대하면 보간이 발생하여 인접 픽셀을 기반으로 새 픽셀이 추가되면서 불가피하게 흐려집니다. 축소 시에는 픽셀을 제거해야 하므로 세부 정보가 손실될 수 있습니다.

그렇다면 왜 무한히 확장 가능한 SVG를 제한된 래스터 PNG로 변환할까요? 답은 호환성과 특정 용도에 있습니다. 현대 브라우저에서 SVG를 광범위하게 지원하지만, 래스터 포맷이 필요하거나 선호되는 상황이 있습니다.

SVG를 PNG로 래스터화가 필요한 경우

소프트웨어 호환성

벡터 포맷 SVG는 모든 프로그램에서 지원되지 않습니다. 특히 사진 및 래스터 그래픽용 애플리케이션은 SVG 파일을 열지 못하거나 제대로 표시하지 못하는 경우가 많습니다.

프레젠테이션에 로고를 삽입하거나, 메신저로 이미지를 보내거나, 소셜 미디어에 아이콘을 업로드해야 한다면 PNG가 범용적인 해결책입니다.

보안 및 플랫폼 제한

SVG 파일에는 실행 가능한 JavaScript 코드가 포함될 수 있어 잠재적인 보안 위협이 됩니다. 이러한 이유로 많은 플랫폼에서 SVG 업로드를 금지합니다:

• WordPress는 기본적으로 미디어 라이브러리에서 SVG 파일을 차단합니다
• 이메일 서비스는 메일에서 SVG를 제거하거나 표시를 차단합니다
• 콘텐츠 관리 시스템은 XSS 공격을 방지하기 위해 SVG를 제한하는 경우가 많습니다
• 마켓플레이스 (쿠팡, 11번가)는 상품 카드에 래스터 포맷을 요구합니다

PNG는 본질적으로 안전합니다 - 코드를 삽입할 수 없는 순수한 픽셀 데이터입니다.

특정 크기 고정

SVG는 본질적으로 '기본' 크기가 없으며 컨테이너에 맞게 확장됩니다. 때로는 정확한 크기의 이미지가 필요합니다:

• 파비콘 - 정확히 16x16, 32x32, 48x48 픽셀
• 앱 아이콘 - iOS는 특정 크기의 PNG 필요 (iPhone용 180x180)
• 배너 - 광고 네트워크는 정확한 픽셀 크기 요구
• 프로필 사진 - 소셜 네트워크는 특정 해상도의 정사각형 이미지 요구

SVG를 PNG로 변환하면 정확한 픽셀 크기의 이미지를 얻을 수 있습니다.

래스터 그래픽과의 통합

구성, 콜라주, 사진 합성을 만들 때 벡터와 래스터를 결합해야 하는 경우가 많습니다. 한 프로젝트에서 두 가지 유형의 그래픽으로 작업하는 것은 불편합니다: 다른 편집 도구, 변환 시 다른 동작. SVG를 래스터화하면 Photoshop, GIMP 또는 기타 래스터 편집기에서 추가 처리를 위해 포맷이 통일됩니다.

SVG와 PNG의 기술적 비교

이미지 저장 원리

SVG (벡터):

• 객체의 수학적 설명 저장
• 파일 크기는 경로의 복잡성에 따라 결정되며, 해상도와 무관
• CSS 스타일, JavaScript 스크립트, SMIL 애니메이션 지원
• 텍스트는 편집 가능하고 검색 엔진에서 인덱싱 가능
• 품질 손실 없이 무한 확장 가능

PNG (래스터):

• 색상 정보가 있는 픽셀 그리드 저장
• 파일 크기는 해상도에 정비례
• 상호작용 없는 정적 이미지
• 텍스트는 픽셀로 변환되어 편집 불가능
• 확대 시 흐려짐 발생

특성 비교 표

PNG가 SVG보다 작은 경우

역설적이지만, 일부 유형의 이미지에서는 PNG가 SVG보다 작습니다:

• 사실적인 일러스트레이션 - SVG에서 복잡한 그라데이션과 텍스처는 수많은 경로로 설명됨
• 많은 세부 정보가 있는 이미지 - 각 세부 사항에 별도의 경로 필요
• 트레이싱된 사진 - 자동 벡터화는 수천 개의 노드를 생성

PNG는 Deflate 알고리즘으로 이러한 이미지를 효율적으로 압축하는 반면, SVG는 각 곡선을 수학적으로 설명해야 합니다.

SVG 래스터화 과정: 작동 원리

벡터에서 래스터로의 변환 단계

1. SVG 문서 파싱 - 파서가 파일의 XML 구조를 분석합니다. 모든 요소 식별: 도형, 경로, 그룹, 텍스트, 스타일, 변환. 중첩된 요소와 참조(use, defs)가 재귀적으로 처리됩니다.

2. 좌표계 계산 - viewBox와 캔버스 크기가 결정됩니다. scale(배율)이 지정되면 최종 픽셀 크기가 계산됩니다. 예를 들어, viewBox="0 0 100 100"인 SVG에 scale=2를 적용하면 200x200 픽셀 이미지가 됩니다.

3. 글꼴 로드 - 텍스트 요소를 올바르게 렌더링하기 위해 시스템 글꼴이 로드됩니다. 특정 글꼴(font-family)이 지정되면 시스템에서 검색이 수행됩니다.

4. 각 요소의 래스터화 - z-index 순서(문서 내 순서)에 따라 각 요소가 픽셀로 변환됩니다:

   • 경로(path)는 베지에 곡선으로 보간되고 색상으로 채워짐
   • 도형(rect, circle, ellipse)은 공식에 따라 계산됨
   • 텍스트는 글꼴, 크기, 자간을 고려하여 렌더링됨
   • 그라데이션은 색상 포인트 사이에서 보간됨
   • 필터(blur, shadow)는 픽셀 단위 연산으로 적용됨

5. 레이어 합성 - 투명도(opacity)와 블렌딩 모드가 있는 요소는 알파 합성 규칙에 따라 서로 위에 겹쳐집니다.

6. PNG 생성 - 결과 RGBA 픽셀 배열이 Deflate 알고리즘으로 압축되어 PNG 파일 구조로 저장됩니다.

배율(scale) 매개변수

래스터화의 핵심 매개변수는 viewBox 단위와 픽셀 간의 비율을 결정하는 배율입니다:

• scale=1 - SVG 1단위가 1픽셀과 같음. viewBox="0 0 100 100"이면 결과는 100x100 픽셀
• scale=2 - 레티나 디스플레이용 2배 픽셀 밀도. ViewBox 100x100이 200x200 픽셀이 됨
• scale=4 - 고품질 인쇄용 4배 해상도

중요한 점: 배율은 벡터 요소의 품질에 영향을 미치지 않습니다 - 항상 최대 정밀도로 렌더링됩니다. 배율은 픽셀 그리드의 밀도만 결정합니다.

SVG의 텍스트 처리

래스터화 시 SVG의 텍스트 요소는 특별한 주의가 필요합니다:

• 시스템 글꼴 - 글꼴이 시스템에 설치되어 있으면 텍스트가 올바르게 렌더링됨
• 웹 글꼴 - 외부 글꼴(Google Fonts) 링크는 로컬 변환 시 로드되지 않을 수 있음
• 임베디드 글꼴 - SVG 내부의 base64 인코딩된 글꼴은 올바르게 처리됨
• 폴백 - 글꼴이 없으면 시스템 serif/sans-serif가 사용됨

래스터화 후 텍스트는 픽셀이 되어 편집이 불가능해집니다. 텍스트 편집 가능성을 유지하는 것이 중요하다면 SVG 포맷을 그대로 유지하세요.

변환 시 투명도 유지

SVG의 투명도 저장 방식

SVG에서 투명도는 여러 가지 방법으로 구현됩니다:

<!-- opacity 속성 - 전체 요소의 투명도 -->
<rect opacity="0.5" ... />

<!-- fill-opacity - 채우기만의 투명도 -->
<rect fill-opacity="0.7" ... />

<!-- stroke-opacity - 테두리만의 투명도 -->
<rect stroke-opacity="0.3" ... />

<!-- RGBA 색상 - 내장 투명도 -->
<rect fill="rgba(255, 0, 0, 0.5)" ... />

이 모든 옵션은 래스터화 시 올바르게 해석되어 PNG의 8비트 알파 채널로 변환됩니다.

투명 배경

SVG는 기본적으로 배경이 없습니다 - 요소 뒤의 공간은 투명합니다. PNG로 변환할 때 이 투명도가 유지됩니다: 요소가 없는 영역은 alpha=0(완전 투명)이 됩니다.

이것이 중요한 경우:

• 로고 - 흰색 사각형 없이 모든 배경에 배치 가능
• 아이콘 - 다양한 디자인의 인터페이스에 통합
• 그래픽 요소 - 사진 및 배경 위에 오버레이

반투명 요소

opacity < 1인 요소는 PNG에서도 반투명성을 유지합니다. 부드러운 그림자(drop-shadow), 흐린 가장자리, 투명한 오버레이 - 이 모든 것이 PNG의 8비트 알파 채널(256단계 투명도) 덕분에 올바르게 전송됩니다.

최적의 사용 시나리오

앱 아이콘 준비

모바일 플랫폼은 특정 크기의 래스터 포맷 아이콘을 요구합니다:

iOS:

• 180x180 - iPhone (3x)
• 167x167 - iPad Pro
• 152x152 - iPad
• 120x120 - iPhone (2x)

Android:

• 192x192 - xxxhdpi
• 144x144 - xxhdpi
• 96x96 - xhdpi
• 72x72 - hdpi
• 48x48 - mdpi

SVG 아이콘이 있으면 모든 화면에서 완벽한 품질로 필요한 모든 PNG 크기를 생성할 수 있습니다.

파비콘 만들기

파비콘(사이트 아이콘)은 ICO 또는 PNG 포맷이어야 합니다. SVG 로고에서 다음 버전이 생성됩니다:

• 16x16 - 브라우저 탭용 최소 크기
• 32x32 - 표준 파비콘
• 48x48 - Windows 바로가기
• 180x180 - Apple Touch Icon

소셜 미디어용 내보내기

각 플랫폼마다 이미지 요구 사항이 있습니다:

SVG 그래픽은 각 플랫폼에 필요한 크기의 PNG로 변환됩니다.

인쇄 제작물

고품질 인쇄에는 300 DPI 해상도가 필요합니다. SVG에서 모든 크기의 PNG를 만들 수 있습니다:

• 명함 (90x50 mm) 300 DPI: 1063x591 픽셀
• A4 포스터 (210x297 mm) 300 DPI: 2480x3508 픽셀
• 배너 (1x0.5 m) 150 DPI: 5906x2953 픽셀

변환 시 배율은 인쇄 요구 사항에 맞는 최종 해상도에 맞게 선택됩니다.

제한 사항 및 특이점

편집 가능성 손실

래스터화 후 SVG는 벡터 속성을 잃습니다:

• 개별 요소의 색상을 변경할 수 없음
• 텍스트를 편집할 수 없음
• 경로를 수정할 수 없음
• 애니메이션을 추가할 수 없음

PNG는 '고정된' 이미지입니다. 향후 변경을 위해 원본 SVG를 보관하세요.

상호작용성 손실

SVG는 다음을 지원합니다:

• 마우스 이벤트 (onclick, onmouseover)
• JavaScript 조작
• CSS 애니메이션
• 이미지 내부 링크

이 모든 것이 PNG로 변환 시 손실됩니다. 상호작용이 중요하다면 SVG를 직접 사용하세요.

배율 고정

무한 확장성은 SVG의 주요 장점입니다. PNG는 이미지를 특정 해상도로 고정합니다. 원본 크기 이상으로 PNG를 확대하면 흐려집니다.

권장 사항: 여유 있는 해상도로 PNG를 만드세요. 작은 이미지를 확대하는 것보다 큰 이미지를 축소하는 것이 좋습니다.

글꼴 의존성

SVG의 텍스트는 시스템 글꼴로 렌더링됩니다. 변환 서버에 특정 글꼴이 없으면 텍스트가 폴백 글꼴로 표시되어 디자인이 왜곡될 수 있습니다.

해결책:

• 변환 전에 벡터 편집기에서 텍스트를 경로(text-to-path)로 변환
• 일반적인 시스템 글꼴 사용
• base64를 통해 SVG에 글꼴 임베드

SVG 내보내기용 대체 포맷

SVG를 JPG로

투명도가 필요 없다면 JPG가 더 작은 파일 크기를 제공합니다. 그러나 JPG는 손실 압축을 사용하므로 그래픽 요소의 선명한 가장자리에 아티팩트가 생길 수 있습니다.

SVG를 WebP로

WebP는 품질과 크기의 균형이 좋은 현대적인 포맷입니다. 투명도를 지원하고 PNG보다 작습니다. 그러나 WebP의 호환성은 PNG보다 낮습니다.

SVG를 PDF로

인쇄용으로 PDF는 래스터화 없이 SVG의 벡터 특성을 유지합니다. 그러나 PDF는 웹 컨텍스트에서 사용하기 어렵습니다.

SVG 유지

대상 플랫폼이 SVG를 지원하면 포맷을 변경하지 마세요. SVG는 최소 크기와 무한 확장성을 보장합니다.

SVG 준비 권장 사항

최적의 파일 구조

• viewBox 사용 - 크기와 독립적인 좌표계 정의
• 경로 수 최소화 - 가능한 경우 통합
• 숨겨진 요소 제거 - 어차피 PNG에 포함되지 않음
• 그라데이션 최적화 - 복잡한 그라데이션은 렌더링 시간 증가

변환 전 확인

1. 브라우저에서 SVG 열기 - 래스터화 후 모습을 확인
2. 텍스트 표시 확인 - 모든 글꼴이 로드되어야 함
3. 투명도가 올바른지 확인 - 배경이 실제로 투명해야 함
4. 세부 정보 평가 - 작은 배율에서 미세한 요소가 손실될 수 있음

배율 선택

• 화면용 - scale=1 또는 레티나용 scale=2
• 인쇄용 - 필요한 DPI와 물리적 크기에서 계산
• 아이콘용 - 플랫폼 사양에 따른 정확한 픽셀 크기
• 아카이브용 - 여유있게, scale=4가 모든 목적에 충분한 품질 보장