SVG를 JPG로 변환
어떤 업로드 양식, 마켓플레이스, 인쇄소는 JPG만 받습니다. 필요한 크기로, 선택한 배경 위에 벡터를 렌더링합니다. JPG에는 투명도가 없기 때문입니다. 아무것도 저장하지 않습니다.
- 저장되지 않음
- 대기열 없음, 기다림 없음
- 회원가입 없음, 워터마크 없음
사용 방법
SVG 파일 추가
.svg 파일을 몇 개든 끌어다 놓습니다.
크기와 배경 선택
픽셀 너비를 정하고(벡터는 어떤 크기로도 선명합니다), 투명했던 부분을 채울 색을 고릅니다.
다운로드
설정한 품질로 하나씩, 또는 ZIP으로 받습니다.
JPG가 벡터와 맞지 않는 이유, 그리고 손실을 줄이는 방법
JPEG는 사진을 위해 설계됐습니다. 부드러운 그라데이션과 선명한 경계가 없는 이미지는 8×8 블록 변환과 크로마 서브샘플링이 매끄럽게 처리합니다. 벡터 아트워크는 그 정반대입니다. 단색 채우기, 1픽셀 선, 날카로운 모서리, 작은 글자. JPEG에서는 이런 경계 하나하나에 희미한 물결 모양 번짐이 생기고, 진한 색이 흰색과 만나는 곳에는 색 테두리가 나타납니다. 색상이 절반 해상도로 저장되기 때문입니다. 품질 90 이상에서는 번짐이 거의 보이지 않지만 75에서는 어떤 로고에서도 보입니다. 이 페이지의 품질 슬라이더가 높은 값에서 시작하는 이유입니다.
배경색은 장식이 아닙니다. 배경이 없는 SVG는 ‘아무것도 없는 곳’에 그려지지만 JPEG는 모든 픽셀에 무언가가 있어야 하므로, 빈 영역은 인코딩 전에 채워집니다. 안티에일리어싱된 경계는 원래 투명 쪽으로 섞여 있었는데 이제 선택한 색 쪽으로 섞이므로, 흰색 위에 렌더링한 로고를 어두운 페이지에 올리면 옅은 테두리가 보입니다. 놓일 곳의 색을 고르거나, 경계를 섞지 않고 유지하는 PNG를 쓰세요.
자체적으로 완결된 것은 모두 그려진 그대로 렌더링됩니다. 그라데이션, 필터, 마스크, 클리핑, 내장된 data URI 이미지가 그렇습니다. 링크된 이미지와 웹 폰트는 불러오지 않습니다. 이미지로 렌더링되는 SVG는 네트워크에서 격리되어 있기 때문이며, 스크립트도 실행되지 않습니다. SVG에 viewBox만 선언되어 있으면 가로세로 비율은 거기서 가져오고, 설정한 너비가 높이를 결정합니다.
다른 작업이 필요할 때
rsvg-convert -w 1600 -b white in.svg -o out.png에 이어 cjpeg -quality 92를 쓰면 브라우저 인코더보다 깔끔한 JPEG가 나오고, 글자 뒤에는 실제 글꼴 환경이 있습니다. Inkscape는 명령줄에서 DPI와 배경을 지정해 폴더 전체를 내보냅니다.
변환하기 전에, JPG를 요구하는 곳이 PNG도 받지 않는지 확인하세요. 거의 모든 곳이 받고, 로고의 PNG는 더 작고 선명하며 투명합니다. 정말 JPG가 필요한 경우는 좁습니다. 업로드 조건이 엄격한 마켓플레이스, 일부 인쇄소, PNG 지원 이전의 오래된 시스템 정도입니다.
자주 묻는 질문
PNG로 해야 하지 않나요?
대개는 그렇습니다. 벡터 아트워크는 단색 면과 선명한 경계로 이루어져 있는데, JPG는 이를 잘 압축하지 못하고 PNG는 완벽하게 압축하며, 투명도를 유지하는 것도 PNG뿐입니다. 판매 등록 양식, 오래된 시스템, 인쇄소처럼 JPG를 명시적으로 요구하는 곳이 있을 때 이 페이지를 쓰고, 그 외에는 SVG PNG 변환을 쓰세요.
투명한 배경은 어떻게 되나요?
JPG에는 투명도가 없으므로 SVG가 그리지 않은 영역은 인코딩 전에 선택한 색으로 채워집니다. 기본은 흰색이며, 이미지가 놓일 곳의 색에 맞추세요.
어떤 크기로 렌더링해야 하나요?
표시되거나 인쇄될 가장 큰 크기에, 고해상도 화면을 위해 2를 곱하세요. 원본이 벡터이므로 크게 렌더링해도 화질 손해가 없습니다. 손해는 용량에서만 납니다.
디자인 도구에서 보던 것과 글자가 다른 이유는?
SVG는 글꼴을 이름으로 지정하고, 렌더링하는 컴퓨터에 그 글꼴이 없으면 가진 것으로 대체합니다. 내보내기 전에 텍스트를 윤곽선으로 변환하면 문제가 사라집니다. URL로 참조된 웹 폰트는 가져오지 않습니다. 렌더링은 외부 어디에도 접속하지 않습니다.
제 파일이 어딘가에 저장되나요?
아니요. 어떤 단계에서도 아무것도 저장하지 않습니다.
참고: 외부 이미지나 웹 폰트에 의존하는 SVG는 그것 없이 렌더링됩니다. 스크립트는 실행되지 않고 애니메이션은 첫 프레임으로 렌더링됩니다. 품질이 낮으면 선명한 경계에 JPG 특유의 번짐이 생기므로, 아트워크는 90 이상으로 두세요.
내 웹사이트에 이 도구 넣기
블로그, 수업 페이지, 도움말 글 어디에나 무료로 넣을 수 있습니다. 코드 한 줄만 붙여 넣으면 방문자가 페이지에서 바로 사용할 수 있습니다.