SVG 그레이디언트 단위: 로고 경로에 하나의 색상 전환 공유하기
분리된 SVG 로고 경로를 가로질러 그레이디언트가 이어지게 만드세요. gradientUnits를 비교하고 공유 끝점을 설정하며 이동한 그룹의 예상 밖 색상 변화를 수정하세요.
목차
분리된 SVG 경로에 하나의 그레이디언트를 펼치려면 gradientUnits="userSpaceOnUse"를 사용하고 아트워크 좌표로 끝점을 설정하며 경로를 같은 좌표계에 유지하세요. 각 경로는 자기 위치에 해당하는 색상 전환 부분을 보여줍니다. 로고 조각들은 따로 편집 가능하게 유지할 수 있습니다.
기본값 objectBoundingBox는 각 칠해지는 요소에 그레이디언트를 맞춥니다. 따라서 세 경로가 같은 그레이디언트 ID를 참조해도 완전한 보라색-주황색 전환이 세 번 생길 수 있습니다. 단위를 바꾸면 반복은 해결되지만 변환된 자식의 페인팅은 여전히 이동할 수 있습니다. MDN gradientUnits 참조는 기준 공간을 그레이디언트를 사용하는 요소의 현재 사용자 공간으로 정의합니다.
이 설명은 직접 SVG 경로로 그린 세 부분의 엠블럼을 사용합니다. 이미 벡터 로고가 있다면 그 마스터로 작업하세요. 래스터 원본만 있다면 이 페인팅 편집 단계 전에 기하학적 형태를 복원해야 합니다. 더 포괄적인 그레이디언트 벡터화 가이드는 그 선택을 설명합니다.
색상 전환이 각 도형에 속할지 전체 마크에 속할지 결정하기
각 부분에 완전한 색상 전환이 있어야 한다면 객체 상대 페인팅을 사용하세요. 왼쪽과 오른쪽 부분이 하나의 전환에서 서로 다른 색상을 취해야 한다면 공유 사용자 공간 끝점을 사용하세요.
| 설정 | 끝점의 기준 | 분리된 경로에서의 결과 |
|---|---|---|
objectBoundingBox | 각 칠해지는 요소의 경계 | 각 부분에서 색상 전환 반복 |
userSpaceOnUse | 참조하는 요소의 현재 사용자 좌표 | 같은 좌표를 공유하는 부분 사이에 색상 전환이 이어짐 |
따로 변환된 자식 내부의 userSpaceOnUse | 해당 자식의 변환된 좌표계 | 페인팅이 자식과 함께 이동할 수 있음 |
그룹에 fill="url(#brandBlend)"를 지정하면 채우기가 자식에게 전달됩니다. 객체 경계 상자 그레이디언트가 그룹의 결합 실루엣을 측정하게 되지는 않습니다. 자식은 여전히 각자의 페인팅을 받습니다. SVG 페인트 서버 명세는 그레이디언트를 요소의 채우기나 스트로크가 참조하는 리소스로 설명합니다.
아트워크를 가로지르는 끝점 설정하기
예제 경로의 수평 범위는 x=30부터 x=310까지입니다. 이것이 색상 전환의 끝점입니다. 삼각형은 x=125에서 끝나고 가운데 블록은 140부터 210, 오른쪽 도형은 225부터 310까지 차지합니다.
shared-logo.svg로 저장하고 브라우저에서 여세요.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 170" width="720" height="340">
<defs>
<linearGradient id="brandBlend" gradientUnits="userSpaceOnUse" x1="30" y1="0" x2="310" y2="0">
<stop offset="0" stop-color="#5939d8" />
<stop offset="0.5" stop-color="#ee4380" />
<stop offset="1" stop-color="#ffae42" />
</linearGradient>
</defs>
<g fill="url(#brandBlend)">
<path d="M30 120 L90 30 L125 120 Z" />
<path d="M140 45 H210 V135 H140 Z" />
<path d="M225 30 H310 L280 135 H225 Z" />
</g>
</svg>B처럼 보라색 삼각형, 주로 분홍색인 가운데 블록, 주황색 계열의 오른쪽 도형이 보일 것입니다. 빈 틈은 같은 색상 전환의 일부를 숨깁니다. 다음 경로가 시작한다고 색상이 다시 시작하지 않습니다. 한 색상 정지점을 바꾸면 세 조각이 같은 정의를 참조하므로 모두 업데이트됩니다.
A와 직접 비교하려면 그레이디언트의 gradientUnits, x1, y1, x2, y2 속성을 x1="0%" y1="0%" x2="100%" y2="0%"로 대체하세요. gradientUnits를 생략하면 기본값이 복원됩니다. 이제 각 도형에 전체 색상 전환이 적용됩니다.
x2=1 때문에 로고가 단색처럼 보일 수 있는 이유
사용자 공간에서 단위 없는 x2="1"은 로고의 100%가 아니라 좌표 1을 뜻합니다. 경로가 시작되기 전에 색상 전환이 끝나면 기본 pad 동작이 마지막 색상을 경로 전체로 확장합니다. 실제 아트워크 경계에서 끝점을 선택하세요.
백분율의 기준도 다릅니다. userSpaceOnUse에서는 칠해지는 객체의 경계 상자가 아닌 현재 SVG 뷰포트를 기준으로 합니다. 명시적인 숫자가 이 예제를 검사하기 쉽게 합니다. 큰 viewBox의 일부만 차지하는 로고가 색상 전환에 viewBox 전체 너비를 사용할 필요는 없습니다.
한 조각의 색상이 잘못되면 변환 확인하기
C의 오른쪽 도형은 제자리에 있는 것처럼 보입니다. 경로 좌표는 왼쪽으로 60 단위 이동했고 자식 그룹이 오른쪽으로 60 단위 옮겼습니다.
<g transform="translate(60 0)">
<path d="M165 30 H250 L220 135 H165 Z" />
</g>불일치를 재현하려면 전체 예제의 세 번째 경로를 이 그룹으로 대체하세요. 보이는 왼쪽 가장자리는 x=225에 유지되지만 로컬 왼쪽 가장자리는 x=165입니다. 그레이디언트는 그 로컬 공간을 사용하므로 조각이 전환의 더 앞쪽, 더 분홍색인 부분을 취합니다. userSpaceOnUse가 중첩 변환과 무관하게 하나의 전역 좌표계를 보장하는 것은 아닙니다.
이 엠블럼에서는 세 번째 경로의 원래 좌표를 복원하고 개별 이동을 제거하세요. 로고 전체를 이동해야 한다면 기존 바깥 그룹에 transform="translate(10 0)"을 적용하세요. 그러면 D처럼 세 도형과 공유 페인팅이 함께 이동합니다.
이 수정은 경로들이 이미 공통 좌표계로 표현되어 있기 때문에 작동합니다. 서로 무관하게 변환된 자식들을 그룹 하나로 더 감싸도 개별 변환은 제거되지 않습니다. 가져온 로고에서는 기하학적 형태를 평탄화하거나 다시 쓰기 전에 변환을 검사하고 원본 마스터 복사본을 보관하세요.
gradientTransform이 유용한 경우
gradientTransform은 경로 기하학적 형태를 바꾸지 않고 페인팅 좌표 매핑을 변경합니다. 의도적으로 색상 전환을 회전, 기울이기, 재배치할 때 유용합니다. MDN은 이를 추가 변환으로 설명하며 gradientUnits가 선택한 좌표계가 설정된 뒤 적용합니다.
다른 도형을 확인하지 않고 자식 하나를 보정하려고 공유 정의를 조정하지 마세요. 그 정의를 참조하는 모든 도형이 영향을 받을 수 있습니다. 여기의 단순한 로고는 아트워크를 공통 공간에 유지하는 편이 관리하기 쉽지만 더 복잡한 가져온 아트워크는 별도로 매핑한 그레이디언트 정의가 필요할 수 있습니다.
PerfectVector를 사용하는 단계
원본이 PNG나 JPG 로고뿐이라면 공유 그레이디언트를 재구성하기 전에 PerfectVector로 편집 가능한 벡터 기하학적 형태를 복원할 수 있습니다. 로고를 벡터화하고 편집기에서 실루엣, 구멍, 구분되는 부분을 검사하세요. 그 도형을 공유 페인팅의 시작점으로 사용하세요.
위 시연은 좌표 동작만 보여주기 위해 직접 작성했으며 PerfectVector 변환 결과가 아닙니다. 명암이 있는 픽셀을 추적하면 원래 그레이디언트 정지점이나 좌표 설정이 복원된다고 가정해서는 안 됩니다. 단순한 로고는 수동으로 다시 그리는 편이 더 빠를 수도 있습니다. 기존 SVG, AI, 벡터 PDF가 있다면 보관하세요.
새 채우기가 적용되지 않는 도형에는 그레이디언트 좌표를 바꾸기 전에 SVG 색상 변경 확인을 사용하세요. 같은 출력이 애플리케이션마다 다르다면 SVG 색상 변화 진단을 따르세요.
전달 전에 파일 다시 열기
새 SVG를 저장하고 편집기 캔버스만 보지 말고 바로 그 파일을 테스트하세요. 다음을 확인하세요.
- 그레이디언트 ID가 존재하며 의도한 모든 경로가 참조합니다.
- 색상 전환이 의도한 방향으로 로고 경계를 덮습니다.
- 전체 마크를 이동해도 색상 관계가 유지됩니다.
- 편집해야 할 분리된 부분을 계속 선택할 수 있습니다.
- 파일을 받는 애플리케이션이 예상한 외관을 유지합니다.
매끄러운 브라우저 렌더링은 그 브라우저의 페인팅 동작을 보여줍니다. 모든 편집기의 지원을 입증하거나 그레이디언트를 절단 기하학적 형태로 바꾸지는 않습니다. 단색 도형이 필요한 작업 흐름을 위해 그레이디언트 없는 단색 채우기 버전을 보관하고 편집 가능한 SVG 마스터도 유지하세요. SVG 파일 가이드는 파일의 기하학적 콘텐츠와 표시 외관의 차이를 설명합니다.
FAQ
그레이디언트를 공유하려면 경로를 병합해야 하나요? 아닙니다. 분리된 경로도 하나의 그레이디언트를 참조할 수 있습니다. 적절한 끝점과 userSpaceOnUse를 사용하고 경로가 의도한 좌표계를 공유하는지 확인하세요.
경로를 그룹으로 묶어도 그레이디언트가 반복되는 이유는 무엇인가요? 그룹은 자식 경로에 채우기를 전달할 수 있지만 objectBoundingBox 그레이디언트는 여전히 각 칠해지는 자식의 경계를 사용합니다. 색상 전환이 전체 마크를 가로질러야 한다면 사용자 공간 끝점을 설정하세요.
경로를 그룹에 옮긴 뒤 색상이 바뀐 이유는 무엇인가요? 그 그룹의 변환이 경로의 로컬 좌표계를 바꿀 수 있습니다. 공유 그레이디언트를 조정하기 전에 다른 경로와 변환을 비교하고 내보낸 SVG를 테스트하세요.
Sources
- MDN — gradientUnits — 기본값, 참조 좌표계, 백분율 동작을 정의합니다.
- SVG Working Group — 페인트 서버 — 재사용 가능한 그레이디언트 페인팅, 정지점, 확장 동작을 규정합니다.
- MDN — gradientTransform — 그레이디언트 좌표의 추가 변환을 설명합니다.
래스터 로고에서 시작하나요? 로고를 편집 가능한 SVG 경로로 바꾸고 분리된 도형을 검사한 뒤 공유 그레이디언트를 재구성하고 최종 출력 파일을 다시 열어 정렬을 확인하세요.
