SVG WebP 변환

SVG는 2001년 W3C 권고안이 되었으며 대부분의 로고와 아이콘에 알맞은 형식입니다. 몇 KB짜리 텍스트로 어떤 배율에서도 선명하게 유지됩니다. 문제는 파일이 내 코드 밖으로 나갈 때 생깁니다. WordPress와 여러 호스팅형 쇼핑몰 빌더는 SVG 업로드를 거부하고, Facebook, LinkedIn, X의 링크 미리보기는 비트맵으로 가져오며, 디자인 도구는 래스터 효과를 포함한 일러스트를 내보내 벡터 파일이 몇 MB짜리 마크업이 되기도 합니다.

Google이 2010년에 공개하고 Safari가 2020년 버전 14에서야 지원한 WebP는 바로 이런 용도의 비트맵입니다. 같은 모양에서 PNG보다 작고 진짜 알파 채널을 갖추고 있습니다. SVG를 최종 크기의 WebP로 바로 렌더링하면 큰 PNG로 내보냈다가 다시 변환하는 우회 과정을 건너뜁니다. 반대 방향이 필요하다면 WebP SVG 변환 페이지에서 그 방향에는 변환이 아니라 트레이싱이 필요한 이유를 설명합니다.

변환기는 SVG 자체의 width, height, viewBox를 읽은 뒤 지정한 너비로 모든 패스를 그리며, 높이는 가로세로 비율을 따릅니다. 최종 크기에서 그리기 때문에 가는 획과 작은 글자가 알맞은 배율에서 한 번만 안티앨리어싱됩니다. 작은 PNG를 나중에 확대하면 이만큼 깔끔하게 보이지 않습니다.

흔히 예상하지 못하는 것은 글꼴입니다. SVG가 지정한 서체가 포함되어 있지 않거나 윤곽선으로 변환되지 않았다면 대체 글꼴이 쓰이고 줄 길이가 달라집니다. 내보내기 전에 디자인 도구에서 텍스트를 윤곽선으로 바꾸십시오. SVG 안에 URL로 연결된 외부 이미지는 가져오지 않으므로 먼저 포함하거나 그림을 병합하십시오.