WebP를 SVG로 변환: 실제 편집 가능한 경로로 추적하기

WebP는 JPG나 PNG 같은 픽셀 격자인 래스터 이미지입니다. Google의 WebP 문서는 손실 및 무손실 WebP를 모두 이미지 압축 형식으로 정의하며, SVG는 도형과 경로로 벡터 그래픽을 정의합니다. 따라서 픽셀을 벡터 도형으로 바꾸는 "SVG로 저장" 기능은 없습니다. 먼저 이미지를 도형과 경로로 추적해야 합니다. (Google WebP 개요, W3C SVG 2)

WebP를 실제로 깔끔하고 편집 가능한 SVG로 변환하는 방법, 주의할 점, 변환할 필요가 없는 경우를 알아봅니다.

원본이 WebP가 아니라 AVIF라면 원본 파일을 유지하고, 추적 전에 형식을 변환하는 단계를 추가하는 대신 AVIF를 SVG로 변환하는 도구를 사용하세요.

핵심만 살펴보기

• WebP는 래스터이므로 벡터로 "저장"하는 대신 벡터로 추적해야 합니다.
• 가짜 벡터에 주의하세요. WebP를 .svg 안에 삽입하는 변환기를 쓰면 여전히 픽셀이 드러납니다.
• WebP에는 손실과 무손실이 있습니다. 손실 파일에는 압축 노이즈가 있으므로 가장 깨끗한 원본에서 시작하세요.
• 평면적이고 대비가 높은 작품은 잘 변환됩니다. 사진은 그렇지 않습니다.
• WebP를 SVG로 변환하는 도구로 추적한 뒤 실제로 편집 가능한지 확인하세요.

대부분의 변환기가 설명하지 않는 부분

검색 상위 결과가 명확하게 설명하지 않는 경우가 있어, 실제로 무슨 일이 일어나는지 분명히 할 필요가 있습니다.

• WebP는 픽셀을 저장합니다. WebP 형식은 손실 및 무손실 압축, 투명도, 애니메이션을 지원하지만 여전히 래스터입니다. Google WebP 컨테이너 사양을 참고하세요.
• SVG는 수학 정보를 저장합니다. 어떤 크기에서도 선명한 점, 경로, 곡선입니다.

애니메이션에는 별도의 판단이 필요합니다. 움직이는 래스터를 SVG로 바꾼다고 움직임이 자동으로 보존되지는 않습니다. 애니메이션 GIF를 SVG로 변환하는 안내는 한 프레임을 추적하는 것과 SVG 애니메이션을 다시 만드는 것의 차이를 설명합니다.

원본이 GIF이고 편집 가능한 정지 이미지 하나가 필요하다면 GIF 프레임-SVG 변환기에서 추적 전에 원하는 순간을 선택하세요. 움직임도 필요하다면 애니메이션을 별도로 보관합니다.

두 형식 사이에는 정보를 잃지 않는 단순한 "변환"이 없습니다. WebP에서 SVG로 바꾼다는 것은 픽셀을 도형으로 다시 그리는 것이며, 이것이 벡터화 또는 추적입니다. 실제 변환에 파일 이름 변경이 아니라 추적 도구가 필요한 이유입니다.

피해야 할 함정: SVG 파일은 <image> 요소로 래스터 이미지를 삽입할 수 있습니다. 이런 파일에는 .svg 확장자가 있지만, 삽입된 픽셀이 편집 가능한 경로로 바뀌지 않았으며 확대하면 여전히 흐려질 수 있습니다. SVG 삽입 콘텐츠에 대한 W3C 사양을 참고하세요. 필요한 것은 이미지를 실제 경로로 추적하는 도구입니다.

손실과 무손실에 따라 결과가 달라집니다

WebP에는 손실과 무손실 종류가 있으며, 어느 쪽인지가 추적에 영향을 줍니다.

• 손실 WebP는 웹에서 흔히 내보내는 형식으로, JPG처럼 압축하므로 압축 흔적과 부드럽고 지저분한 가장자리가 있습니다. 추적이 이를 포착하므로 가장 좋은 품질의 버전에서 시작하세요. JPG를 SVG로 변환할 때와 같은 문제입니다.
• 무손실 WebP는 PNG처럼 가장자리를 선명하게 유지해 깔끔하게 추적됩니다. 깨끗한 원본을 사용하는 절차는 품질 손실 없이 PNG를 SVG로 변환하는 방법을 참고하세요.

WebP는 알파 채널을 통한 투명도도 지원합니다. 배경이 투명한 이미지라면 이를 보존하는 변환기를 사용하세요. 그렇지 않으면 도형 뒤에 원치 않는 채워진 사각형이 생깁니다. Google WebP 무손실 비트스트림 사양을 참고하세요.

WebP를 SVG로 변환하는 단계별 방법

