SVG 경계 검출: feConvolveMatrix 미리보기

SVG feConvolveMatrix를 이용한 경계 검출은 색 경계 주변에 렌더링되는 픽셀을 바꿉니다. SVG 안에 들어 있는 PNG로 경계 미리보기를 만들 수 있지만, 편집 가능한 윤곽 경로가 생성되지는 않습니다. 다음 작업이 로고 편집, 선화 준비, 웹용 아트워크 제작이라면 이 차이를 분명히 알아 두세요.

모양을 알고 있는 작은 회색조 이미지로 첫 시험을 해 보면 좋습니다. 대칭적인 경계 검출 커널을 적용하고 알파를 유지한 뒤 원본과 비교하세요. 그다음 SVG 요소를 살펴봅니다. 경계가 더 선명해 보인다고 해서 이미지가 벡터 도형으로 바뀐 것은 아닙니다.

조건을 통제한 경계 미리보기부터 만들기

feConvolveMatrix 참고 문서는 합성곱을 입력 픽셀과 그 주변 픽셀을 이용한 계산으로 설명합니다. 다음 3 × 3 커널은 중심 픽셀의 8배에서 주변 픽셀 여덟 개를 뺍니다.

-1 -1 -1
-1  8 -1
-1 -1 -1

계수의 합은 0입니다. 균일한 영역에서는 응답이 0이 되고, 밝기가 달라지는 지점에서는 양수나 음수가 될 수 있습니다. bias="0"에서는 음수 결과가 색상값의 하한에서 잘립니다. 따라서 미리보기에 모든 경계의 양쪽이 똑같이 나타나지는 않습니다.

예제에서는 divisor="1"을 명시합니다. divisor 참고 문서는 이 값으로 나누는 정규화와, 계수 합이 0인 커널에서 기본값이 1이라는 점을 설명합니다. 또한 color-interpolation-filters="sRGB"를 설정해 필터 프리미티브의 기본 linearRGB 처리 대신 sRGB 채널값을 사용합니다.

