SVG 알파 임계값: 투명도를 확실한 경계로 나누기

알파 임계값을 0.5로 설정하려면 feComponentTransfer 안에 <feFuncA type="discrete" tableValues="0 1"/>를 사용하세요. 입력 알파가 0.5보다 작으면 투명해지고, 그 이상이면 불투명해집니다. RGB 채널의 전송 매핑을 항등으로 유지하려면 RGB 함수를 생략하세요.

이 필터는 렌더링되는 알파를 바꿀 뿐, 원본 그림 구조를 바꾸지 않습니다. 알파가 1인 흰색 픽셀도 불투명한 유색 픽셀과 같은 임계값을 통과하므로 불투명한 흰 배경을 제거할 수 없습니다. SVG 안에 삽입한 PNG도 계속 래스터 이미지로 남습니다.

임계값을 고르기 전에 알려진 원본 픽셀 비교하기

알파가 점진적으로 변하는 영역, 투명한 정사각형 구멍, 불투명한 흰 패치와 통제된 색상 표본 여섯 개가 있는 작은 8비트 RGBA PNG를 직접 만들었습니다. 테스트의 각 SVG는 같은 PNG 바이트를 이미지 요소 하나에 삽입합니다. 필터 없는 버전, discrete 버전, 보간 table 버전은 필터 설정만 다릅니다.

아래 체커보드는 SVG 바깥의 주변 페이지에 속합니다. 이미지 알파 채널의 일부인 것처럼 보이게 하지 않고 투명도를 드러냅니다.

페이지에서 실제 SVG 변형을 불러와 브라우저 캔버스에 그린 뒤 색상 표본 여섯 개의 내부를 측정했습니다. 출력 알파 바이트는 다음과 같습니다.

정규화된 알파 값은 이 바이트를 255로 나눈 값입니다. 따라서 127/255는 0.5보다 조금 작고, 128/255는 조금 큽니다. 두 표본은 수학적 임계값 양쪽에 위치하며, 8비트 PNG 바이트로 정확한 0.5를 표현할 수는 없습니다.

원본 구멍은 모든 버전에서 알파가 0으로 측정됐습니다. 흰 패치는 모두 255였습니다. 이는 통제된 예제에서 관찰한 결과이며, 임의의 그림도 임계값 처리 후 원하는 세부를 모두 유지한다는 주장은 아닙니다.

알파에 전송 함수 적용하기

핵심 필터는 짧습니다.

<filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter>

이미지에 filter="url(#alpha)"로 적용하세요. 이 예제의 필터 영역은 320 × 240 원본과 뷰포트 전체를 덮습니다. 무관한 파일에 이 크기를 복사하지 말고 자신의 그림에 맞는 경계를 사용하세요.

MDN feFuncA 참고 문서는 이를 feComponentTransfer 내부의 알파 전송 함수로 설명합니다. component-transfer 참고 문서는 채널별 재매핑과 알파를 미리 곱하지 않은 색상 값에 대한 계산을 설명합니다.

현재 Filter Effects 명세는 지정하지 않은 채널 함수에 항등 매핑을 적용합니다. 이 마크업은 feFuncR, feFuncG, feFuncB를 생략하고 알파 전송 함수만 바꿉니다. 그렇다고 배경 위에서 보이는 색상이 같다는 뜻은 아닙니다. 알파가 바뀌면 합성된 모습도 바뀝니다.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240" viewBox="0 0 320 240">
<defs><filter id="alpha" filterUnits="userSpaceOnUse"
  x="0" y="0" width="320" height="240">
  <feComponentTransfer in="SourceGraphic">
    <feFuncA type="discrete" tableValues="0 1"/>
  </feComponentTransfer>
