SVG feColorMatrix: 채우기 변경 없이 색상 바꾸기

SVG feColorMatrix 필터는 렌더러가 표시하는 색상을 바꿉니다. 경로의 fill 값을 다시 작성하지는 않습니다. 따라서 되돌릴 수 있는 시각 효과에 유용하지만, 필터가 적용된 미리보기와 팔레트를 새로 편집한 SVG는 서로 다른 전달물입니다.

웹 미리보기가 필요하다면 필터를 유지하고 실행할 페이지에서 테스트하세요. 사용자가 파란 도형을 선택해 파란 채우기를 편집해야 한다면 원본 페인트를 바꾸세요. 원본이 PNG라면 필터나 SVG 래퍼만으로 편집 가능한 벡터 도형이 만들어지지 않으며 별도 벡터화 단계가 필요합니다.

아래 예제는 두 색상 변경 방식 모두에 같은 두 잎 모티프를 사용합니다. 코드를 저장하고 원본을 확인한 뒤 필터를 제거하면 무엇이 바뀌었는지 정확히 알 수 있습니다.

필요한 색상 변경 결과 선택하기

SVG 색상 편집 가이드는 채우기, 스트로크와 스타일 규칙 찾기를 다룹니다. 여기서는 필터가 파일에 무엇을 남기는지라는 더 좁은 질문을 다룹니다. MDN은 feColorMatrix를 픽셀 색상 채널의 변환으로 설명하고, 채우기와 스트로크 가이드는 도형에 적용되는 페인트를 설명합니다.

확인 가능한 2색 예제

다음을 filtered-leaves.svg로 저장하고 브라우저에서 여세요. 첫 잎은 주황색 채우기 #cc6633으로 시작하고 두 번째는 불투명도 50%의 녹색 채우기 #339966을 가집니다. 행렬은 녹색과 알파를 유지하면서 빨강과 파랑 채널을 바꿉니다.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

이 직접 만든 모티프의 네 버전을 브라우저에서 렌더링했습니다. 원본 페인트, 필터 버전, 직접 편집 버전과 필터를 제거한 사본입니다. 직접 편집은 필터 없이 첫 채우기를 #3366cc, 두 번째를 #669933으로 바꿨습니다. 두 색상 변경 방식 모두 파랑·올리브색 모티프를 만들었습니다. 필터 버전의 DOM을 검사하면 원래 주황색과 녹색 fill 속성이 그대로 나왔습니다. 필터를 제거하면 원래 팔레트로 돌아왔습니다.

이는 작은 브라우저 시연이며 모든 편집기나 내보내기 형식의 호환성 테스트는 아닙니다. 유용한 전달 검사는 간단합니다. 필터 파일은 여전히 효과가 보존되고 렌더링되어야 합니다. 직접 채우기 버전은 도형 자체에 새 팔레트를 담습니다.

원본 검사를 반복하려면 텍스트 편집기에서 SVG를 열고 fill=을 찾으세요. 그룹에서 filter="url(#swap-red-blue)"만 제거한 뒤 브라우저를 새로고침하세요. 비교할 수 있도록 수정하지 않은 파일을 옆에 보관하세요.

행렬을 외우지 않고 네 행 읽기

type="matrix"에서 values 속성에는 숫자 20개가 들어갑니다. 5개씩 4행입니다. 각 행은 출력 채널 하나를 계산합니다. 열은 입력 빨강, 녹색, 파랑, 알파와 상수 오프셋을 사용합니다. MDN 행렬 참고 문서는 수식과 항등 행렬을 보여 줍니다.

예제에서 첫 행은 파랑을 새 빨강으로 사용합니다. 둘째는 녹색을 유지합니다. 셋째는 빨강을 새 파랑으로 사용합니다. 넷째는 알파를 유지합니다.

0 0 0 1 0

마지막 행은 ‘기존 알파를 추가 오프셋 없이 사용한다’는 뜻입니다. 모두 0으로 바꾸면 결과가 투명해집니다. 마지막 열에 상수를 더하면 원본이 투명했던 곳도 투명도가 바뀌어 필터 영역 안에 원하지 않는 사각형이 생길 수 있습니다.

행렬은 필터로 들어온 렌더링 입력을 처리합니다. 어떤 픽셀이 잎, 글자, 스트로크나 삽입 사진에서 왔는지 알지 못합니다. 영향을 주려는 그룹이나 객체에 적용하세요. 디자인에서 의미상 특정 부분만 바꾸려면 그 부분을 선택하고 페인트를 편집하세요.

RGB 색상 표본의 숫자를 쓰면 sRGB 설정하기

SVG 필터 프리미티브는 기본적으로 linearRGB를 사용합니다. rgb(128, 128, 128) 같은 색상 표본은 보통 sRGB로 지정되므로 기본 필터 공간의 행렬 상수 0.5가 sRGB 채널 값이 최댓값의 절반인 회색과 같은 표시 색상을 뜻하지는 않습니다. 행렬이 해당 sRGB 채널 값에 연산하도록 의도했다면 color-interpolation-filters="sRGB"를 사용하세요. 이는 color-interpolation과 별개이며 그 다른 속성을 바꿔도 필터 색 공간은 선택되지 않습니다. MDN은 기본값과 차이를 설명합니다.