다음의 완전한 독립 파일을 edge-preview.svg로 저장하고 브라우저에서 여세요. 내장된 PNG는 불투명한 흰 바탕 위에 직접 만든 48 × 48 회색조 마름모입니다. 가운데는 투명하지 않고 흰색입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <defs>
    <filter id="effect" filterUnits="userSpaceOnUse" x="0" y="0" width="48" height="48" color-interpolation-filters="sRGB">
      <feConvolveMatrix in="SourceGraphic" order="3" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1" divisor="1" bias="0" targetX="1" targetY="1" edgeMode="duplicate" preserveAlpha="true"/>
    </filter>
  </defs>
  <image width="48" height="48" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABOklEQVR4nNWZQQ7EIAwDU7+seTlPo1ppTyvRhcQGxYeeGuNpEZT06r13KyxYccGKC1ZcsOKCFRfUA7h7XQD/hldCQGX8G1oFAYXpKKwCAmzDfyHZEGCazYZjQoBltBqKBQGGSTSMEyDSANkQnqxPAbCmgSd8wgDs1cSDflAP1lqT+IYBIuGVENj15FUQUJiOwiogwDSbCcmGAMNkNRwTApniaKjV+/0lB06Ej9T5IA9Ord+rdW2Q53UKKSFYbxiZ4mgo5vQEw0R1ImsT405vZAwIxcKAacckhGpVw/SdAfNIX6gtLslX9P+AokXSAvtJ+EAT3bzYfjgxKNMHJwdn1FPaKju+heSNLeXX6LbWouI8sL25yzyRHWuvM87Ex39wZLoSS+pi3fct9b8+FyssWHHBigtWXDgdIKsHsU1cbk4FPAgAAAAASUVORK5CYII=" filter="url(#effect)"/>
</svg>

이미지가 filter="url(#effect)"로 필터를 참조하기 때문에 필터 정의가 적용됩니다. SVG filter 참고 문서는 정의 자체는 그려지지 않는다고 설명합니다. 명시한 필터 영역은 이 48 × 48 원본을 덮습니다. 다른 그림에서는 영역을 따로 확인해야 합니다.

브라우저 시험에서 달라진 점

직접 만든 시험 파일 여섯 개를 Chrome에서 48 및 192 CSS 픽셀 크기로 살펴봤습니다. 다섯 파일에는 내장 PNG 이미지가 하나씩 있고 경로는 없습니다. 여섯 번째는 별도로 직접 작성한 벡터 비교본입니다. 도형 비교를 위한 대조군이며, 필터를 적용하거나 PNG를 트레이싱한 결과가 아닙니다.

RGBA 표본은 렌더링한 각 SVG를 48 × 48 Canvas로 읽어 얻었습니다. 화면에 표시한 시험 파일은 두 크기에서 별도로 확인했습니다. 이는 이 원본과 브라우저에서의 관찰 결과이며, 호환성이나 가독성을 보장하지는 않습니다. 래스터 기반 미리보기를 확대해도 더 깔끔한 윤곽이 복원되지는 않았습니다.

픽셀 응답과 편집 가능한 도형

바탕을 지우지 않고 사라진 결과 복구하기

preserveAlpha의 기본값은 false입니다. 이 설정에서는 커널이 알파도 처리합니다. 불투명한 입력의 알파는 모든 위치에서 1이므로, 합이 0인 경계 커널은 균일한 색과 함께 균일한 알파도 상쇄합니다. 확인한 시험 이미지에서는 결과가 사라졌습니다.

preserveAlpha="true"로 설정하면 색을 처리하면서 원본 알파는 유지합니다. preserveAlpha 참고 문서는 이 차이를 설명합니다. 이 시험에서는 불투명한 경계 미리보기가 복구됩니다. 불투명한 바탕과 흰 가운데의 필터 처리 색이 검게 바뀌어도 해당 부분은 계속 불투명하게 유지됩니다. 알파를 보존하는 것은 배경을 제거하거나 로고의 구멍을 찾는 작업이 아닙니다.

미리보기가 대부분 검게 보인다면 먼저 균일하다고 알고 있는 영역과 경계라고 알고 있는 곳을 비교하세요. 검정은 올바른 0 응답일 수 있습니다. 중간 톤을 기준으로 양수와 음수의 밝기 변화를 살펴보려면 bias="0.5"를 사용해 보세요. bias 참고 문서는 나눗셈 뒤에 더하는 오프셋을 설명합니다. 이는 표시 범위를 바꾸는 것이며 SVG의 도형을 바꾸지는 않습니다.

그림과 테두리를 따로 점검하기

처음 비교할 때는 edgeMode="duplicate"를 유지하세요. 이 설정은 이웃 표본이 입력 바깥에 있을 때 가장자리 픽셀값을 확장합니다. none은 값이 0인 RGBA 표본을 사용하고, wrap은 반대쪽 가장자리에서 표본을 가져옵니다. edgeMode 참고 문서에서 각각 다른 규칙으로 정의합니다.

불투명한 흰 카드에서는 duplicate만 none으로 바꾸자 카드 바깥쪽에 밝은 테두리가 생겼습니다. 이 경계는 마름모가 아니라 이미지 사각형의 경계입니다. 테두리를 그림의 윤곽으로 판단하기 전에 필터를 적용하지 않은 파일과 비교하세요.

Filter Effects 규격은 커널의 기준 위치와 표본 추출 동작을 정의합니다. 여기서는 targetX="1"과 targetY="1"로 3 × 3 커널의 기준을 중앙에 둡니다. 이 시작 예제에서는 kernelUnitLength를 설정하지 않습니다. 모든 표시 크기에서 이웃 표본 사이가 항상 SVG 사용자 단위 하나라고 가정하지 말고, 실제 전달할 렌더링을 확인하세요.

선명화는 비교용으로 사용하고 흐림 복원으로 여기지 않기

채워진 그림을 유지하면서 국소적인 변화를 강조하려면 kernelMatrix만 다음과 같이 바꿉니다.

0 -1  0
-1 5 -1
0 -1  0

합은 1입니다. 균일한 채널값 c는 divisor가 1이고 bias가 0일 때 5c - 4c = c로 돌아옵니다. 이 시험 이미지에서는 단색 회색 표본이 64를 유지한 반면 경계 픽셀은 바뀌었습니다. 이 비교에서는 preserveAlpha="true"와 edgeMode="duplicate"를 유지하세요.

선명화는 유용한 경계뿐 아니라 잡음과 후광도 강조할 수 있습니다. 이미지가 필터에 도달하기 전에 잃어버린 원본 디테일을 복원하지는 못합니다. 확대한 미리보기가 좋지 않다면 더 강한 커널로 원본 해상도를 대신하려 하지 말고 원본 이미지로 돌아가세요.

벡터 트레이싱 결과라고 부르기 전에 파일 확인하기

이 글의 시작 예제에는 href가 data:image/png로 시작하는 <image>가 있습니다. image 요소 참고 문서는 이 요소가 표시할 수 있는 래스터 및 SVG 리소스를 설명합니다. 여기서는 미디어 유형으로 내장된 래스터임을 알 수 있으며, 경계 필터를 적용해도 해당 요소는 그대로 남습니다.

비교를 위해 별도로 작성한 원본은 흰 사각형 위에 다음 복합 경로를 사용합니다.

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
  <rect width="48" height="48" fill="white"/>
  <path d="M24 6 L42 24 L24 42 L6 24 Z M24 17 L31 24 L24 31 L17 24 Z"
        fill="#404040" fill-rule="evenodd"/>
</svg>

이 좌표는 따로 작성했습니다. 필터를 적용한 이미지에서 복원한 것이 아니므로, 픽셀 그림과 도형 대조군의 모든 경계 표본이 일치할 필요는 없습니다. 내장 래스터 확인 가이드는 확대만으로 판단하지 않고 여러 요소가 섞인 SVG를 점검하는 방법을 설명합니다.

웹용 그림은 필터를 적용하지 않은 SVG 원본을 보관하고, 효과가 디자인에 도움이 될 때 필터를 적용한 표시용 사본을 사용하세요. 편집이나 제작용 경로가 필요하다면 실제 원본 윤곽과 안쪽 구멍을 점검합니다. 선화를 SVG로 변환하는 가이드는 이러한 도형 작업을 다룹니다.

평면적인 PNG 또는 JPG 그림에서 시작해 편집 가능한 원본 도형이 필요할 때 PerfectVector가 적합합니다. 원본 이미지를 SVG로 변환하고 윤곽과 안쪽 구멍을 확인한 다음 깔끔한 결과를 원본으로 보관하세요. 경계 미리보기가 잘 나와도 이 점검을 대신할 수는 없습니다. 벡터화 가이드는 경로 재구성과 이미지 효과 적용의 차이를 설명합니다.

자주 묻는 질문

SVG feConvolveMatrix 경계 검출로 벡터 경로가 생성되나요? 아닙니다. 렌더링되는 픽셀 효과를 계산합니다. 이 예제의 내장 PNG는 이미지 요소로 남으며, 편집 가능한 윤곽에는 별도로 그리거나 트레이싱한 도형이 필요합니다.

경계 필터를 적용하면 그림이 사라지는 이유는 무엇인가요? preserveAlpha를 확인하세요. 기본값인 false에서는 알파도 필터링합니다. 이 불투명한 시험 이미지에서는 합이 0인 커널 때문에 결과가 투명해졌습니다. 알파를 유지하자 불투명한 미리보기가 복구됐습니다.

preserveAlpha는 흰 배경을 제거하나요? 아닙니다. 원본의 알파를 유지합니다. 불투명한 흰 배경은 필터 처리된 색이 검게 바뀌어도 계속 불투명합니다. 배경 제거와 경로 재구성은 별도 작업입니다.

경계 필터가 이미지 주변에 테두리를 그리는 이유는 무엇인가요? edgeMode와 입력 사각형을 확인하세요. 이 불투명한 흰 카드 바깥에 값이 0인 표본을 사용하자 밝은 외곽 테두리가 생겼습니다. 이 시험 이미지에서는 가장자리 픽셀을 복제하는 방식으로 해당 테두리를 피할 수 있었습니다.

출처

1. MDN: feConvolveMatrix — 주변 픽셀을 이용한 합성곱과 기본 색상 처리입니다.
2. MDN: divisor — 정규화와 합이 0인 경우의 기본값입니다.
3. MDN: filter — 필터 효과를 정의하고 적용하는 방법입니다.
4. MDN: preserveAlpha — 색만 처리하는 경우와 알파를 함께 처리하는 경우를 설명합니다.
5. MDN: bias — 나눗셈 뒤에 응답을 이동시키는 방법입니다.
6. MDN: edgeMode — 가장자리 복제, 반대편 연결, 0값 테두리 처리입니다.
7. W3C: Filter Effects, feConvolveMatrix — 기준 위치와 표본 추출 규칙입니다.
8. MDN: image — 참조하는 래스터 및 SVG 이미지 콘텐츠입니다.