Softonic

SVG 스트립 패턴 생성기

단계 1 / 4
다음

스트립 패턴은 스톡 사진에 의존하지 않고 영웅 섹션, 분할선 또는 빈 카드를 효과적으로 채우는 가장 신뢰할 수 있는 방법 중 하나입니다. 이 생성기는 <pattern> 기반의 깔끔한 SVG 파일을 출력하며, 두 가지 색상, 설정 가능한 스트립 너비 및 회전 각도를 지원하여 동일한 파일이 320px 모바일 영웅 이미지에서부터 4K 데스크톱 배너에 이르기까지 정확하게 확대/축소될 수 있습니다.

SVG 스트라이프 패턴을 생성하는 방법

  1. 1

    캔버스 크기 설정

    필요한 너비와 높이를 입력하세요. SVG는 viewBox을 사용하므로 페이지에서 여전히 스케일링됩니다.

  2. 2

    스트립 두께를 선택하세요

    작은 값은 단단한 줄무늬를, 큰 값은 아워닝 스타일의 밴드를 나타냅니다.

  3. 3

    각도를 선택하세요

    수평선에는 0을, 수직선에는 90도를, 고전 대각선에는 45도를 사용하세요.

  4. 4

    두 가지 색상을 선택하세요

    전경과 배경의 헥사드래곤 값을 설정하세요. 투명한 줄무늬도 잘 사용할 수 있습니다.

  5. 5

    SVG를 복사하세요

    인라인으로 붙여넣거나, .svg 형식으로 저장하거나, SVG-to-CSS 변환기를 사용하여 CSS 배경에 삽입할 수 있습니다.

패턴이 구성되는 방식

SVG는 두 줄무늬 크기의 작은 <pattern> 패턴을 정의한 후, 전체 베이스라인 영역을 커버하는 <rect> 패턴에 fill="url(#stripes)" 패턴을 적용합니다. 패턴은 자동으로 반복되기 때문에 캔버스 크기를 변경하더라도 줄무늬의 두께는 변하지 않으며, 줄무늬의 수만 달라집니다.

patternTransform="rotate(angle)"는 기하학적 구조를 다시 계산하지 않아도 대각선을 생성해 줍니다. 이 패턴은 어떤 각도에서도 매끄럽게 타일링됩니다.

스트립 너비 참고표

｜스트립 너비｜표시 방식｜일반 사용 사례｜ |--------------|--------------------------------|-----------------------------------------| | 2–6px | 섬세한 줄무늬 | 형태가 뚜렷하고 미묘한 질감을 지닌 배경 | | 10–20px | 균형 잡힌 대각선 배치 | 영웅 섹션, 카드, 분할선 | | 30–60px | 굵은 아워닝 | 랜딩 페이지 배너 및 공백 상태 아트 | | 80px 이상 | 포스터 크기 블록 | 멀리서도 읽어야 하는 헤더 |

■ 팁

패턴이 텍스트 뒤에 위치할 때는 대비를 낮게 유지하세요(예: #f5f5f5 대 #ffffff). 15도, 30도, 45도의 각도는 엄격한 0도 또는 90도보다 더 ‘설계된’ 느낌이 듭니다.

  • 줄무늬를 애니메이션화하려면 <rect>를 <g>에 감싸서 루프로 이동시키세요. 패턴 타일이 적용되어 있어 무료로 무한 스크롤 효과를 얻을 수 있습니다. 출력 결과는 외부 참조가 전혀 포함되지 않은 순수한 SVG 형식이므로, <script> 태그를 제거한 HTML 또는 이메일 템플릿에 인라인으로 사용하는 데 안전합니다.

자주 묻는 질문

예입니다. 출력 결과를 .svg 파일로 저장한 후 background-image: url(...) 및 background-repeat: repeat로 참조하거나, SVG에서 CSS로 변환하는 도구에 입력하여 인라인 데이터 URL을 얻으세요.

대각선은 브라우저에서 안티알리어싱 처리됩니다. 테두리 효과가 나타나는 경우, 스트라이프 너비를 1~2픽셀 증가시키거나 더 큰 PNG 파일로 라스터화한 후 축소해 보세요.

색상 선택기는 불투명한 색만 만들므로, 줄무늬 하나를 투명하게 하려면 출력된 SVG를 편집하세요. fill 하나를 none으로 설정하거나 #00000000처럼 알파 값이 포함된 8자리 헥스로 설정하면 됩니다. 그러면 SVG 뒤에 있는 것이 비쳐 보입니다.

출력 결과는 귀하의 입력 정보를 기반으로 생성된 마크업일 뿐이며, 상표권이 보유된 도형이나 제3자 자료는 전혀 포함되어 있지 않습니다.

두 색상과 너비, 높이는 SVG 미리보기를 렌더링하기 위해서만 저희 서버로 전송되며, 어떤 것도 저장되거나 기록되지 않고 어떤 파일도 업로드되지 않습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

이 도구는 다른 언어로도 제공됩니다