SVG에 래스터 이미지가 들어 있는지 확인하는 방법

네. SVG에 래스터 이미지가 들어갈 수 있습니다. 하나의 문서에 벡터 경로와 픽셀을 함께 담을 수도 있고, PNG나 JPEG를 감싼 파일에 불과할 수도 있습니다. .svg 확장자는 컨테이너 형식을 알려 줄 뿐, 보이는 모든 부분이 벡터인지는 알려 주지 않습니다.

객체와 파일 소스를 모두 살펴보는 것이 확실한 확인 방법입니다. 확대는 문제를 발견하는 데 도움이 되지만, 프로그램이 미리보기를 래스터화한 것인지 실제로 SVG에 픽셀이 저장되어 있는지는 알려 주지 못합니다.

WPF 프로그램의 경우 WPF의 SVG 표현 가이드는 SVG 소스, WPF 자체의 그리기 객체, 비트맵 전달을 구분합니다. 래스터화된 표시를 원본 파일의 증거로 취급하기 전에 프로그램이 무엇을 받는지 확인하세요.

SVG에 들어갈 수 있는 내용

SVG는 XML 기반 그래픽 형식이며 경로보다 더 넓은 콘텐츠 모델을 갖습니다. SVG 2 포함 콘텐츠 명세는 참조한 전체 파일을 사각형 안에 배치하는 <image> 요소를 정의합니다. 그 파일은 PNG, JPEG, 다른 SVG일 수 있습니다.

따라서 일반적으로 네 가지 구조가 만들어집니다.

혼합 콘텐츠가 무조건 잘못된 것은 아닙니다. 지도에서 라벨과 경계는 경로로 만들고 명암이 있는 위성 레이어는 래스터로 유지할 수 있습니다. 제품 그래픽에서 사진 위에 편집 가능한 배지를 놓을 수도 있습니다. 문제는 변환 결과로 편집 가능한 경로를 기대했는데 다른 컨테이너에 담긴 픽셀을 받았을 때입니다.

확인 1: 객체 살펴보기

Illustrator, Inkscape, Affinity Designer 등 Objects나 Layers 패널이 있는 편집기에서 SVG를 여세요. 래스터로 의심되는 영역을 선택하세요.

• 이미지로 표시되는 사각형 객체 하나는 이미지 콘텐츠라는 강한 증거입니다.
• 그림의 실제 가장자리를 따라 노드가 보이면 벡터 도형입니다.
• 클리핑 경로가 사각형 이미지를 가릴 수 있으므로 판단 전에 레이어나 객체 트리를 펼쳐 보세요.
• 다른 곳에 경로가 있다고 문서 전체가 벡터인 것은 아닙니다. 하나의 파일에 두 유형이 함께 있을 수 있습니다.

XML을 읽고 싶지 않은 디자이너에게 유용하지만 한 가지 한계가 있습니다. 사각형 <image> 객체가 다른 SVG를 참조할 수 있습니다. 소스를 확인하면 객체가 실제로 무엇을 불러오는지 알 수 있습니다.

확인 2: SVG 소스 살펴보기

복사본을 만든 뒤 일반 텍스트 편집기에서 .svg 파일을 여세요. <image를 검색하세요. 이미지 요소가 없다면 일반적인 이미지 포함 방식은 사용되지 않은 것입니다. 찾았다면 href 값을 읽어 보세요.

포함된 PNG는 흔히 다음과 같이 시작합니다.

<image href="data:image/png;base64,iVBORw0KGgo..." />

포함된 JPEG는 대개 data:image/jpeg;base64,로 시작합니다. MDN의 데이터 URL 참고 문서는 데이터가 URL에 직접 들어가며 선택적으로 Base64 인코딩을 사용한다고 설명합니다. 이 형식에서 읽기 어려운 데이터가 아주 길게 이어지는 것은 정상입니다.

연결된 래스터는 다음과 같은 형태입니다.

<image href="photos/product-shot.png" />

해당 PNG는 SVG 안에 저장되지 않습니다. 문서는 그 경로의 별도 파일에 의존합니다. 이미지 없이 SVG만 이동하거나 이메일로 보내면 그림이 사라질 수 있습니다.

마지막으로 다음은 래스터 콘텐츠의 증거가 아닙니다.

<image href="icons/mark.svg" />

MDN의 <image> 참고 문서는 이 요소가 래스터 형식이나 다른 SVG를 표시할 수 있다고 명시합니다. 분류하기 전에 미디어 유형이나 파일 확장자를 확인하세요.

