SVG: 색상 단계 표현(Gradient)

원문:

 

 

그라디언트란 한 가지 또는 그 이상의 색을 자연스럽게 변화시켜 색상 변화를 단계별로 표현한 것을 말합니다. SVG에서 표현할 수 있는 그라디언트는 2가지가 있습니다.

선형 그라디언트(linear gradient) : 시작점에서 끝점으로 변화하는 직선형 그라디언트입니다.

원형 그라디언트(radial gradient) : 중심에서 가장자리로 적용되는 그라디언트입니다.

선형 그라디언트(linear gradient)

<예제 lingrad01>

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="8cm" height="4cm" viewBox="0 0 800 400"   xmlns="http://www.w3.org/2000/svg">   <desc>Example lingrad01 - fill a rectangle using a      linear gradient paint server</desc>   <g>   <defs>       <linearGradient id="MyGradient">          <stop offset="5%" stop-color="#F60" />          <stop offset="95%" stop-color="#FF6" />       </linearGradient>   </defs>     <!-- Outline the drawing area in blue -->     <rect fill="none" stroke="blue"           x="1" y="1" width="798" height="398"/>     <!-- The rectangle is filled using a linear gradient paint server -->     <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"            x="100" y="100" width="600" height="200"/>   </g> </svg>

SVG 보기 (lingrad01.svg)

Offset
그라디언트의 길이를 나타내는 것으로 0~1까지(또는 0%~100%)의 값을 가집니다.

stop-color
그라디언트의 색깔을 지정합니다.

stop-opacity
그라디언트의 투명도를 지정합니다. 0~1까지의 값을 가지며 기본값은 1입니다.

GradientUnits
그라디언트의 진행 방향을 나타내는 것으로 userSpaceOnUse 또는 objectBoundingBox 값을 가집니다.

objectSpaceOnUse : 논리적인 값에 의해 진행 방향이 결정됨.
예) GradientUnits="objectBoundingBox" x1, y1, x2, y2로 적용되었을 경우, x1, y1은 시작점, y1, y2는 끝점이 됩니다. (0,0)은 top 또는 left를 의미하고 (1,1)은 bottom 또는 right를 의미합니다.

userSpaceOnUse : 현재 사용자 좌표 시스템 내의 값 범위 내에서 진행 방향이 결정됨.

그라디언트의 진행 방향에 따른 형태 변화는 다음과 같습니다.

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="0">

SVG 보기 (lingrad02.svg)

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">

SVG 보기 (lingrad03.svg)

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0">

SVG 보기 (lingrad04.svg)

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">

SVG 보기 (lingrad05.svg)

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">

SVG 보기 (lingrad06.svg)

<linearGradient id="MyGradient" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">

SVG 보기 (lingrad07.svg)

원형 그라디언트(radial gradient)

<예제 radgrad01>

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="8cm" height="4cm" viewBox="0 0 800 400"   xmlns="http://www.w3.org/2000/svg">   <desc>Example radgrad01 - fill a rectangle by referencing a              radial gradient paint server</desc>   <g>     <defs>     <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"         cx="400" cy="200" r="300" fx="400" fy="200">       <stop offset="0%" stop-color="red" />       <stop offset="50%" stop-color="blue" />       <stop offset="100%" stop-color="red" />     </radialGradient>     </defs>     <!-- Outline the drawing area in blue -->     <rect fill="none" stroke="blue" x="1" y="1" width="798" height="398"/>     <!-- The rectangle is filled using a radial gradient paint server -->     <rect fill="url(#MyGradient)" stroke="black" stroke-width="5"         x="100" y="100" width="600" height="200"/>   </g> </svg>

SVG 보기 (radgrad01.svg)

<radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300" fx="400" fy="200">

cx, cy : 원형 그라디언트가 적용될 위치

r : 원형의 크기

fx, fy : 초점의 위치

초점의 위치에 따른 그라디언트가 적용된 형태의 변화는 다음과 같습니다.

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="100" height="100" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">     <defs>       <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse"                       cx="250" cy="250" r="200" fx="250" fy="250">         <stop offset="0%" stop-color="red" />         <stop offset="50%" stop-color="blue" />         <stop offset="100%" stop-color="yellow" />       </radialGradient>     </defs>     <circle fill="url(#MyGradient)" stroke="none" cx="250" cy="250" r="200"/> </svg>

1. cx="250" cy="250" fx="250" fy="250"일 때

2. cx="250" cy="250" fx="125" fy="250"일 때

3. cx="250" cy="250" fx="500" fy="250"일 때

4. cx="250" cy="250" fx="500" fy="125"일 때

5. cx="250" cy="250" fx="500" fy="500"일 때

[참고] objectBoundingBox 옵션이 사용될 경우

위 예제를 변경하여 objectBoundingBox 옵션을 적용하면 다음과 같이 됩니다.

<radialGradient id="MyGradient" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.35" fx="0.5" fy="0.5">

SVG 보기 (radgrad02.svg)

objectBoundingBox 옵션이 사용되면 0~1까지의 논리값으로 좌표값을 지정하고 그라디언트 속성이 적용된 직사각형의 높이, 너비에 따라 가변적으로 그라디언트 비율이 변경됩니다.