SVG에 픽셀이 보이는 이유와 해결 방법

SVG는 크기를 바꿔도 깔끔해야 하므로 블록 형태의 가장자리가 보인다면 흔한 세 원인부터 확인하세요. 파일에 실제 픽셀이 있거나, 앱이 미리보기나 가져오기를 래스터화하거나, 실제 벡터가 작은 픽셀 격자에서 부드럽게 렌더링될 수 있습니다. 원인마다 해결법이 다르며 짧은 진단으로 구분할 수 있습니다. 이 글은 확대하면 픽셀이 보이는 PNG나 JPG 로고를 다루지는 않습니다. 그 파일은 원래 SVG가 아니며 별도의 해결법이 있습니다.

30초 진단

• 두 뷰어에서 크게(500% 이상) 확대하세요. 모든 뷰어에서 블록이 보이면 래스터 콘텐츠를 의심하세요. 한 앱에서만 보이면 그 앱이 미리보기를 래스터화할 가능성이 높습니다.
• 텍스트 편집기에서 SVG를 여세요. 긴 data:image/png;base64,… 데이터의 <image> 태그가 있으면 “벡터”가 비트맵을 포장한 것입니다.
• 파일 확인으로 판단하세요. 확대는 의심을 만들고 <image> 요소나 사각형 이미지 객체는 포함된 픽셀을 확인합니다.

원인 1: SVG 안에 픽셀이 있습니다

이미지 포함의 함정입니다. SVG는 컨테이너 형식이며 SVG 2 명세는 <image> 요소로 래스터 콘텐츠를 포함하거나 참조할 수 있게 합니다. 연결된 PNG, 포함 데이터, 중첩 SVG를 구분하려면 혼합 콘텐츠 SVG 점검을 사용하세요. 도구들은 이 기능을 여러 방식으로 사용합니다.

• 가짜 변환. 일부 “PNG-SVG” 도구는 추적하지 않습니다. 비트맵을 <image> 태그에 감싸 .svg 확장자로 반환합니다. 원래 PNG이므로 확대 품질도 원본과 똑같이 나쁩니다.
• 어려운 부분을 래스터화하는 내보내기. 디자인 앱은 가능한 부분을 경로로 내보내고 불가능한 그림자, 흐림, 메시 그라디언트, 이미지 채우기를 조용히 래스터화합니다. 로고의 한 곡선이나 효과만 흐린, 디자인 포럼에 많은 “부분적인 픽셀” 문제가 생깁니다.
• 사진 콘텐츠. 사진은 깔끔한 경로가 될 수 없으므로 SVG로 “변환”하는 도구는 대신 포함하거나 포스터화한 근사를 만듭니다. 지도 도구는 명암이 본질적으로 연속적인 색조라 명암 레이어에 이를 의도적으로 쓰기도 하며 적절한 용도입니다.
• 형식 포장. 파일에 한 앱은 읽지만 다른 앱은 못 읽는 벡터 데이터가 있을 수 있습니다. 이해하지 못하는 데이터에서 앱이 저장된 래스터 미리보기로 돌아가면 한 프로그램에서는 픽셀, 다른 프로그램에서는 깔끔한 벡터를 봅니다.

확인 방법: 텍스트 편집기에서 .svg를 열어 <image를 검색하세요. base64 데이터가 단서입니다. Inkscape나 Illustrator에서 흐린 영역을 클릭해 경로가 아니라 사각형 “이미지” 객체로 선택되면 같은 결론입니다. AI 도구와 내보내기의 가짜 SVG에도 같은 확인을 적용하며 1분이 채 걸리지 않습니다.

해결: 실제로 래스터 콘텐츠를 벡터화해 픽셀을 경로로 만들어야 합니다. 원본 이미지나 포함 이미지를 실제 이미지-벡터 변환에 넣고 <image> 요소를 추적 결과로 교체하세요. 포함 콘텐츠가 사진이면 벡터화 자체에 한계가 있습니다. 때로는 래스터에 맞는 곳에서 래스터를 유지하는 것이 올바른 해결입니다.

