> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-gradients.md).

# SVG 그레디언트

### 리니어 그레디언트(Linear Gradient)

선형 그레디언트를 그려 요소에 매핑 하는 방법은 다음과 같습니다. `<defs>` 요소 내에 `<linearGradient>` 요소를 정의한 후, 그레디언트를 적용할 요소 `fill` 속성에 참조 연결합니다. `<linearGradient>` 요소 내부에는 `<stop>` 요소를 2개 이상 사용해 그레디언트 컬러 스톱을 설정할 수 있습니다.

```markup
<svg>

  <defs>
    <linearGradient id="bl-g" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#00a2ff" />

      <stop offset="100%" stop-color="#004d80" />
    
</linearGradient>
  </defs>
  
  <rect 
  
    fill="url(#bl-g)" 
    x="0" y="0" 
    width="100" height="100" />
    
</svg>
```

![그레디언트가 적용된 SVG 사각형](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESo6chIFLEaPiCbCGq%2Fimage.png?alt=media\&token=f16f8510-2262-4806-b35e-f73b29f38e77)

### 레이디얼 그레디언트(Radial Gradient)

원형 그레디언트를 그려 요소에 매핑 하는 방법 또한 선형 그레디언트와 유사합니다. 다만 `<radialGradient>` 원 중심(`cx`, `cy`)과 반지름(`r`), 초점(`fx`, `fy`)을 설정하는 점이 다릅니다.

```markup
<svg>

  <defs> 
    <radialGradient id="yr-rg" cx="50%" cy="50%" r="50%" fx="20%" fy="20%">

      <stop offset="0%" stop-color="#ffc054" />
  
      <stop offset="100%" stop-color="#ff614b" />

    </radialGradient>
  </defs>
  
  <rect 
  
    fill="url(#yr-rg)" 
    x="0" y="0" 
    width="100" height="100" />
    
</svg>
```

![원형 그레디언트가 매핑된 SVG 사각형](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LESj2oAmWv2J2cQuXL1%2F-LESp41peRHLYKcK-8q5%2Fimage.png?alt=media\&token=6b131b40-f675-4ca5-99cf-fff05807f3bd)