SVG 경로를 따라가는 그라디언트: 곡선의 색상 확인하기
휘어진 리본에서 SVG 좌표 그라디언트와 직접 나눈 색상 띠를 비교합니다. 원본 구조와 두 가지 크기의 결과를 살펴보고 필요한 기하 형태를 선택하세요.
목차
일반적인 SVG linearGradient는 휘어진 경로를 따라 얼마나 이동했는지 측정하지 않습니다. 좌표계 안의 그라디언트 벡터를 기준으로 색상을 적용합니다. 리본이 되돌아오는 모양이라면, 그라디언트 벡터상 위치가 같은 두 점에는 리본을 따라 잰 거리가 서로 멀어도 같은 색상이 적용될 수 있습니다.
정적인 디자인에서 색상이 굽은 부분을 따라 순서대로 바뀌어야 한다면 구간을 나누어 각각 색상을 지정할 수 있습니다. 색상 순서를 제어할 수 있지만 기하 요소가 늘어나고 색상 경계가 보이게 됩니다. 직접 작성한 예제에서는 같은 경로에 적용한 수평 그라디언트와 의도적으로 나눈 색상 띠 여덟 개를 비교합니다. 두 파일 모두 패스로 구성되어 있으며 삽입된 이미지는 없습니다.
같은 색상이 반복되는 위치 확인하기
SVG2 페인트 서버 명세는 선형 그라디언트를 벡터와 색상 중지점으로 정의합니다. 방사형 그라디언트는 별도의 원형 기하 형태로 설명합니다. 어느 정의도 임의의 경로를 경로 거리 기준의 색상 축으로 바꾸지는 않습니다.
예제 리본은 왼쪽 위에서 시작해 오른쪽으로 나아간 다음 반원을 돌아 왼쪽 아래로 되돌아옵니다. 수평 그라디언트를 적용하면 왼쪽의 두 끝은 주황색, 오른쪽의 굽은 부분은 보라색이 됩니다. 올바르게 작동하는 좌표 그라디언트입니다. 다만 '이 경로의 시작부터 끝까지 색상이 바뀌도록 한다'는 디자인 요구와는 다른 기준을 사용합니다.
MDN 그라디언트 튜토리얼은 끝점과 중지점 모델을 설명합니다. 중지점을 추가하면 좌표를 기준으로 한 색상 순서가 바뀝니다. 색상이 곡선을 따라가게 되는 것은 아닙니다.
일반 그라디언트 하나를 비교 기준으로 유지하기
아래 전체 파일을 coordinate.svg로 저장하세요. 패스에는 200×160 viewBox 안에서 24 단위 너비의 획이 적용되어 있습니다. 직선 구간과 오른쪽 반원이 편집 가능한 중심선 하나를 이룹니다.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<defs><linearGradient id="across" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="170" y2="0" color-interpolation="sRGB"><stop offset="0" stop-color="#e36b2c"/><stop offset="1" stop-color="#704baa"/></linearGradient></defs>
<path d="M30 30 H120 A50 50 0 0 1 120 130 H30" fill="none" stroke="url(#across)" stroke-width="24" stroke-linecap="butt"/>
</svg>그라디언트 끝점을 원본 좌표계에 명확히 지정하기 위해 gradientUnits="userSpaceOnUse"를 사용합니다. 경계 상자 좌표로 바꾸면 끝점의 표현 방식이 달라집니다. 경로 거리에 따른 색상 적용 기능이 생기는 것은 아닙니다. gradientUnits 참고 문서와 그라디언트 좌표 가이드를 확인하세요.
전체 경로는 path 요소 하나입니다. 더 복잡한 색상 표현을 납품하기로 하더라도 이 단순한 버전을 기하 형태의 원본으로 보존하세요.
굽은 부분을 따라 단계별 색상 만들기
다음을 bands.svg로 저장하세요. 위쪽 직선 구간은 두 조각, 반원은 호 네 개, 되돌아오는 직선 구간은 두 조각으로 나눕니다. 경로 순서에 따라 위쪽 시작점의 주황색부터 아래쪽 끝점의 보라색까지 색상을 지정했습니다.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">
<g fill="none" stroke-width="24" stroke-linecap="butt">
<path d="M30 30 H75" stroke="#e36b2c"/>
<path d="M75 30 H120" stroke="#d38d31"/>
<path d="M120 30 A50 50 0 0 1 155.355339 44.644661" stroke="#b4a747"/>
<path d="M155.355339 44.644661 A50 50 0 0 1 170 80" stroke="#6fab79"/>
<path d="M170 80 A50 50 0 0 1 155.355339 115.355339" stroke="#3d9dac"/>
<path d="M155.355339 115.355339 A50 50 0 0 1 120 130" stroke="#4486b9"/>
<path d="M120 130 H75" stroke="#5265b2"/>
<path d="M75 130 H30" stroke="#704baa"/>
</g>
</svg>직접 선택한 색상 띠 여덟 개이며 구간 길이는 서로 다릅니다. 경로 길이의 단위당 색상 변화량이 일정하도록 계산한 것이 아니며, 연속적인 음영을 만들지도 않습니다. 소수점으로 반올림한 호 끝점은 원래 경로를 근사합니다. 이 예제가 픽셀 단위로 동일한 윤곽선을 만든다는 주장은 아닙니다.
path 참고 문서는 해당 요소와 패스 데이터를 설명합니다. 여기의 각 구간은 닫힌 채우기 윤곽선이 아니라 획을 적용한 중심선입니다. 대상 프로그램에서 닫힌 도형이 필요하다면 획 조각을 절단 윤곽선으로 간주하지 말고 해당 기하 형태를 별도로 준비하고 검사하세요.
이웃한 조각이 끝점 밖으로 뻗지 않도록 stroke-linecap="butt"를 사용합니다. 내부 구간마다 둥근 선 끝을 적용하면 이웃한 색상과 겹치게 됩니다. 직선과 호가 만나는 부분도 방향이 일치해야 합니다. 기하학적 연속성은 매끄러운 연결 가이드에서 별도로 설명합니다.
두 가지 크기와 위치에서 비교하기
두 원본 파일을 Chrome에서 200×160 및 400×320 CSS 픽셀 크기로 렌더링했습니다. 브라우저에서 각 SVG를 디코딩한 다음, 실제 버퍼 크기를 테스트 크기에 맞춘 캔버스에 그렸습니다. 브라우저의 기기 픽셀 비율은 2였습니다. 기록한 표본값은 스크린샷의 기기 픽셀을 센 결과가 아니라 캔버스 버퍼에서 읽은 값입니다.
원본 좌표 (60,30)과 (60,130)은 경로의 서로 다른 직선 구간에 있습니다. 수평 좌표가 같으므로 수평 그라디언트는 두 위치에 같은 색상 표본값을 만듭니다.
| 파일 | x=60의 위쪽 표본 | x=60의 아래쪽 표본 | 패스 | 삽입 이미지 |
|---|---|---|---|---|
| 좌표 그라디언트 | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| 직접 나눈 색상 띠 | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| 단색 기하 원본 | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
테스트한 두 크기에서 표본 쌍은 같았으며 칠해진 내부의 알파값은 255였습니다. 원본 좌표 (100,80)의 빈 영역은 여섯 가지 경우 모두 알파값이 0이었습니다. 해당 브라우저에서 직접 작성한 파일을 확인한 결과이며, 모든 렌더러나 모든 경계 픽셀을 검증한 것은 아닙니다.
구간별 색상 띠는 두 크기 모두에서 단계적인 색상 변화가 눈에 보입니다. 특히 내보내거나 다른 문서에 삽입한 뒤에는 납품 크기에서 연결부를 살펴보세요. 안티앨리어싱, 반올림, 이후 편집으로 조각 사이 이음새가 드러날 수 있습니다. 구간 수를 늘리면 색상 단계 하나의 크기를 줄일 수 있지만, 관리할 패스와 경계도 늘어납니다.
그림을 확장하기 전에 색상 표현 방식 정하기
| 디자인 요구 | 유용한 시작점 | 검사해야 할 요소 |
|---|---|---|
| 색상이 페이지의 한 방향을 따름 | 좌표 그라디언트 하나 | 끝점 위치와 원본 경계 |
| 이 경로를 따라 정적으로 색상이 변화함 | 직접 색상을 지정한 구간들 | 구간 색상, 접선 연결, 이음새 |
| 임의의 곡선을 따라 부드럽게 색상이 변화함 | 별도로 설계한 근사 표현 또는 다른 전달 방식 | 표본 추출, 교차점, 편집 가능한 기하 형태, 대상의 렌더링 |
선형 그라디언트를 회전하면 방향이 바뀝니다. 반복하면 색상이 확장되는 방식이 바뀝니다. 어느 작업도 되돌아오는 이 중심선을 따라 그라디언트가 계속 방향을 바꾸도록 만들지는 않습니다. 원형 구도에는 방사형 그라디언트가 어울릴 수 있지만, 이는 별도의 색상 적용 기하 형태이며 일반적인 경로 거리 기반 해결책은 아닙니다.
나중에 곡선을 조정한다면 구간들을 함께 수정하세요. 의도한 경로를 비교할 단색 원본을 남겨두고 색상 표현용 사본은 별도로 보존하세요. 기초 패스 명령을 읽거나 이동할 때는 상대 경로 가이드가 도움이 됩니다.
원본이 PNG나 JPG이고 편집 가능한 윤곽선이 필요하다면 PerfectVector로 원본을 변환한 뒤 재구성된 도형과 빈 영역을 검사하고 깨끗한 SVG 원본을 보존하세요. 기하 형태를 확인한 다음 색상 표현 방식을 선택하거나 다시 만드세요. 벡터 변환은 연속적인 음영의 정확한 복원을 보장하지 않으며, 경로를 따라가는 네이티브 그라디언트 기능을 만들어내지도 않습니다. 이미 깨끗한 SVG가 있다면 색상과 기하 형태를 직접 편집해야 합니다. 래스터 변환이 도움이 되는 경우는 이미지 벡터 변환 가이드에서 설명합니다.
자주 묻는 질문
linearGradient가 어떤 곡선 획이든 따라가게 할 수 있나요? 일반적인 linearGradient 정의에는 경로 거리 설정이 없습니다. 좌표 벡터가 색상 적용을 제어합니다. 단계별 예제는 경로를 나눈 각 구간에 별도 색상을 지정합니다.
그라디언트 중지점을 늘리면 되돌아오는 구간의 색상 문제가 해결되나요? 중지점을 늘리면 그라디언트 벡터를 따라 색상 전환을 더 세밀하게 만들 수 있습니다. 그 벡터상 위치가 같은 점에는 여전히 같은 좌표 기반 색상이 적용됩니다.
색상 띠 파일에 래스터 이미지가 들어 있나요? 아니요. 직접 작성한 예제에는 패스 요소 여덟 개가 있으며 이미지 요소는 없습니다. 연속적인 경로 거리 기반 그라디언트 대신 눈에 보이는 색상 단계가 들어 있습니다.
모든 그라디언트를 별도 패스로 바꿔야 하나요? 디자인에 맞는다면 더 단순한 좌표 그라디언트를 사용하세요. 구간별 색상 순서와 편집 비용을 수용할 수 있을 때 별도 구간이 유용합니다. 납품 전에 이음새와 대상 프로그램의 렌더링을 검사하세요.
출처
- W3C: SVG2 페인트 서버: 그라디언트 벡터, 중지점, 좌표 기반 색상 적용을 정의합니다.
- MDN: SVG의 그라디언트: 선형 및 방사형 그라디언트의 구성 방법을 설명합니다.
- MDN: gradientUnits: 사용자 공간과 경계 상자 좌표계를 설명합니다.
- MDN: path: 검사 가능한 패스 요소와 패스 데이터를 설명합니다.
- MDN: stroke-linecap: 평평한 획 끝과 둥근 획 끝의 동작을 설명합니다.
