SVG 선형 그라디언트
SVG 그라디언트
그라디언트는 한 색상에서 다른 색상으로의 부드러운 전환을 의미한다. 또한, 동일한 요소에 여러 색상 전환을 적용할 수도 있다.
SVG에는 두 가지 유형의 그라디언트가 있다.
- 선형 그라디언트 – <linearGradient>로 정의됨
- 방사형 그라디언트 – <radialGradient>로 정의됨
그라디언트 정의는 <defs> 또는 <svg> 요소 내에 배치된다. <defs> 요소는 “정의”의 약자로, 그라디언트와 같은 특수 요소의 정의를 포함한다.
각 그라디언트는 그라디언트를 식별하는 id 속성을 가져야 한다. 그래픽/이미지는 이후 사용할 그라디언트를 가리킨다.
SVG 선형 그라디언트 – <linearGradient>
<linearGradient> 요소는 선형 그라디언트(한 방향에서 다른 방향으로, 한 색상에서 다른 색상으로의 선형 전환)를 정의하는 데 사용된다.
<linearGradient> 요소는 종종 <defs> 요소 내에 중첩된다.
선형 그라디언트는 수평, 수직 또는 각도 그라디언트로 정의할 수 있다.
- 수평 선형 그라디언트(기본값)는 왼쪽에서 오른쪽으로 진행한다 (x1과 x2가 다르고 y1과 y2가 동일)
- 수직 선형 그라디언트는 위에서 아래로 진행한다 (x1과 x2가 동일하고 y1과 y2가 다름)
- 각도 선형 그라디언트는 x1과 x2가 다르고 y1과 y2가 다를 때 생성된다
수평 선형 그라디언트
노란색에서 빨간색으로 진행하는 수평 선형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>코드 설명:
- <linearGradient> 요소의 id 속성은 그라디언트의 고유한 이름을 정의한다.
- <linearGradient> 요소의 x1, x2, y1, y2 속성은 그라디언트의 시작점과 끝점의 x와 y 좌표를 정의한다.
- 그라디언트의 색상은 두 개 이상의 <stop> 요소로 정의된다.
- <stop>의 stop-color 속성은 그라디언트 정지점의 색상을 정의한다.
- <stop>의 offset 속성은 그라디언트 정지점이 위치하는 곳을 정의한다.
- <ellipse> 요소의 fill 속성은 해당 요소를 “grad1” 그라디언트로 가리킨다.
다중 색상 수평 선형 그라디언트
노란색에서 녹색을 거쳐 빨간색으로 진행하는 수평 선형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad2" x1="0%" x2="100%" y1="0%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>수직 선형 그라디언트
노란색에서 빨간색으로 진행하는 수직 선형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad3)" />
</svg>텍스트가 포함된 수평 선형 그라디언트
노란색에서 빨간색으로 진행하는 수평 선형 그라디언트가 적용된 타원과 내부에 텍스트 추가:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad4" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad4)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>코드 설명:
<text> 요소는 텍스트를 추가하는 데 사용한다.
각도 선형 그라디언트
노란색에서 빨간색으로 진행하는 각도 선형 그라디언트가 적용된 타원:
<svg height="150" width="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad5" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="yellow" />
<stop offset="100%" stop-color="red" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad5)" />
</svg>SVG <linearGradient> 속성
| 속성 | 설명 |
|---|---|
| id | 필수. <linearGradient> 요소의 고유 ID를 정의한다. |
| x1 | 벡터 그라디언트의 시작 지점의 x 위치. 기본값은 0%. |
| x2 | 벡터 그라디언트의 끝 지점의 x 위치. 기본값은 100%. |
| y1 | 벡터 그라디언트의 시작 지점의 y 위치. 기본값은 0%. |
| y2 | 벡터 그라디언트의 끝 지점의 y 위치. 기본값은 0%. |
| spreadMethod | 그라디언트의 확산 방법을 정의한다. 가능한 값: “pad”, “reflect”, “repeat”. 기본값은 “pad”. |
| href | 템플릿으로 사용될 다른 <linearGradient> 요소에 대한 참조를 정의한다. |
| gradientUnits | x1, x2, y1, y2에 대한 좌표 시스템을 정의한다. 가능한 값: “userSpaceOnUse”와 “objectBoundingBox”. 기본값은 “objectBoundingBox”. |
| gradientTransform | 그라디언트 좌표 시스템에 추가 변환을 정의한다. |
💡 SVG 그라디언트 고급 팁:
• 다양한 offset 값을 활용하여 그라디언트 분포 조정
• spreadMethod 속성으로 그라디언트 반복 패턴 생성
• gradientTransform으로 회전, 크기 조정, 기울기 적용
• href 속성을 사용해 그라디언트 정의 재사용 및 확장
