SVG(Scalable Vector Graphics)를 사용하여 그라데이션(Gradient)을 적용하는 몇 가지 예시를 아래에 제시하겠습니다. 그라데이션은 색상의 부드러운 전환을 생성하는 데 사용되며, 선, 도형, 텍스트 등 여러 요소에 적용할 수 있습니다.

1. 선형 그라데이션 (Linear Gradient): 선형 그라데이션은 두 점을 연결하는 선 상에서 색상이 부드럽게 변하는 효과를 줍니다.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#linearGradient)" />
</svg>

2. 원형 그라데이션 (Radial Gradient): 원형 그라데이션은 중심에서 외부로 색상이 부드럽게 변하는 효과를 줍니다.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="100" fill="url(#radialGradient)" />
</svg>

3. 반복 그라데이션 (Repeating Gradient): 그라데이션을 반복하여 적용할 수 있습니다.

xml
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="repeatingGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="200" fill="url(#repeatingGradient)" />
</svg>

이러한 예시들은 간단한 SVG 코드로 그라데이션을 사용하는 방법을 보여줍니다. 선형 그라데이션, 원형 그라데이션, 그리고 반복 그라데이션을 조합하여 더 다양한 효과를 만들 수 있습니다. SVG 코드를 통해 색상, 위치, 크기 등을 조절하여 원하는 그라데이션 효과를 얻을 수 있습니다.