SVG 배경 패턴 생성기

언제 사용하나요?

웹 배경, 카드 배경, 프레젠테이션 보조 그래픽에 쓸 반복 가능한 SVG 타일이 필요할 때 사용합니다.

사용 방법

• 패턴 종류를 선택합니다.
• 크기, 선 굵기, 색상을 조정합니다.
• 생성된 SVG 코드를 복사합니다.

입력값 안내

패턴 종류, 타일 크기, 선 굵기, 패턴 색상, 배경 색상을 입력합니다.

계산·변환 기준

지정된 타일 크기의 SVG에 circle 또는 path 요소를 배치해 반복 가능한 배경 패턴을 생성합니다.

사용 예시

• 반복 배경 제작 - 웹에서 타일처럼 반복해 쓸 수 있는 SVG 패턴을 만듭니다.
• 업로드 전 이미지 준비 - 작업 결과를 미리 확인한 뒤 블로그, 쇼핑몰, SNS에 올릴 이미지 파일을 정리합니다.
• 작업 결과 비교 - 원본과 결과 이미지를 나란히 확인하며 품질과 용량, 표시 상태를 점검합니다.

예시

• 24px 격자 패턴을 생성해 CSS background-image로 사용
• 연한 회색 점 패턴 → 섹션 배경용 SVG 생성

주의사항

• 브라우저 캔버스를 이용해 이미지를 처리하므로 원본 메타데이터(EXIF)가 손실되거나 투명 영역 색상이 변할 수 있습니다.
• 브라우저 환경의 이미지 디코딩 용량 한계로 인해, 지나치게 해상도가 높은 대용량 원본 파일의 변환은 실패할 수 있습니다.

자주 묻는 질문

PNG도 생성하나요?

이 도구는 SVG 코드를 생성합니다. PNG가 필요하면 SVG → PNG 변환기를 사용하세요.

생성한 패턴을 어떻게 쓰나요?

SVG 코드를 CSS background-image에 넣으면 영역 전체에 반복되는 배경으로 표시됩니다.

패턴이 자연스럽게 반복되나요?

타일 경계가 이어지도록 생성되어 넓은 배경에 깔아도 이음새가 드러나지 않습니다.

패턴 색상과 크기를 바꿀 수 있나요?

점·줄무늬·격자의 색상, 간격, 굵기를 조절해 웹페이지 배경으로 쓸 SVG 패턴을 만들 수 있습니다.

관련 도구

• SVG 색상 치환기 - SVG 코드의 fill/stroke 색상 값을 원하는 색상으로 일괄 치환합니다.
• SVG 미리보기 - SVG 코드를 브라우저에서 이미지로 렌더링해 미리봅니다.
• SVG → PNG 변환기 - SVG 코드를 Canvas에 렌더링해 PNG 이미지로 저장합니다.
• 그라데이션 이미지 생성기 - 두 색상과 방향을 선택해 그라데이션 PNG 이미지를 생성합니다.
• 이미지 리사이즈 - 여러 이미지를 서버 업로드 없이 브라우저에서 비율을 유지하며 리사이즈합니다. JPEG·PNG·WebP 등을 지원하며 최대 가로·세로 픽셀을 지정하면 해상도가 일괄 축소됩니다.
• 이미지 크롭 - 픽셀 좌표를 입력해 이미지의 필요한 영역만 브라우저에서 잘라냅니다.