SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽을 표현하는 포맷으로, 웹 페이지나 다른 매체에서 사용됩니다. SVG의 fill 속성은 그래픽 요소의 색상을 지정하는 데 사용됩니다. 여기 몇 가지 fill 속성의 예시가 있습니다.

1. 기본 색상 사용:

   xml
   <svg width="100" height="100">
     <rect width="100" height="100" fill="red" />
   </svg>
   

   이 예제는 100x100 크기의 빨간색 사각형을 생성합니다.

2. RGB 값 사용:

   xml
   <svg width="100" height="100">
     <circle cx="50" cy="50" r="40" fill="rgb(0, 128, 255)" />
   </svg>
   

   이 예제는 중심이 (50, 50)이고 반지름이 40인 파란색 원을 생성합니다.

3. HEX 코드 사용:

   xml
   <svg width="100" height="100">
     <ellipse cx="50" cy="50" rx="40" ry="20" fill="#00ff00" />
   </svg>
   

   이 예제는 중심이 (50, 50)이고 x축 반지름이 40, y축 반지름이 20인 녹색 타원을 생성합니다.

4. 무지개 그라데이션 사용:

   xml
   <svg width="200" height="100">
     <rect width="200" height="100" fill="url(#rainbow)" />
     <linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
       <stop offset="0%" style="stop-color: red" />
       <stop offset="20%" style="stop-color: orange" />
       <stop offset="40%" style="stop-color: yellow" />
       <stop offset="60%" style="stop-color: green" />
       <stop offset="80%" style="stop-color: blue" />
       <stop offset="100%" style="stop-color: violet" />
     </linearGradient>
   </svg>
   

   이 예제는 무지개 그라데이션으로 채워진 사각형을 생성합니다. 그라데이션은 linearGradient 요소를 사용하여 정의되었습니다.

5. 무늬(패턴) 사용:

   xml
   <svg width="100" height="100">
     <rect width="100" height="100" fill="url(#pattern)" />
     <defs>
       <pattern id="pattern" width="20" height="20" patternUnits="userSpaceOnUse">
         <rect width="10" height="10" fill="white" />
         <rect x="10" y="10" width="10" height="10" fill="black" />
       </pattern>
     </defs>
   </svg>
   

   이 예제는 체스판 무늬로 채워진 사각형을 생성합니다. 무늬는 pattern 요소를 사용하여 정의되었습니다.

이러한 예시들은 SVG의 fill 속성을 활용하여 다양한 색상 및 그래픽 스타일을 적용하는 방법을 보여줍니다.