SVG 패턴 생성기 - 심리스 배경 패턴 제작 온라인
실시간 미리보기로 맞춤 SVG 배경 패턴을 생성하세요. 크기, 회전, 투명도, 간격, 선 두께를 조절하고 SVG, CSS, PNG로 내보내기 — 100% 클라이언트 처리, 서버 전송 없음.
자주 묻는 질문
SVG 패턴 생성기란 무엇인가요?
SVG 패턴 생성기는 SVG(Scalable Vector Graphics) 형식으로 심리스(이음새 없는) 반복 배경 패턴을 만드는 도구입니다. SVG <pattern> 요소를 사용하여 작은 그래픽 단위가 표면 전체에 무한히 타일링됩니다. SVG 패턴은 가벼우면서도 어떤 해상도에서든 선명하고 코드로 완벽하게 커스터마이즈할 수 있어 웹 디자인의 배경, 장식 텍스처, 시각적 포인트에 널리 사용됩니다.
이 SVG 패턴 생성기는 어떻게 사용하나요?
1. 패턴 라이브러리에서 패턴 유형을 선택합니다 (예: 대각선, 육각형, 점). 2. 전경색(패턴 요소)과 배경색을 커스터마이즈합니다. 3. 크기(Scale)를 조절하여 패턴 밀도를 제어합니다. 4. 회전 각도를 설정합니다. 5. 투명도, 간격, 선 두께를 세부 조정합니다. 6. 채우기와 윤곽선 스타일을 전환합니다. 7. SVG 코드나 CSS 코드를 복사하거나 SVG/PNG 파일로 다운로드합니다.
SVG 출력과 CSS 출력의 차이점은 무엇인가요?
SVG 출력은 <pattern>과 <rect> 요소가 포함된 완전한 SVG 파일을 제공합니다. HTML에 직접 임베드하거나 디자인 도구(Figma, Illustrator)에서 사용하거나 이미지 파일로 참조할 때 적합합니다. CSS 출력은 인라인 SVG 데이터 URI로 인코딩된 CSS background-image 코드를 제공합니다. 추가 파일 없이 스타일시트에서 직접 패턴을 적용할 때 적합합니다. 두 출력 모두 동일한 시각적 결과를 생성합니다.
심리스(이음새 없는) 패턴은 어떻게 작동하나요?
이 생성기의 모든 패턴은 기본적으로 심리스하게 설계되어 있습니다. SVG <pattern> 요소가 표면 전체에 패턴 단위를 자동으로 반복합니다. 크기, 간격, 회전 파라미터로 타일링 외관을 세부 조정할 수 있지만, 심리스 특성은 수학적으로 항상 유지됩니다.
SVG 패턴이 이미지 기반 배경보다 나은 점은 무엇인가요?
SVG 패턴은 래스터 이미지 배경(PNG, JPEG)에 비해 여러 장점이 있습니다: 어떤 해상도에서든 픽셀화 없이 완벽하게 스케일링되고, 파일 크기가 매우 작으며(보통 1KB 미만), 코드로 색상·크기·회전을 재내보내기 없이 커스터마이즈할 수 있고, 투명도를 기본 지원하며, 모든 화면 밀도(Retina, 4K)에서 선명하게 렌더링되고, CSS에 인라인하여 추가 HTTP 요청 없이 사용할 수 있습니다.
생성된 패턴을 웹 프로젝트에서 사용할 수 있나요?
네, 생성된 패턴은 모든 웹 프로젝트에서 자유롭게 사용할 수 있습니다. SVG 코드를 HTML에 직접 임베드하거나, CSS 출력을 스타일시트에 사용하거나, 다운로드한 SVG 파일을 참조할 수 있습니다. 패턴은 기하학적 프리미티브로 생성되며 표준 호환으로 모든 최신 브라우저에서 동작합니다.
이 SVG 패턴 생성기는 안전하고 개인정보가 보호되나요?
네. 이 도구는 100% 브라우저에서 클라이언트 사이드 JavaScript로 실행됩니다. 디자인 데이터, 패턴, 색상 설정이 서버로 전송되지 않습니다. 모든 패턴 생성, SVG/CSS 코드 생성, PNG 내보내기가 사용자 기기에서 로컬로 처리됩니다. 따라서 기밀 브랜드 작업, 클라이언트 프로젝트, 비공개 디자인 작업에도 안전하게 사용할 수 있습니다.
코드 예제
// Create SVG background patterns programmatically
function createDiagonalLinesPattern(options = {}) {
const {
size = 10,
strokeWidth = 1,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
rotation = 45,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<line x1="0" y1="${size}" x2="${size}" y2="0"
stroke="${color}" stroke-width="${strokeWidth}" opacity="${opacity}"
transform="rotate(${rotation} ${size / 2} ${size / 2})" />
</svg>`;
}
function createDotsPattern(options = {}) {
const {
size = 20,
dotRadius = 2,
color = "#6366f1",
backgroundColor = "#ffffff",
opacity = 1,
} = options;
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
<rect width="${size}" height="${size}" fill="${backgroundColor}" />
<circle cx="${size / 2}" cy="${size / 2}" r="${dotRadius}"
fill="${color}" opacity="${opacity}" />
</svg>`;
}
// Convert SVG pattern to CSS background
function svgToCssBackground(svgString) {
const encoded = encodeURIComponent(svgString)
.replace(/'/g, "%27")
.replace(/"/g, "%22");
return `url("data:image/svg+xml,${encoded}")`;
}
// Usage
const linesSvg = createDiagonalLinesPattern({ size: 12, strokeWidth: 1.5, color: "#3b82f6" });
const dotsSvg = createDotsPattern({ size: 16, dotRadius: 1.5, color: "#8b5cf6" });
const element = document.getElementById("my-element");
element.style.backgroundImage = svgToCssBackground(linesSvg);
element.style.backgroundRepeat = "repeat";
console.log("CSS:", svgToCssBackground(dotsSvg));