SVG 내부 또는 외부의 세 가지 구조

이미지 포함과 연결은 서로 다른 문제입니다

Inkscape에서 그림을 가져올 때 연결하거나 포함할 수 있습니다. 그림 가져오기 가이드는 장단점을 명확하게 설명합니다. 연결하면 SVG가 작아지지만 그림의 위치에 의존하고, 포함하면 SVG가 독립적으로 완결되지만 크기가 커집니다.

이 차이는 파일을 전달할 때 중요합니다.

• 포함된 래스터: 하나의 파일로 전달할 수 있지만 여전히 해상도에 제약이 있고 예상보다 훨씬 큰 경우가 많습니다.
• 연결된 래스터: 별도로 업데이트하기 쉽지만 폴더, 컴퓨터, 웹사이트, 업체 사이에서 이동하면 연결이 끊기기 쉽습니다.
• 벡터 경로: 도형으로 편집할 수 있지만 처음부터 원본을 경로로 추적하거나 그렸을 때만 가능합니다.

포함은 파일 포장이지 벡터화가 아닙니다. Base64는 픽셀을 곡선으로 바꾸지 않습니다. 스톡 그림을 준비한다면 Adobe Stock 벡터 제출 점검에 따라 아트보드, 편집 가능성, 원본을 추가로 확인하세요.

확대만으로 충분하지 않은 이유

여러 뷰어에서 의심되는 영역을 크게 확대했을 때 픽셀 블록이 보인다면 래스터일 가능성이 높습니다. 그래도 뷰어가 정상적인 SVG를 썸네일, 캔버스, 인쇄 미리보기, 가져오기 캐시를 위해 래스터화할 수 있습니다. 반대로 고해상도 PNG가 포함되어 있으면 일반 확대율에서 매끄러워 보여 문서 안에 숨어 있어도 알아차리지 못할 수 있습니다.

확대는 증상 확인에 사용한 뒤 객체나 소스로 확정하세요. SVG에 픽셀이 보이는 이유는 포함 콘텐츠, 뷰어 동작, 작은 아이콘 렌더링을 구분합니다. 캔버스 프로그램에서는 이미지 노드 하나를 SVG 소스의 문제로 해석하기 전에 Konva의 이미지 및 편집 가능한 경로 가져오기를 비교하세요.

유지, 다시 연결, 교체 중 선택하기

픽셀이 의도된 것이라면 래스터 유지하기

사진, 스캔, 질감, 부드러운 조명, 복잡한 회화 세부 요소는 래스터 형식이 적합한 경우가 많습니다. 이미지를 벡터 라벨이나 오버레이와 결합하기 위해 SVG를 사용한다면 혼합 파일이 올바른 디자인일 수 있습니다. 최종 물리 크기에서 래스터의 해상도가 충분한지 확인하고 파일 자체로 완결되게 전달할지, 연결된 자산과 함께 묶을지 정하세요.

전달이 문제라면 다시 연결하거나 포함하기

다른 컴퓨터에서 연결된 이미지가 사라진다면 SVG와 이미지를 같은 상대 폴더 구조로 묶거나 전달 전에 이미지를 포함하세요. 사라진 리소스 문제를 해결하지만 이미지를 편집 가능한 경로로 만들지는 않습니다.

경로를 약속받았다면 래스터 교체하기

변환기가 평면 로고, 아이콘, 선화를 SVG 안에 감싸기만 했다면 원본 PNG나 JPEG를 찾으세요. 원본이 없다면 포함된 이미지를 추출하거나 해당 객체를 원래 크기로 내보내세요. 이후 이미지를 벡터 경로로 변환하고 도형을 확인한 뒤 <image> 객체를 검증된 벡터 결과로 교체하세요.

PerfectVector는 적합한 평면 그림을 편집 가능한 도형으로 재구성할 때 유용합니다. 연속적인 색조의 사진을 작고 충실한 경로 집합으로 마법처럼 바꾸지는 않습니다. 사진은 의도적으로 포스터화한 해석이 목적이 아니라면 래스터로 유지하세요. 승인된 SVG에서 PNG 전달용 복사본이 필요하다면 Sharp로 최종 픽셀 크기에 직접 렌더링하세요. 작은 PNG를 확대해도 해당 SVG에 포함된 래스터 이미지의 세부 정보는 늘어나지 않습니다.

