Mono SVG에서 evenodd cut-out으로 멀티컬러 효과

단색(monochrome) SVG 아이콘이 시각적으로는 멀티컬러처럼 보이는 트릭. fill-rule="evenodd"로 외곽 도형에 안쪽 도형을 cut-out 시키면, 뚫린 자리에 부모 배경이 비춰서 두 번째 색처럼 보인다. 디자인 시스템에서 status 아이콘(success/warning/error/info)을 단일 mono 자산으로 처리할 때 자주 쓰인다.

어떻게 동작하나

evenodd fill rule은 한 path 안에 여러 sub-path가 있을 때 "겹친 영역은 채우지 않음"으로 해석한다:

<path fill-rule="evenodd" clip-rule="evenodd"
      d="M [outer circle] Z
         M [exclamation dot] Z
         M [exclamation bar] Z"
      fill="black" />

→ 외곽 원은 채워지고, 안쪽 느낌표 sub-path는 cut-out 되어 투명. 부모 배경이 그 자리에 비친다.

검증 예 (CircleSuccess):

outline 버전 path: 외곽 원 + 안쪽 원 + 체크    → 도넛형 외곽 + 흰 체크
fill 버전 path:    외곽 원 + 체크             → 통짜 원 + 흰 체크

두 버전의 차이는 sub-path 1개. evenodd가 그 차이를 컬러 효과로 변환.

호출부에서의 효과

// 화면 배경이 흰색이면:
<IconCircleAlert color="orange" />
// → 주황 동그라미 + 흰 느낌표 (배경이 비춤)

// 컬러 카드 위에 두려면 명시적 배경:
<View style={{ backgroundColor: 'white', borderRadius: 32 }}>
  <IconCircleAlert color={statusRed} />
</View>

부모 컨테이너 배경색이 자동으로 두 번째 색이 됨. 별도 멀티컬러 SVG variant 불필요.

왜 좋은가

1. SVG 1개로 status 4종(positive/cautionary/negative/info) 모두 커버 — tintColor 또는 color prop만 바꿈
2. 테마 호환 — 라이트/다크 모드에서 부모 배경이 자동으로 따라감
3. — path 1개, sub-path만 추가. 멀티컬러 variant SVG 안 만들어도 됨