JPG를 SVG로
JPG를 SVG로 변환: 사진과 그래픽을 벡터화
JPEG 사진, 스캔, 그래픽을 확대하고 색을 바꾸고 애니메이션까지 적용할 수 있는 SVG 패스로 바꿉니다. 노이즈 제거를 높이면 JPEG 블록 노이즈가 걸러져 트레이싱이 깔끔해집니다.
새 파일의 기본값을 편집하고 있습니다
미리보기
JPG란?
JPG(JPEG)는 사진이나 그라데이션이 많은 이미지를 작은 파일로 압축하는 손실 래스터 이미지 형식입니다. JPG는 투명도를 지원하지 않으므로 투명한 부분은 지정한 배경색으로 채워집니다.
SVG란?
SVG(Scalable Vector Graphics)는 XML을 기반으로 한 벡터 이미지 형식입니다. 픽셀 대신 도형, 패스, 채우기, 선을 수식으로 기술하기 때문에 어떤 크기로 렌더링해도 품질이 떨어지지 않습니다.
SVG는 웹의 표준 벡터 형식입니다. 최신 브라우저가 모두 기본으로 지원하고, CSS로 스타일을 지정할 수 있으며, JavaScript나 SMIL로 애니메이션도 적용할 수 있습니다. 같은 내용의 래스터 이미지에 비해 파일 크기도 대체로 훨씬 작습니다.
SVG와 래스터 형식 비교
벡터 이미지(SVG)와 래스터 이미지(PNG, JPG)는 쓰임새가 다릅니다. 이미지를 어디에 쓸지에 따라 알맞은 형식이 정해집니다.
| 항목 | SVG | PNG / JPG | ICO / ICNS |
|---|---|---|---|
| 확대/축소 | 해상도에 구애받지 않음 | 확대하면 흐려짐 | 고정 크기로 미리 렌더링 |
| 파일 크기 | 도형과 아이콘은 작음 | 해상도에 따라 커짐 | 크기별 이미지의 묶음 |
| 편집 | 텍스트나 벡터 도구로 편집 가능 | 픽셀 단위 편집만 가능 | 크기마다 편집 후 다시 묶음 |
| 애니메이션 | CSS, SMIL, JavaScript | 제한적 (APNG / GIF) | 지원 안 함 |
| 투명도 | 지원 | PNG 지원, JPG 미지원 | 지원 (PNG 기반) |
JPG를 SVG로 변환해야 하는 경우
사진, 스캔, 웹 이미지의 확대 가능한 버전이 필요하다면 JPG를 SVG로 변환하세요. JPEG의 블록 형태 압축 노이즈는 트레이싱할 때 여분의 패스로 나타날 수 있으므로, 색상 정밀도를 낮추고 노이즈 제거를 높이면 대체로 더 깔끔한 SVG가 나옵니다. JPG로 저장된 로고, 일러스트, 대비가 높은 그래픽에 적합합니다. 사진 본연의 세부가 필요하다면 JPG를 그대로 쓰세요.
JPG에서 SVG로: 파일 크기와 품질의 균형
파일 크기
품질 0.85의 JPG 제품 사진(너비 2000~4000 px에 보통 200~800 KB)은 100~500 KB의 SVG가 됩니다. 그래픽풍 JPG(JPG로 저장된 로고나 일러스트, 대개 30~150 KB)는 보통 10~80 KB의 SVG로 줄어듭니다. 원본에 사진 같은 세부보다 단색 면이 많을수록 효과가 큽니다.
SVG가 원본 JPG보다 나은 경우
JPG가 로고, 그래픽, 스캔한 선화처럼 확대하거나 색을 바꾸거나 편집하고 싶은 것이라면 SVG로 변환하세요. 벡터 형식이 되면 내보낼 때마다 다시 구워지던 JPG 압축 노이즈가 사라지고, 어떤 해상도로도 추가 손실 없이 확대할 수 있습니다.
원본 JPG를 그대로 써야 하는 경우
진짜 사진은 JPG로 두세요. 트레이서는 전체 구도는 재현하지만 그라데이션을 띄엄띄엄한 색 영역으로 뭉칩니다. 포스터풍 효과를 노린다면 괜찮지만 인물, 풍경, 세밀한 제품 이미지에는 맞지 않습니다.
품질 절충
JPG 압축은 8×8 블록 노이즈를 만들며, 또렷한 경계 근처나 품질 설정이 낮을 때 특히 두드러집니다. 노이즈 제거를 높이지 않으면 트레이서가 그 블록을 그대로 따라갑니다. 가지고 있는 것 중 가장 품질이 높은 JPG에서 시작하세요. 원본 품질이 낮으면 SVG의 패스는 줄기는커녕 늘어납니다.
JPG를 SVG로 온라인에서 변환하는 방법
- 파일을 끌어다 놓거나 '파일 선택'을 눌러 대기열에 추가합니다. 한 번에 최대 40개까지 가능합니다.
- 출력 설정(크기, DPI, 배경, 품질, 트레이싱 세부)을 지정하면 미리보기가 그 자리에서 갱신됩니다.
- '모두 저장'을 누르면 결과를 내려받을 수 있습니다. 대기열에 여러 개가 있으면 하나의 ZIP이 됩니다.
개인정보: 파일은 브라우저를 벗어나지 않습니다
파일이 기기 밖으로 나가는 일은 없습니다. 변환은 JavaScript와 WebAssembly를 이용해 전부 브라우저 안에서 실행됩니다. 업로드도 서버 처리도 없으므로 파일에 관한 정보가 어디로도 전송되지 않습니다.
아무것도 업로드되지 않으므로 대외비 로고, 사내 문서, 공개 전 고객 작업물에도 안심하고 쓸 수 있습니다. 사용하는 동안 기기에 캐시되므로 첫 방문 이후에는 네트워크 연결이 없어도 동작합니다.
자주 묻는 질문
SVG가 원본 JPG와 똑같아 보이나요?
트레이싱은 패스와 채우기로 원본을 근사하므로 사진의 미세한 부분(그라데이션, 부드러운 그림자, 질감)은 단순해집니다. 로고나 그래픽이라면 구별되지 않는 것이 보통이지만, 사진에서는 전체 구도는 남되 미묘한 계조가 사라집니다. 원본에 가깝게 하려면 색상 정밀도를 올리고 노이즈 제거를 낮추세요.
트레이싱한 JPG에 왜 이상한 노이즈가 생기나요?
JPEG 압축은 블록 형태의 노이즈를 만들며 또렷한 경계 근처나 품질 설정이 낮을 때 특히 두드러집니다. 그 블록이 작은 패스로 트레이싱되어 SVG를 부풀립니다. 노이즈 제거 슬라이더를 올려 걸러내거나 '경량' 프리셋에서 시작하세요.
JPG로 투명한 SVG를 만들 수 있나요?
JPG 자체에는 투명도가 없지만, 트레이싱은 알고리즘이 검출한 도형만 출력합니다. 그래서 패스가 놓이지 않은 곳은 자연스럽게 투명해집니다. 원하지 않는 배경을 걷어내려면 흑백 임계값을 높이거나 색 수를 줄이세요.