</filter></defs>
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAADwCAYAAABxLb1rAAAJ6ElEQVR4nO3UVexsZxXG4eLBnRXcIVD3tKey66krENwhuEPQHjTFneAOwR2CM2hw6ql7m3rx4If3kgsCf+ierpk9z5c89+/6Ln4b1bphI4BV1D4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPWKOrxdXjGnHNuFZcO64T143rxfXjBnHDuFHcOG4SN42bxc3jFnHLuFVU3DpuE7eN28Xt4w5xx7hT3DnuEneNu8Xd4x5xz7hX3Ds2jk1i09gsNo8tYsvYKraObWLb2C62jx1ix1gXO8XOsUvsGkPsFrvHHrFn7BV7xz6xb+wX+8cBcWAcFAfHIXFoHBaHxxFxn7hv3C/uHw+IB8aD4sHxkHhoPCweHo+IR8aj4tHxmHhsPC4eH0+IJ8aT4snxlHhqPC2eHs+IZ8az4tnxnHhuPC+eHy+IF8aL4shYHy+Ol8RL42Xx8nhFHBWvjFfFq+M18dp4Xbw+3hBvjDfFm+Mt8dZ4W7w93hHvjHfFu+M98d54X7w/PhAfjA/Fh+Mj8dH4WHw8PhGfjE/Fp+Mz8dn4XHw+vhBfjC/Fl+Mr8dX4Wnw9vhHfjG/Ft+M7MYvvxvfi+/GD+GH8KH4cP4mfxs/i5/GL+GX8Ko6OY+LYOC6OjxPixDgpTo5T4tQ4LU6PM+LMOCvOjnPi3Dgvzo8L4sK4KC6OS+LSuCwujyvi1/Gb+G38Ln4ff4g/xp/iz/GX+Gv8Lf4e/4gN1d8OASwBFEABFEABFMASQAEUQAEsARRAARTA7gFrJIACKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACKIAlgAIogAIogAJYAiiAAiiAJYACKIACuOAEUAAFUAAFsARQAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQAAWwBFAABVAABVAASwAnEcANTa8EsJ0ACqAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACqAAlgAKoAAKoAAKYAmgAAqgAJYACqAACuCCE0ABFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABFEABLAEUQAEUwBJAARRAARRAASwBFEABFMASQAEUQAEUQAEsARRAARTAuvIB7P6b/0YABVAABVAASwAFUAAFsARQAAVQAAVQAEsABVAAF54ACqAACqAAlgAKoAAKoAAK4BoJoAAKoAAKYAmgAAqgAJYACqAACqAACmAJoAAK4MITQAFc+QDG0XFMHBvHxfFxQpwYJ8XJcUqcGqfF6XFGnBlnxdlxTpwb58X5cUFcGBfFxXFJXBqXxeVxRQlgOwEUQAEUQAEsARRAARRAARTANRJAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARTAhSeAAiiAAiiAJYACKIACKIACuEYCKIACKIACWAIogAIogCWAAiiAAiiAAlgCKIACuPAEUAAFUAAFsARQAAVQAAVQANdIAAVQAAVQAEsABVAABbAEUAAFUAAFUABLAAVQABeeAAqgAAqgAJYACqAACqAACuAaCaAACqAACmAJoAAKoACWAAqgAAqgAApgCaAACuDCE0ABFEABFMASQAEUQAEUQAFcIwEUQAEUQAEsARRAARTAEkABFEABFMBRArhxbBKbxmaxeWwRW8ZWsXVsE9vGdrF97BA7xrrYKXaOXWLXGGK32D32iD1jr9g79ol9Y7/YPw6IA+OgODgOiUPjsDg8jigBFEABFMASQAEUQAEUQAEsARRAARTAEkABFEABXAICKIACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIACKIAlgAIogAJYAiiAAiiAAiiAJYACKIACWAIogAIogAIogCWAAiiAAlgCKIACKIALTgAFUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFUAAFsARQAAVQAEsABVAABVAABbAEUAAFUABLAAVQAAVQAAWwBFAABVAASwAFUAAFcMEJoAAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAKoACWAAqgAApgCaAACqAACqAAlgAKoAAKYAmgAAqgAAqgAJYACqAACmAJoAAKoAAuOAEUQAEUQAEsARRAARRAARTAEkABFEABLAEUQAEUQAEUwBJAARRAASwBFEABFMCJBJDFssgB7P4blkj7AJaSADIJ7QNYWosYwO4/Ycm0D2CpLVIAu/+CJdQ+gKUmgCy19gEsvUUIYPcfsKTaBzAJnQHsvp0l1j6ASRBAllL7ACajI4DdN7Pk2gcwKVdlALtvZQLaBzApAshSaR/A5FwVAey+kYloH8AkzTOA3bcxIe0DmCQBZCm0D2Cy5hHA7puYmPYBTNqYAey+hQlqH8CkCSALrX0AkzdGALtvYKLaB7ASrkwAu7czYe0DWAkCyEJqH8DK+H8C2L2ZiWsfwEr5XwLYvZUV0D6AlSKALJT2AayctQSweyMron0AK+k/BbB7GyukfQArSQBZCO0DWFn/LoDdm1gx7QNYaf8awO4trKD2Aaw0AaRV+wBW3voF2MCKah8A0KV9AECX9gEAXdoHAHRpHwDQpX0AQJf2AQBd2gcAdGkfANClfQBAl/YBC2xoMvYdRzYZ+471Tca+Y9Zk7Ds2NBn1jrE/ZUqGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEcOKGJmPfIYACOJvDHQI4cUOTse8QQAGczeEOAZy4ocnYdwigAM7mcIcATtzQZOw7BFAAZ3O4QwAnbmgy9h0CKICzOdwhgBM3NBn7DgEUwNkc7hDAiRuajH2HAArgbA53CODEDU3GvkMABXA2hzsEEGCZtQ8A6NI+AKBL+wCALu0DALq0DwDo0j4AoEv7AIAu7QMAurQPAOjSPgCgS/sAgC7tAwC6tA8A6NI+AKDLPwG8PYVZS9xMPAAAAABJRU5ErkJggg==" width="320" height="240" filter="url(#alpha)"/>
</svg>

완전한 예제는 PNG 바이트를 유지합니다. 필터는 저장된 원본 파일의 색을 바꾸거나 경로로 교체하지 않습니다. 삽입된 래스터 진단은 바깥 파일명의 .svg만으로 벡터 도형이라고 판단할 수 없는 이유를 설명합니다.

계단형 전송과 보간 테이블 구분하기

두 전송 유형 모두 tableValues를 사용하지만 항목 해석 방식이 다릅니다. type 참고 문서는 사용 가능한 전송 함수를 정리하며, tableValues 참고 문서는 조회 목록을 설명합니다.

discrete에서는 각 항목이 같은 길이의 입력 구간을 차지합니다. 항목이 0 1 두 개면 첫 구간은 0 ≤ A < 0.5, 두 번째는 0.5 ≤ A ≤ 1입니다. 출력이 두 값 사이에서 갑자기 바뀝니다.

table에서는 항목이 선형 보간 구간의 끝점입니다. 0 1이면 보간을 통해 각 입력 알파가 자기 자신으로 매핑됩니다. 항등 전송이므로 측정한 table 열과 필터 없는 열이 일치합니다.

명세의 구간 수식은 다음 대안도 설명합니다.

스크린샷에서는 항목 두 개의 discrete와 table 사례를 테스트했습니다. 항목 네 개의 행은 명세의 매핑을 설명하며 추가로 측정한 그림 변형은 아닙니다. 0과 1만 있는 목록이면 반드시 이진 임계값이 된다고 가정하지 말고 type을 의도에 맞게 선택하세요.

입력 알파와 이후 불투명도 구분하기

필터에 실제 원본 알파를 입력하세요. 이 예제에서는 알파가 PNG 픽셀에 저장되어 있습니다. 벡터 테스트에서는 필터를 적용하기 전에 채우기의 알파 또는 fill-opacity를 사용하세요.

Filter Effects 합성 모델은 불투명도보다 필터를 먼저 적용합니다. 따라서 요소나 주변 그룹의 전체 불투명도는 필터 이후 렌더링 결과를 낮출 수 있습니다. 원본에 임계값을 적용한 뒤 낮은 불투명도로 합성하면 다시 반투명하게 보일 수 있습니다. 통제된 임계값 테스트에서는 이 후속 불투명도를 제외하세요.

확실한 임계값은 원본의 반투명 전이도 버립니다. 희미한 픽셀은 사라지고, 유지된 반투명 픽셀은 완전히 불투명해집니다. 의도한 부드러운 빛 번짐이나 얇은 가장자리를 제거할 수 있습니다. 실제 사용 크기와 여러 배경에서 결과를 확인하세요. 출력 알파가 이진값이어도 최종 표시 가장자리에 샘플링이나 합성 효과가 없다고 보장되지는 않습니다.

반투명이 디자인의 일부라면 유지하거나 확실한 임계값 대신 점진적 전송을 사용하세요. 의도적으로 단색 가시성 마스크를 만들려면 SVG CSS 마스크 가이드가 별도의 표시 작업 흐름을 다룹니다.

불투명한 흰색은 다른 방식으로 진단하기

흰 패치는 알파가 완전히 불투명하므로 남습니다. 이 연산은 픽셀이 흰색처럼 보이는지가 아니라 알파로 선택합니다. 완전히 불투명한 배경 픽셀은 이 0 1 discrete 매핑에서도 투명해지지 않습니다.

파일에 원하지 않는 흰 배경이 있다면 먼저 별도 SVG 도형인지, 래스터 이미지의 일부인지 확인하세요. 원하지 않는 벡터 배경 도형은 직접 삭제하거나 편집하세요. PNG 픽셀에 흰색이 합쳐져 있다면 복원 전에 래스터 원본을 정리하거나 적합한 배경 제거 작업을 사용하세요. 투명 배경 SVG 가이드는 이러한 사례를 설명합니다.

색상으로 배경을 제거하기 전에 피사체에서 실제로 흰 부분도 고려하세요. 이 알파 필터는 어느 흰 영역이 배경이고 어느 영역이 그림에 속하는지 추론할 수 없으며, 원본을 평면화하면서 잃어버린 색 정보도 복원할 수 없습니다.

벡터 복원 전에 투명한 래스터 준비하기

완성된 디자인이 래스터로만 있고 SVG 도형이 필요하다면 PerfectVector가 도움이 될 수 있습니다. 먼저 실제 투명도가 있는 PNG를 준비하고 PNG를 SVG로 변환하세요. 대비되는 배경 위에서 미리보기를 비교하고 실루엣과 구멍을 확인한 뒤, 다운로드 파일에 원하지 않는 배경 도형이 있는지 점검하세요.

필터 예제는 표시 실험입니다. 필터가 적용된 SVG를 벡터화에 제출하지 않으며 새로 추적한 결과도 보여 주지 않습니다. 임계값 처리된 래스터 모습을 유지해야 한다면 벡터 복원을 고려하기 전에 편집기에서 실제 래스터 전달용 사본을 준비하고 검증하세요. 브라우저 미리보기에 의존하지 말고 그 사본의 알파를 확인하세요.

벡터 원본이 있다면 그대로 사용하세요. 반투명이 유용한 디자인 정보를 담고 있다면 유지하고, 단순한 기호는 직접 다시 그리는 편이 관리하기 쉽다면 그렇게 하세요. 이미지 벡터화 개요는 래스터 재구성과 기존 SVG의 표시 변경을 구분합니다.

FAQ

discrete tableValues 0 1은 어떤 알파 임계값을 사용하나요? 입력 알파가 0.5보다 작으면 0, 그 이상이면 1로 매핑됩니다. 테스트한 8비트 PNG 표본에서는 바이트 127은 투명해지고 128은 불투명해집니다.

tableValues 0 1이 투명도를 바꾸지 않는 이유는 무엇인가요? type이 table이면 두 항목이 0에서 1까지의 선형 보간을 정의하며, 이는 항등 매핑입니다. 여기서 보여 준 두 단계 매핑에는 type discrete를 사용하세요.

흰색을 제거하거나 PNG를 벡터 경로로 바꿀 수 있나요? 아닙니다. 완전히 불투명한 흰색은 이 알파 임계값을 통과합니다. SVG 변형은 여전히 이미지 요소 하나에 같은 PNG를 포함하며 경로는 0개입니다. 배경 정리와 벡터 재구성은 별개의 작업입니다.

Sources

1. W3C — Filter Effects Level 1 — 항등 기본값, 알파를 미리 곱하지 않은 채널 전송, table/discrete 구간 수식을 정의합니다.
2. MDN — feComponentTransfer — 필터 프리미티브가 수행하는 채널 재매핑을 설명합니다.
3. MDN — feFuncA — 알파 채널 전송 함수를 설명합니다.
4. MDN — type — 성분 전송 함수 유형과 속성의 맥락을 정리합니다.
5. MDN — tableValues — table 및 discrete 전송이 사용하는 조회 항목을 설명합니다.

래스터 디자인에서 벡터 도형이 필요한가요? 투명한 PNG를 준비해 변환한 뒤 미리보기의 실루엣과 구멍을 확인하고, 다운로드한 SVG를 유색 배경 위에서 검증하세요.