1. 가장 좋은 원본으로 시작합니다. 원본 고품질 WebP를 사용하세요. 심하게 압축된 손실 파일이라면 노이즈가 더 많은 추적 결과를 예상해야 합니다.
2. 일반 파일 변환기 대신 실제 벡터화 도구를 사용합니다. 래스터를 삽입하는 도구가 아니라, 이미지를 경로로 추적하는 도구가 필요합니다.
3. 벡터화합니다. WebP를 SVG로 변환하는 도구에 WebP를 넣어 깔끔하고 노드가 적은 경로로 재구성합니다.
4. 색상을 단순화하고 투명도를 유지합니다. 손실 WebP가 추가한 거의 같은 색상을 합치고, 투명한 배경이 그대로 투명한지 확인합니다.
5. 다운로드하고 확인합니다. 아래 점검을 참고하세요.

PerfectVector 사용 예

WebP에서 목표는 픽셀을 위장한 것이 아니라, 편집할 수 있는 깔끔한 경로의 실제 벡터입니다. PerfectVector는 그런 결과를 만듭니다. WebP를 매끄럽고 노드가 적은 경로로 추적하고, 투명도를 유지하며, 손실 WebP가 추가한 여분의 색상을 합칠 수 있는 색상 편집기를 제공합니다. WebP를 깔끔한 SVG로 변환하고 직접 경로를 검사할 수 있습니다. 신용카드 없이 첫 이미지를 무료로 변환할 수 있습니다.

빠른 결과 점검. 실제 WebP-SVG 변환에는 다음이 있습니다.

• WebP를 .svg에 삽입한 것이 아니라 편집 가능한 경로입니다. 확대해도 선명해야 합니다.
• 노드 수가 적습니다. 수천 개의 점이 아니라 깔끔한 곡선입니다. 자세한 내용은 노드 수 안내를 참고하세요.
• 원본에 투명도가 있다면 불필요한 배경 사각형 없이 투명도가 보존됩니다.
• 팔레트가 정돈되어 있습니다. 손실 WebP가 추가한 여분의 색상 대신 의도한 색상만 있습니다.

변환기를 사용하지 않는 편이 좋은 경우

추적이 모든 WebP에 적합하지는 않습니다.

• 사진과 사실적인 이미지는 포스터 같은 색상 덩어리로 단순화되므로 래스터로 유지하세요.
• 그라데이션이나 질감이 많은 작품은 미묘함을 잃습니다. 벡터가 필요하다면 평면 도형으로 다시 구성하세요.
• 너무 작거나 심하게 압축된 WebP는 되살릴 수 없습니다. 더 좋은 원본을 찾거나 작품을 다시 만드세요.

벡터화는 사진이 아니라 로고, 아이콘, 단순한 그래픽 같은 평면적인 일러스트 작품에 적합합니다. 처음 접하는 개념이라면 이미지 벡터화의 의미부터 살펴보세요.

자주 묻는 질문

WebP를 그냥 SVG로 저장할 수 있나요? 아니요. WebP는 픽셀로 된 래스터 이미지이고, SVG는 도형과 경로로 된 벡터입니다. "다른 이름으로 저장"만으로 한쪽이 다른 쪽으로 바뀌지는 않습니다. 이미지를 벡터 도형으로 추적해야 하며, 그것이 벡터화 도구가 하는 일입니다.

SVG로 "변환"한 WebP에 여전히 픽셀이 보이는 이유는 무엇인가요? 일반 변환기가 추적하는 대신 WebP를 .svg 안에 삽입했을 가능성이 높습니다. 가짜 벡터이므로 여전히 픽셀이 보입니다. 이미지를 실제로 편집 가능한 경로로 추적하는 도구를 사용하세요.

WebP를 SVG로 무료 변환할 수 있나요? 네. WebP를 벡터화 도구에 업로드하고 색상을 단순화한 뒤 SVG를 다운로드하세요. 신용카드 없이 첫 이미지를 무료로 변환할 수 있습니다. 다만 WebP를 .svg로 감싼 것이 아니라 실제로 추적한 벡터인지 확인하세요.

WebP의 투명도가 SVG에 유지되나요? 이를 보존하는 변환기를 사용하면 가능합니다. WebP는 투명도를 지원하고, 좋은 추적은 배경을 투명하게 유지하므로 원치 않는 채워진 사각형이 생기지 않습니다.

WebP 사진을 SVG로 변환할 수 있나요? 가능하지만 보통은 권장하지 않습니다. 사진에는 명암과 그라데이션이 너무 많아 깔끔한 도형이 되지 않고 단순화된 색상 덩어리나 거대한 파일이 됩니다. 벡터화는 로고, 아이콘, 일러스트에 적합합니다.

출처

1. Google for Developers: 웹을 위한 이미지 형식: WebP의 손실, 무손실, 알파 기능에 대한 공식 개요입니다.
2. Google for Developers: WebP 컨테이너 사양: 정지 이미지, 애니메이션, 투명도에 대한 형식 세부 사항입니다.
3. W3C: Scalable Vector Graphics (SVG) 2: SVG의 벡터 그래픽 모델을 정의하는 표준입니다.
4. W3C: SVG 삽입 콘텐츠: SVG가 래스터 이미지를 경로로 바꾸지 않고 삽입할 수 있음을 보여 주는 사양입니다.

---

크기를 늘려야 하는 WebP 로고나 그래픽이 있나요? 실제 편집 가능한 SVG로 변환하세요. 추적하고 색상을 단순화한 뒤 몇 초 만에 다운로드할 수 있습니다.