SVG Base64·Data URI 변환
SVG를 CSS나 HTML에 바로 넣으세요. URL 인코딩 및 Base64 Data URI, 바로 쓸 수 있는 CSS 코드, <img> 태그를 얻을 수 있습니다.
- 업로드 없음
- 오프라인 지원
- 무료, 가입 불필요
- 파일이 브라우저 밖으로 나가지 않습니다
여기에 SVG 파일을 놓으세요
또는 편집기에 SVG 코드를 붙여넣으세요. 여러 파일을 한 번에 열 수 있습니다.
SVG는 이 기기에만 머뭅니다. 아무것도 업로드되지 않습니다.
SVG Base64·Data URI 변환기 사용 방법
- 1
SVG 붙여넣기
SVG 코드를 붙여넣거나 파일을 놓으세요. 기존 Data URI를 붙여넣어 SVG로 되돌릴 수도 있습니다.
- 2
출력 선택
URL 인코딩 Data URI(보통 가장 작음), Base64, CSS 배경, CSS 마스크, HTML <img> 태그 중에서 고르세요.
- 3
복사
코드를 스타일시트나 HTML에 복사하세요. 각 옵션의 크기가 옆에 표시됩니다.
SVG를 Data URI로 넣어야 할 때
Data URI는 이미지 전체를 CSS나 HTML 안에 넣으므로 브라우저가 이미지를 위해 별도 요청을 보내지 않습니다. 작고 자주 쓰는 그래픽에 적합합니다. CSS 아이콘, 사용자 지정 체크박스와 선택 화살표, 배경 패턴, 플레이스홀더 등입니다.
큰 일러스트는 보통 별도 .svg 파일이 더 낫습니다. 브라우저가 따로 캐시할 수 있고 스타일시트가 커지지 않습니다.
URL 인코딩 SVG와 Base64 비교
Base64는 3바이트를 4글자로 바꾸므로 크기가 항상 약 33% 늘어납니다. URL 인코딩 SVG는 URL에서 안전하지 않은 몇 가지 문자(<, >, #, %, 따옴표)만 이스케이프하므로 읽을 수 있는 상태를 유지하고, 특히 gzip 후에는 대개 더 작습니다. viewsvg는 두 가지를 크기와 함께 보여 주므로 골라서 쓸 수 있습니다.
SVG 작업에 필요한 모든 기능
SVG Base64·Data URI 변환기는 SVG 파일을 보고, 편집하고, 최적화하고, 변환하는 하나의 작업 공간에 포함되어 있습니다. 가입, 광고, 업로드가 없습니다.
즉시 미리보기
최대 6400%까지 확대, 이동, 화면에 맞추기, 투명·흰색·검은색 또는 원하는 배경에서 SVG를 확인하세요.
실시간 코드 편집기
구문 강조, 오류 줄 표시, 정리 및 압축, 검색, 전체 실행 취소 기록.
윤곽선 및 픽셀 격자
윤곽선 모드로 모든 패스를 보고, 확대했을 때 격자로 픽셀 정렬을 확인하세요.
정보 확인
파일 크기와 gzip 크기, viewBox, 마우스를 올리면 강조되는 요소 트리, 클릭 한 번으로 색상 바꾸기.
SVGO로 최적화
전후 미리보기와 조절 가능한 정밀도로 파일을 줄이세요. 열린 모든 파일을 한 번에 최적화할 수 있습니다.
PNG, JPG, WebP, ICO
최대 16384px까지 원하는 크기로 투명도를 유지한 채 내보내거나, PNG를 클립보드에 바로 복사하세요.
React, Vue, Svelte
currentColor와 props를 지원하는 깔끔한 JSX/TSX, React Native, Vue, Svelte 컴포넌트.
여러 파일을 한 번에
여러 SVG를 탭으로 열고 일괄 최적화하거나 SVG 또는 PNG를 ZIP으로 다운로드하세요.
프라이빗 & 오프라인
업로드도 계정도 없습니다. 작업 내용은 브라우저에 저장되며, 첫 방문 후에는 오프라인에서도 작동합니다.
자주 묻는 질문
SVG Data URI는 Base64와 URL 인코딩 중 무엇을 써야 하나요?
SVG의 경우 URL 인코딩 Data URI가 보통 Base64보다 20~30% 작고 gzip으로도 더 잘 압축됩니다. Base64는 특수 문자가 문제가 되는 곳에서 유용합니다.
CSS에서 쓰는 SVG 아이콘의 색을 바꾸려면?
CSS 마스크 코드를 사용하세요. SVG가 마스크가 되고 요소의 background-color(기본값 currentColor)가 그 안을 채우므로, CSS로 아이콘 색을 바꿀 수 있습니다.
Data URI를 다시 SVG로 바꿀 수 있나요?
네. data:image/svg+xml URI나 순수 Base64 문자열을 편집기에 붙여넣으면 viewsvg가 자동으로 SVG로 디코딩합니다.
SVG 파일이 어딘가에 업로드되나요?
아니요. viewsvg는 전부 브라우저에서 실행됩니다. 파일을 읽고, 표시하고, 최적화하고, 변환하는 작업이 모두 기기에서 이루어지며 서버로 아무것도 전송되지 않습니다. 첫 방문 후에는 오프라인에서도 작동합니다.
viewsvg는 무료인가요?
네. 모든 기능이 무료이며 가입, 워터마크, 파일 개수 제한이 없습니다.