파일 자체의 단서

원인 2: 파일은 정상이고 뷰어가 래스터화합니다

브라우저나 Inkscape에서 경로가 선명하고 한 앱에서만 블록이 보인다면 파일 편집을 멈추세요. 그 앱의 가져오기나 미리보기 과정이 문제입니다.

• 일부 앱의 가져오기 과정은 가져오기나 미리보기 크기로 SVG를 래스터화합니다. 이후 캐시 이미지를 키우면 비트맵을 확대합니다. 앱에서 목표 해상도로 가져오거나 렌더링해야 합니다.
• After Effects는 레이어 변환에 따라 벡터 레이어를 연속 래스터화할 수 있습니다. Adobe는 벡터 레이어의 Continuously Rasterize 스위치를 설명합니다. 컴포지션 미리보기만 거칠다면 SVG 변경 전에 미리보기 해상도와 레이어 스위치를 확인하세요.
• Illustrator는 Pixel Preview로 의도적으로 그림을 표시할 수 있습니다. 경로 자체에 픽셀이 있다고 판단하기 전에 View > Pixel Preview를 끄세요.
• 썸네일과 미리보기. 파일 관리자 썸네일과 빠른 미리보기는 저해상도 래스터화이며 파일 상태를 알려 주지 않습니다.

공통 시험은 같은 파일을 브라우저나 Inkscape에서 여는 것입니다. 그곳에서 선명하면 SVG는 정상이고 다른 앱의 가져오기나 미리보기 설정에 해결책이 있습니다.

게임 자산에는 원본에 벡터 경로가 없다고 가정하기 전에 Godot SVG 가져오기와 래스터화 또는 편집기·UI 시스템에 맞는 Unity SVG 가져오기를 확인하세요.

원인 3: 실제 벡터가 작은 크기에서 부드럽게 보입니다

아이콘은 16~24픽셀로 표시되며 수학적으로 완벽한 곡선도 거친 픽셀 격자에 배치해야 합니다. 안티앨리어싱이 가장자리 픽셀을 회색으로 나누어 특히 가는 스트로크와 반 픽셀 위치에서 “조금 흐릿하게” 보입니다. 확대하면 완전히 선명한 벡터 가장자리가 보이므로 이미지 포함 문제와 구분할 수 있습니다.

디자인에서 해결하세요. 목표 크기에서 수평·수직 가장자리를 정수 픽셀에 맞추고 스트로크 너비를 정수 픽셀 값으로 유지하며 사용하는 크기용으로 그린 아이콘 세트를 선택하세요. 디자인 도구의 지나치게 정밀한 경로 데이터는 작은 크기의 흐림을 악화할 수 있고 단순한 경로가 더 예측 가능하게 렌더링됩니다.

원인과 해결 한눈에 보기

SVG에 픽셀이 들어가지 않게 하는 방법

예방은 주로 변환이나 내보내기 시점에 이루어집니다. SVG를 사용하기 전에 텍스트 편집기에서 한 번 확인하세요. <path> 요소는 좋고 <image> 데이터는 벡터가 아닙니다. 이미지 변환에서는 포장 대신 추적하는 변환기를 사용하고 개별 도형을 선택해 결과를 확인하세요. 디자인 도구의 내보내기에서는 먼저 효과를 경로로 평탄화하거나 확장하세요. 벡터로 표현하지 못하는 것은 픽셀로 전달됩니다. SVG가 실제로 무엇인지 기억하세요. 확장자는 형식에 관한 약속이지 내용에 관한 약속이 아닙니다.

PerfectVector로 진행하는 방법