단색 #3366cc 실루엣의 정규화 RGB 값은 51/255, 102/255, 204/255, 즉 0.2, 0.4, 0.8입니다. 다음 필터는 입력 RGB를 버리고 이 상수로 설정하면서 입력 알파를 유지합니다.

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

객체에서 filter="url(#solid-blue)"로 이 필터를 참조하세요. 불투명한 원본 색 간 차이를 의도적으로 없앱니다. 실루엣에 적합하며 사진의 색조 세부를 유지하는 용도는 아닙니다. Filter Effects 명세는 채널 변환과 알파를 미리 곱하지 않은 색상 값의 처리를 정의합니다.

sRGB 설정은 계산 공간의 선택이며 모든 디스플레이나 인쇄에서 같은 색상을 보장하지는 않습니다. 더 넓은 전달 색상 불일치는 SVG 내보내기 색상 체크리스트를 사용하세요.

미리보기뿐 아니라 전달 파일 확인하기

원본 그림과 필터 정의가 유지되면 필터 기반 색상 변경은 되돌릴 수 있습니다. 스크린샷이나 래스터 내보내기는 보이는 결과를 픽셀로 기록합니다. 어느 작업도 그 자체로 새 팔레트를 편집 가능한 경로 채우기로 만들지는 않습니다.

벡터를 전달하기 전에 실제 대상에서 확인하세요.

1. 수신자가 사용할 것과 같은 가져오기·내보내기 경로로 저장된 SVG를 여세요.
2. 브라우저 미리보기와 색상 및 반투명 가장자리를 비교하세요.
3. 도형을 선택하고 채우기를 확인하세요. 의도한 새 값이 들어 있나요, 아니면 효과 아래 원래 페인트가 있나요?
4. 한 번 저장하고 다시 여세요. 효과가 필요하다면 필터 정의와 참조가 유지됐는지 확인하세요.
5. 수신자에게 일반적인 편집 가능 단색이 필요하면 직접 채우기 버전을 쓰고 그 전달 사본에서 불필요해진 필터를 제거하세요.

그라디언트, 스트로크, 불투명도나 혼합된 겹침에는 전역 행렬이 범용 찾기·바꾸기 도구가 아닙니다. 의도한 모양을 원본 페인트로 재구성하려면 16진수 두 값 이상을 편집해야 할 수 있습니다. 래스터 전달물이 괜찮다면 확인한 모양을 PNG로 내보내는 것도 방법입니다. 벡터 원본은 따로 보관하세요.

이 작업 흐름에 PerfectVector가 필요한 경우

이미 이 두 경로가 있다면 직접 편집하세요. 색상 필터를 제거하려고 래스터화하고 다시 추적할 이유는 없습니다.

시작할 그림이 PNG나 JPG이고 편집 가능한 영역이 필요하다면 PerfectVector가 관련됩니다. 이미지 벡터 변환으로 벡터 후보를 준비하고 색을 바꾸기 전에 도형 경계와 작은 세부를 확인하세요. 비트맵에 필터를 적용하면 모양은 바뀌지만 비트맵은 픽셀 콘텐츠로 남습니다. 삽입 래스터 검사는 그 사례와 선택·편집 가능한 경로를 구분하는 데 도움이 됩니다.

사진에 단순히 색조를 입히려면 래스터 작업 흐름을 유지하세요. 벡터 원본이 있는 로고는 원본을 사용하세요. 벡터화 개요는 픽셀에서 도형을 복원하는 단계가 언제 유용한지 설명합니다.

FAQ

feColorMatrix가 SVG의 fill 값을 바꾸나요? 아닙니다. 렌더링된 색상 채널을 변환합니다. 별도로 편집하지 않으면 원본 fill 속성은 그대로입니다.

선택한 회색이 예상보다 밝은 이유는 무엇인가요? 필터 계산 공간을 확인하세요. SVG 필터 프리미티브는 linearRGB가 기본입니다. 행렬 상수가 정규화된 sRGB 색상 표본 값이라면 color-interpolation-filters를 sRGB로 설정하세요.

색을 바꾸면서 투명도는 어떻게 유지하나요? 알파 행을 0 0 0 1 0으로 유지하세요. 입력 알파가 유지됩니다. 반투명 가장자리를 확인하고 투명도를 바꾸려는 경우가 아니면 알파 오프셋을 더하지 마세요.

필터를 적용한 PNG가 편집 가능한 벡터가 될 수 있나요? 색상 필터는 도형이 아니라 모양을 바꿉니다. 개별 벡터 도형을 편집하려면 벡터 원본을 구하거나 래스터를 벡터화하고 생성된 경로를 확인하세요.

Sources

1. MDN: feColorMatrix — 행렬 행, 채널과 사용 가능한 변환 유형을 정의합니다.
2. MDN: color-interpolation-filters — linearRGB 기본값과 명시적 sRGB 선택을 설명합니다.
3. W3C: Filter Effects, feColorMatrix — 색상과 알파 변환 동작을 규정합니다.
4. MDN: 채우기와 스트로크 — SVG 도형이 사용하는 원본 페인트를 설명합니다.

그림이 픽셀로만 있고 색을 따로 편집해야 한다면 이미지를 벡터 후보로 변환하세요. 경로를 확인하고 원본 페인트의 색을 바꾼 뒤 전달 파일을 다시 열어 모양과 편집 가능성을 모두 확인하세요.