Scratch 사용자는 또 다른 포장 파일을 내보내기 전에 Convert to Vector가 비트맵을 추적하지 않는 이유를 확인하세요.

내보내기에서 래스터화된 효과 다시 만들기

일부 SVG는 대부분 벡터이지만 래스터화된 그림자, 흐림, 질감, 지원되지 않는 효과 하나가 들어 있습니다. 그 효과를 편집 가능하고 호환성 있게 유지해야 하는지 결정하세요. 단순한 효과는 지원되는 벡터 기능으로 다시 만들거나 전달 해상도의 래스터로 의도적으로 평탄화하거나 제거하세요. 부드러운 그림자를 추적하면 더 나은 효과 대신 노이즈가 많은 도형이 만들어지는 경우가 많습니다.

혼합 SVG 전달 점검

웹사이트, 인쇄소, 커팅기, 협업자에게 보내기 전에 다음을 확인하세요.

1. 소스에서 <image, data:image/, .png, .jpg, .jpeg를 검색합니다.
2. 참조하는 각 리소스가 래스터, 벡터, 제거 대상 중 무엇이어야 하는지 확인합니다.
3. 연결된 파일을 잠시 이동하고 SVG를 다시 열어 끊어진 의존성을 확인합니다.
4. 중요한 그림을 선택하고 편집 가능해야 하는 부분이 경로인지 확인합니다.
5. 래스터의 원래 픽셀 치수를 최종 표시 또는 인쇄 크기와 비교합니다.
6. 전달할 복사본을 두 번째 프로그램에서 다시 엽니다.
7. 편집 가능성보다 외관이 중요하면 원본 소스와 래스터 확인용 파일을 보관합니다.

절단이나 제작 작업에서는 기계 파일에서 장식용 래스터 콘텐츠를 제거하고 절단용 SVG 사전 점검을 진행하세요. 커팅기는 경로를 따르며 포함된 사진을 절단 윤곽으로 바꾸지 않습니다.

FAQ

SVG에 PNG나 JPEG를 넣을 수 있나요? 네. SVG의 이미지 요소는 PNG나 JPEG를 별도 파일로 참조하거나 그 데이터를 SVG 안에 담을 수 있습니다. 래스터는 원래의 픽셀 기반 동작을 유지합니다.

이미지 태그가 있으면 항상 SVG에 래스터 이미지가 있는 건가요? 아니요. 이미지 요소는 다른 SVG를 참조할 수도 있습니다. 분류하기 전에 href 또는 이전 방식인 xlink:href 값에서 미디어 유형, 데이터 URL, 파일 이름을 확인하세요.

래스터가 포함되어 있는지 연결되어 있는지 어떻게 알 수 있나요? 포함된 이미지는 보통 href가 data:image로 시작하므로 바이트가 SVG 안에 저장됩니다. 연결된 이미지는 images/photo.png 같은 경로나 URL을 가지며 해당 별도 리소스에 의존합니다.

SVG에서 포함된 이미지를 제거할 수 있나요? 네. 불필요하면 삭제하거나 의도한 래스터 자산으로 교체하거나, 적합한 평면 그림을 벡터화해 결과 경로로 바꿀 수 있습니다. XML을 편집하기 전에 백업을 보관하세요.

SVG에 경로와 이미지가 함께 있는 이유는 무엇인가요? 혼합 SVG이기 때문입니다. 사진과 벡터 오버레이를 의도적으로 결합했거나 내보내기 도구가 효과를 래스터화했을 수 있습니다. 바꾸기 전에 어떤 부분에 편집 가능성이 필요한지 살펴보세요.

Sources

1. W3C — SVG 2 포함 콘텐츠 — <image> 요소, href, 참조할 수 있는 래스터 또는 SVG 리소스를 정의합니다.
2. MDN — SVG <image> — 지원하는 이미지 콘텐츠와 크기 동작의 실용적인 참고 자료입니다.
3. Inkscape 초보자 가이드 — 그림 가져오기 — 가져온 그림의 연결과 포함, 전달 호환성의 장단점을 설명합니다.
4. MDN — 데이터 URL — SVG 안에 이미지 데이터를 저장할 때 흔히 사용하는 data: 스킴을 설명합니다.

편집 가능한 경로가 있어야 할 곳에 포장된 비트맵이 있나요? 원본 평면 그림을 실제 벡터로 변환하고 SVG를 다시 열어 중요한 객체가 이제 도형으로 선택되는지 확인하세요.