Mingg's Diary

SVG 패턴

SVG 패턴 소개

패턴은 도형을 채우기 위해 반복되는 이미지를 정의한다.

SVG 패턴의 장점은 다음과 같다.

패턴은 한 번 정의하면 여러 객체에서 재사용 가능하다
패턴은 단순한 단색보다 더 흥미로운 채우기를 제공한다
패턴은 크기를 조정하고 변형할 수 있다

패턴 정의는 <defs> 요소 내에 배치된다. <defs> 요소는 나중에 재사용 가능한 그래픽 요소를 정의하는 곳이다.

각 패턴은 패턴을 식별하는 id 속성을 가져야 한다. 그래픽/이미지는 이후 이 패턴을 참조한다.

SVG 패턴 – <pattern>

<pattern> 요소는 SVG 그래픽에서 반복 패턴을 정의하는 데 사용된다.

기본 패턴 예제

간단한 빨간색 원 패턴으로 채워진 직사각형:

<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <pattern id="pattern1" x="0" y="0" width="0.2" height="0.2">

      <circle cx="10" cy="10" r="10" fill="red" />

    </pattern>

  </defs>

  <rect x="10" y="10" width="200" height="100" stroke="black" fill="url(#pattern1)" />

</svg>

코드 설명:

<pattern> 요소의 id 속성은 패턴의 고유한 이름을 정의한다.
width와 height 속성은 패턴의 크기를 정의한다. 여기서는 객체 경계 상자(bounding box)의 20%로 설정한다.
패턴 내부의 <circle> 요소는 반복될 원형을 정의한다.
<rect> 요소의 fill 속성은 해당 요소를 “pattern1” 패턴으로 채우도록 지정한다.

체커보드 패턴

흰색과 회색으로 이루어진 체커보드 패턴으로 채워진 사각형:

<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <pattern id="pattern2" x="0" y="0" width="0.1" height="0.1" patternUnits="objectBoundingBox">

      <rect x="0" y="0" width="10" height="10" fill="lightgray"/>

      <rect x="10" y="0" width="10" height="10" fill="white"/>

      <rect x="0" y="10" width="10" height="10" fill="white"/>

      <rect x="10" y="10" width="10" height="10" fill="lightgray"/>

    </pattern>

  </defs>

  <rect x="10" y="10" width="200" height="100" stroke="black" fill="url(#pattern2)" />

</svg>

이미지 패턴

이미지를 반복 패턴으로 사용한 예:

<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <pattern id="pattern3" x="0" y="0" width="0.2" height="0.2" patternUnits="objectBoundingBox">

      <image href="https://www.w3schools.com/graphics/pic_the_scream.jpg" width="30" height="30" />

    </pattern>

  </defs>

  <rect x="10" y="10" width="200" height="100" stroke="black" fill="url(#pattern3)" />

</svg>

변형된 패턴

patternTransform 속성을 사용하여 45도 회전된 패턴:

<svg height="200" width="400" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <pattern id="pattern4" x="0" y="0" width="0.1" height="0.1" patternTransform="rotate(45)">

      <rect x="0" y="0" width="10" height="10" fill="none" stroke="blue" stroke-width="2"/>

    </pattern>

  </defs>

  <rect x="10" y="10" width="200" height="100" stroke="black" fill="url(#pattern4)" />

</svg>

SVG <pattern> 속성

속성	설명
id	필수. <pattern> 요소의 고유 ID를 정의한다.
x	패턴 타일의 x 좌표. 기본값은 0.
y	패턴 타일의 y 좌표. 기본값은 0.
width	패턴 타일의 너비. 필수.
height	패턴 타일의 높이. 필수.
patternUnits	패턴의 x, y, width, height 값에 대한 좌표 시스템을 정의한다. 가능한 값: “userSpaceOnUse”와 “objectBoundingBox”. 기본값은 “objectBoundingBox”.
patternContentUnits	패턴의 내용에 대한 좌표 시스템을 정의한다. 가능한 값: “userSpaceOnUse”와 “objectBoundingBox”. 기본값은 “userSpaceOnUse”.
patternTransform	패턴에 적용할 변환(회전, 크기 조정, 기울이기 등)을 정의한다.
href	템플릿으로 사용될 다른 <pattern> 요소에 대한 참조를 정의한다.
preserveAspectRatio	패턴 내용의 종횡비 유지 방법을 정의한다.

💡 SVG 패턴 고급 팁:
• patternUnits와 patternContentUnits를 분리하여 유연한 패턴 설계
• 투명도(opacity)를 활용하여 배경이 비치는 반투명 패턴 생성
• 패턴 내부에 복잡한 SVG 요소 조합으로 독특한 표현 구현
• patternTransform으로 회전, 확대, 축소 등 다양한 변형 적용

참고

W3C School - SVG Patterns

HTML 그래픽 – SVG 패턴