가장자리 품질을 지키면서 JPG를 SVG로 변환하는 방법
JPG는 손실 압축 형식이므로 무심코 추적하면 압축 노이즈가 지저분한 벡터 가장자리가 됩니다. 깔끔하고 확대 가능한 SVG를 만드는 방법과 변환을 피할 때를 알아봅니다.
목차
래스터 이미지를 벡터 도형으로 추적하면 JPG를 SVG로 바꿀 수 있습니다. 주의할 점은 일반적인 JPEG 인코딩이 손실 압축이라는 것입니다. 압축은 블록 경계, 날카로운 가장자리 주변의 링잉, 기타 흔적을 남길 수 있으며, 추적 도구는 이를 이미지 디테일로 해석할 수 있습니다. (JPEG 개요, ITU-T T.81 사양) 따라서 "JPG를 어떻게 변환할까"뿐 아니라 "JPG에서 어떻게 깔끔한 SVG를 얻을까"를 생각해야 합니다.
그 방법과 JPG가 PNG보다 세심한 처리가 필요한 이유, 아예 변환하지 않는 편이 좋은 경우를 설명합니다.
핵심만 살펴보기
- 가지고 있는 가장 좋은 품질의 JPG로 시작하세요. 압축이 적을수록 더 깔끔하게 추적할 수 있습니다.
- 평면적이고 대비가 높은 작품인 로고, 아이콘, 단순한 일러스트는 잘 변환됩니다. 사진은 그렇지 않습니다.
- 노드가 적고 깔끔한 경로로 벡터화한 다음, JPG 압축으로 생긴 여분의 색상을 합치세요.
- 결과를 확인하세요. 편집 가능한 경로, 선명한 가장자리, 합리적인 색상 수가 필요합니다.
- JPG를 SVG로 변환하는 도구로 지금 시험할 수 있습니다.
JPG가 PNG보다 까다로운 이유
PNG는 이미지 샘플을 무손실로 저장할 수 있으므로 다시 저장해도 JPEG식 압축 흔적이 생기지 않습니다. JPG는 보통 연속 명암 이미지에 사용되며 파일 크기를 줄이기 위해 이미지 정보를 버릴 수 있습니다. 품질 설정과 원본에 따라 그 압축이 블록 형태의 흔적과 가장자리 주변의 희미한 링잉으로 나타나며, 원래 평면 디자인에 없던 거의 같은 색상도 추가될 수 있습니다. W3C PNG 3 사양을 참고하세요.
JPG를 벡터화할 때 추적 도구가 이런 흔적을 실제 디테일로 오인하면 흐릿한 가장자리, 불필요한 작은 점, 여분의 색상이 생깁니다. 원본과 추적 방법이 모두 결과에 영향을 줍니다. PNG에서 시작한다면 품질 손실 없이 PNG를 SVG로 변환하는 방법을 참고하세요. JPEG 압축 문제를 제외하면 기본 원리는 같습니다. 현대 웹에서 흔히 접하는 세 번째 형식인 WebP에도 고유한 변환 주의점이 있습니다.
잘 변환되는 이미지와 그렇지 않은 이미지
JPG는 이미지에 따라 벡터화가 잘되기도 하고 잘되지 않기도 합니다.
| 적합한 JPG | 적합하지 않은 JPG |
|---|---|
| 로고, 아이콘, 모노그램 | 사진과 인물 사진 |
| 평면적이고 대비가 높은 일러스트 | 그라데이션, 부드러운 그림자, 발광 효과 |
| 선화와 레터링 | 심하게 압축되거나 해상도가 낮은 파일 |
| 소수의 단색으로 이루어진 이미지 | 복잡하고 질감이 많은 풀컬러 장면 |
JPG가 왼쪽 열에 해당한다면 변환하세요. 사진이거나 그라데이션이 많다면 벡터화 과정에서 색상 덩어리로 단순화됩니다. 래스터로 유지하거나 먼저 작품을 평면 도형으로 다시 구성하세요.
JPG를 SVG로 변환하는 단계별 방법
- 가장 좋은 원본으로 시작합니다. 고품질 고해상도 JPG는 저장, 공유, 재압축을 수없이 반복한 파일보다 훨씬 잘 추적됩니다. 원본 PNG나 벡터가 있다면 그것을 사용하세요.
- 상태가 거칠다면 먼저 정리합니다. 작품 부분으로 자르고, 압축 노이즈가 심하면 대비를 조금 높여 도형이 배경과 뚜렷하게 구분되도록 합니다.
- 벡터화합니다. JPG를 SVG로 변환하는 도구에 JPG를 넣어 이미지를 벡터 경로로 재구성합니다. 모든 압축 흔적을 따라가는 빽빽한 추적보다 노드가 적고 깔끔한 경로를 목표로 하세요.
- 색상을 단순화합니다. JPG 압축은 거의 같은 색상을 추가할 수 있습니다. 작품이 실제로 사용하는 몇 가지 색상으로 합치세요. 단순한 팔레트가 검토하고 편집하기 쉽습니다.
- 다운로드하고 확인합니다. 아래 점검표를 참고하세요.
PerfectVector 사용 예
JPG에서는 의도한 도형과 압축 노이즈를 구별하는 것이 목표입니다. PerfectVector는 이미지를 벡터 경로로 재구성하고, 내장 색상 편집기로 원본이나 추적 과정에서 추가된 여분의 색상을 합칠 수 있게 합니다. JPG를 SVG로 변환한 다음 직접 경로, 노드 수, 팔레트를 검사하세요. 신용카드 없이 첫 이미지를 무료로 변환할 수 있습니다.
빠른 결과 점검. 잘 변환된 JPG-SVG 결과에는 다음이 있습니다.
.svg로 감싼 JPG가 아니라 편집 가능한 경로가 있습니다. SVG의<image>요소에는 래스터 콘텐츠를 경로로 바꾸지 않고 삽입할 수 있습니다. W3C 삽입 콘텐츠 사양을 참고하세요.- 압축에 의한 번짐이나 작은 점이 남지 않은 선명한 가장자리가 있습니다.
- 노드 수가 적습니다. 수천 개의 점이 아니라 깔끔한 곡선입니다. 자세한 내용은 노드 수가 중요한 이유를 참고하세요.
- 팔레트가 정돈되어 있습니다. 압축이 추가한 여분의 색상 없이 의도한 색상만 있습니다.
변환기를 사용하지 않는 편이 좋은 경우
벡터화가 모든 JPG에 적합한 것은 아닙니다.
- 사진은 포스터처럼 평평한 색상 덩어리가 됩니다. 래스터 이미지로 유지하세요.
- 그라데이션이나 질감이 많은 작품은 미묘함을 잃습니다. 벡터가 필요하다면 평면 도형으로 다시 구성하세요.
- 너무 작거나 심하게 압축된 파일은 되살릴 수 없습니다. 흐릿한 JPG를 추적하면 흐릿한 SVG가 됩니다. 더 좋은 원본을 찾거나 작품을 다시 만드세요.
판단 기준은 다른 벡터화와 같습니다. 사진보다 평면적인 일러스트 작품에 적합합니다. 처음 접한다면 이미지 벡터화란 무엇인지부터 살펴보세요.
자주 묻는 질문
JPG를 SVG로 무료 변환할 수 있나요?
네. JPG를 변환기에 업로드하고 색상을 단순화한 뒤 SVG를 다운로드하세요. 신용카드 없이 첫 이미지를 무료로 변환할 수 있습니다. 다만 결과가 JPG를 .svg에 삽입한 것이 아니라 실제로 추적한 벡터, 즉 편집 가능한 경로인지 확인하세요.
SVG로 변환한 뒤 JPG가 각지거나 지저분해 보이는 이유는 무엇인가요? JPG는 손실 압축 형식이므로 압축 흔적과 가장자리 번짐이 있습니다. 추적은 작품과 함께 그 흔적도 포착합니다. 더 좋은 품질의 JPG에서 시작하고, 대비를 높이고, 노드가 적고 깔끔한 경로로 변환해 노이즈를 줄이세요.
SVG로 변환할 때 JPG와 PNG 중 어느 쪽이 좋은가요? 무손실 PNG는 압축 흔적이 없어 더 깔끔한 출발점입니다. 하지만 평면적이고 대비가 높은 작품의 고품질 JPG도 잘 변환됩니다. 형식보다 원본의 품질이 중요합니다.
JPG 사진을 SVG로 변환할 수 있나요? 가능하지만 보통은 권장하지 않습니다. 사진에는 그라데이션과 명암이 너무 많아 깔끔한 도형이 되기 어렵고, 단순화된 색상 덩어리나 거대한 파일이 됩니다. 벡터화는 로고, 아이콘, 일러스트에 적합합니다.
색상을 유지하면서 JPG를 SVG로 변환하려면 어떻게 하나요? 컬러 추적을 지원하는 변환기를 사용한 뒤 압축으로 생긴 거의 같은 색상을 합쳐 디자인에 필요한 몇 가지 색상만 남기세요. 색상이 적고 깔끔할수록 SVG가 가벼워지고 편집하기 쉬워집니다.
출처
- JPEG: JPEG 1 표준 개요: JPEG 정지 이미지 코딩 표준과 일반적인 손실 모드의 공식 개요입니다.
- ITU-T: 권고 T.81: 압축 및 디코딩 동작에 대한 규범적 JPEG 사양입니다.
- W3C: Portable Network Graphics (PNG) 사양 제3판: PNG의 무손실 이미지 표현과 알파 지원에 대한 현행 표준입니다.
- W3C: SVG 삽입 콘텐츠: 래스터 이미지를 벡터 경로로 바꾸지 않고 SVG에 삽입할 수 있음을 보여 주는 표준입니다.
JPG 로고나 일러스트가 픽셀 상태로 남아 있나요? 깔끔하고 확대 가능한 SVG로 변환하세요. 벡터화하고 색상을 단순화한 뒤 몇 초 만에 다운로드할 수 있습니다.