PerfectVector는 이미지를 포장하지 않고 실제 경로로 추적합니다. PNG나 JPG를 올리면 선택하고 색상을 바꾸고 계속 확대할 수 있는 도형을 얻으며, 각 색상은 별도의 편집 가능한 객체이고 파일 어디에도 <image> 요소가 없습니다. “SVG”가 포장된 비트맵이었다면 원본을 제대로 변환하고 같은 텍스트 편집기 확인을 적용하세요. 차이를 한 번 보는 것이 다시 속지 않는 가장 빠른 방법입니다. 처음 변환은 무료이고 신용카드가 필요하지 않습니다.

FAQ

SVG를 확대하면 픽셀이 보이는 이유는 무엇인가요? 일부 앱이 미리보기를 래스터화하므로 확대만으로는 픽셀 포함을 증명하지 못합니다. 브라우저나 Inkscape에서 열고 소스의 <image> 요소를 확인하거나 흐린 부분이 사각형 이미지 객체인지 선택해 보세요. 포함 래스터가 확인되면 해당 콘텐츠를 벡터화하고 이미지 요소를 교체하세요.

SVG에 포함 이미지가 있는지 어떻게 알 수 있나요? 텍스트 편집기에서 <image를 검색하세요. 긴 data:image/png;base64 문자열은 파일에 포함된 비트맵입니다. Inkscape나 Illustrator에서 흐린 부분이 경로 대신 사각형 이미지 객체로 선택되는지도 확인할 수 있습니다.

브라우저에서는 괜찮고 한 앱에서만 픽셀이 보이는 이유는 무엇인가요? 앱이 래스터화하기 때문입니다. 게임 엔진은 가져오기 크기로 SVG를 래스터화하고 After Effects 미리보기는 컴포지션 해상도로 처리하며 일부 앱은 기본적으로 포함 이미지를 블록 형태 보간으로 렌더링합니다. 브라우저나 Inkscape에서 선명하면 파일은 정상입니다. 앱 설정을 조정하세요.

이미지가 포함된 SVG를 고칠 수 있나요? 네. 원본 래스터나 추출한 포함 이미지를 실제 벡터화 도구에 넣고 추적 결과를 이미지 요소 대신 사용하세요. 사진은 깔끔한 경로로 줄어들지 않으므로 충실한 복사보다 양식화한 벡터 근사를 예상하세요.

작은 SVG 아이콘이 흐릿한 이유는 무엇인가요? 대개 포함 이미지보다 픽셀 격자 흐림입니다. 16~24픽셀에서는 안티앨리어싱이 정렬되지 않은 가장자리를 회색 픽셀로 만듭니다. 목표 크기에서 가장자리와 스트로크 너비를 정수 픽셀에 맞추면 선명해집니다. 확대해 경로 자체가 선명한지 확인하세요.

PNG-SVG 변환은 항상 실제 벡터를 만드나요? 아니요. 일부 도구는 실제로 경로로 추적하고 일부는 SVG 컨테이너에 PNG를 포장하기만 합니다. 첫 경우만 깔끔하게 크기를 바꿀 수 있습니다. 변환 파일의 이미지 태그를 확인하고 결과에 편집 가능한 도형을 보여 주는 변환기를 선택하세요.

Sources

1. W3C: SVG 2 포함 콘텐츠 — SVG <image> 요소와 문서 안의 래스터 콘텐츠를 정의합니다.
2. Adobe Illustrator: 그림 보기 — Pixel Preview와 다른 표시 모드를 설명합니다.
3. Adobe After Effects: 레이어 — 벡터 레이어의 Continuously Rasterize 스위치를 설명합니다.
4. Adobe Illustrator: 픽셀에 정확히 맞는 그림 만들기 — 작은 그림의 픽셀 격자 정렬을 설명합니다.

---

작업 파일이 의심스럽나요? 확대 시험 후 원본 이미지를 실제 경로 기반 SVG로 변환해 비교하세요. 픽셀은 숨을 수 있지만 경로는 확인할 수 있습니다.