SVG 패턴 생성기

SVG 패턴 생성기란?

SVG 패턴 생성기는 그래픽 편집기를 열지 않고 가볍고 반복 가능한 배경이 필요한 웹 디자이너와 프론트엔드 개발자를 위한 무료 브라우저 내 도구입니다. 드롭다운에서 패턴(점, 그리드, 스트라이프, 대각선, 체커)을 고르고 도형의 전경색과 타일의 배경색을 지정한 뒤, 스케일과 굵기 숫자 입력으로 타일 크기와 선 두께를 조절합니다. 결과물은 선명한 SVG로 그려진 한 장의 타일로 이음매 없이 반복되도록 설계되어 파일이 매우 작고 확대해도 흐려지지 않습니다. 형식 토글로 복사용 출력을 원본 SVG 마크업과 CSS background-image 규칙 사이에서 바꾼 다음, 복사하거나 .svg 파일로 내려받아 사이트, 카드, 히어로 영역, UI 목업에 활용하세요.

SVG 패턴 생성기 사용법

1. 드롭다운에서 패턴을 선택합니다: 점, 그리드, 스트라이프, 대각선, 체커.
2. 도형의 전경색과 타일의 배경색을 입력하거나 고릅니다.
3. 스케일(타일의 픽셀 크기)과 굵기(점 반지름 또는 선 두께) 숫자 입력을 설정합니다.
4. 설정을 열고 형식 토글로 출력을 SVG와 CSS 사이에서 전환합니다.
5. 미리보기가 패턴을 타일처럼 반복하는 것을 확인한 뒤 SVG나 CSS를 복사하거나, 다운로드를 눌러 .svg 파일을 저장합니다.

예시

자주 묻는 질문

어떤 패턴을 만들 수 있나요?

다섯 가지 타일형 패턴입니다: 점, 그리드, 스트라이프, 대각선, 체커. 각각 이음매 없이 반복되는 작은 SVG 타일 한 장으로 그려지므로 어떤 크기에서도 선명하고 파일이 매우 작습니다.

스케일과 굵기는 무엇을 조절하나요?

스케일은 타일 한 장의 픽셀 크기로 반복되는 도형 사이의 간격을 정합니다. 굵기는 타일 안 점의 반지름 또는 선의 두께입니다. 굵기는 스케일에 맞춰 자동으로 상한이 정해져 패턴이 타일을 가득 채우는 일이 없습니다.

SVG 출력과 CSS 출력의 차이는 무엇인가요?

SVG는 독립 .svg 파일이나 인라인 사용을 위한 원본 마크업을 줍니다. CSS는 데이터 URI와 background-repeat: repeat를 사용하는 background-image 규칙을 주어 스타일시트에 바로 붙여 넣을 수 있습니다. 설정의 형식 토글로 둘을 전환합니다.

HEX를 입력하지 않고 색을 시각적으로 고를 수 있나요?

네. 전경 또는 배경 입력란 옆의 색 칩을 클릭하면 브라우저 기본 색상 선택기가 열립니다. 또는 #4f86f7 같은 HEX 값을 직접 입력하면 됩니다. 변경에 따라 미리보기와 출력이 갱신됩니다.

제 색상이나 파일이 어딘가로 업로드되나요?

아니요. 패턴은 브라우저 안에서 SVG 문자열로 완결되고 다운로드도 로컬에서 Blob으로 만들어집니다. 어떤 색상, 코드, 파일도 서버로 전송되지 않으므로 오프라인에서도 작동하며 작업 내용이 비공개로 유지됩니다.