LocalTools오프라인 브라우저 도구 모음

분류: 개발 도구

SVG to CSS Background

자체 기획 도구찾는 도구가 없나요?

인라인 SVG 마크업을 background-image 데이터 URI로 변환

SVG 마크업을 붙여넣으면 CSS background-image 데이터 URI와 background-repeat, background-size, background-position 코드를 얻고, 복사하기 전에 실시간 미리보기로 확인할 수 있습니다.

출력
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2'%3E %3Ccircle cx='12' cy='12' r='9' /%3E %3Cpath d='M8 12h8M12 8v8' /%3E %3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;

SVG는 브라우저를 벗어나지 않으며, CSS 값 안에 그대로 인코딩됩니다.

이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.

이 도구로 할 수 있는 일

작은 SVG 아이콘이나 패턴은 별도의 이미지 요청보다 인라인 CSS 데이터 URI로 두는 편이 가벼운 경우가 많지만, url(...) 값 안에서 마크업이 깨지지 않도록 손으로 인코딩하는 일은 실수하기 쉽습니다. 따옴표, 꺾쇠괄호, 줄바꿈을 모두 신경 써서 이스케이프해야 하기 때문입니다. 이 도구는 base64로 떨어지지 않고 결과를 짧고 읽기 쉽게 유지하면서 그 인코딩을 대신 처리하고, 선택한 반복 및 크기 설정으로 실시간 배경 미리보기를 보여줍니다.

사용 방법

  1. 배경으로 쓸 SVG 마크업을 붙여넣습니다.
  2. 반복 방식과 크기 조정 방식을 선택합니다.
  3. CSS 선언을 복사해 스타일시트에 붙여넣습니다.

개인정보

이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.

자주 묻는 질문

이것은 SVG를 base64로 인코딩하는 것과 같은가요?
아니요. CSS 값을 깨뜨릴 수 있는 몇몇 문자만 이스케이프하므로, base64 블록과 달리 데이터 URI가 눈에 띄게 짧고 여전히 사람이 읽을 수 있습니다.
SVG가 업로드되나요?
아니요. 인코딩은 브라우저 탭 안에서 단순 문자열 치환으로 이루어지며, 붙여넣은 마크업은 페이지를 벗어나지 않습니다.
SVG 안에서 currentColor나 CSS 변수를 쓸 수 있나요?
currentColor는 브라우저가 그리는 시점에 해석되므로 작동하지만, background-image 데이터 URI는 살아 있는 스타일시트가 아니라 정적 마크업이므로 SVG 자체 속성 안에서 참조한 CSS 사용자 정의 속성은 작동하지 않습니다.

전체 도구로 돌아가기