필터 효과 모듈 레벨 1

1. 소개

이 섹션은 규범적이지 않습니다

필터 효과는 요소가 문서에 그려질 때 적용되는 그래픽 작업입니다. 이는 이미지 기반 효과로, 0개 이상의 이미지를 입력으로 받고, 효과에 특화된 여러 매개변수를 받아 하나의 이미지를 출력합니다. 출력 이미지는 원래 요소 대신 문서에 렌더링되거나, 다른 필터 효과의 입력 이미지로 사용되거나, CSS 이미지 값으로 제공될 수 있습니다.

필터 효과의 간단한 예는 “플러드”입니다. 이 효과는 이미지 입력을 받지 않지만 색상을 정의하는 매개변수가 있습니다. 이 효과는 지정된 색상으로 완전히 채워진 출력 이미지를 생성합니다. 조금 더 복잡한 예는 “반전”으로, 하나의 이미지 입력(일반적으로 요소가 원래 부모에 렌더링되는 이미지)을 받아 각 픽셀의 색상 값을 반대로 조정합니다.

필터 효과는 두 가지 복잡도 수준으로 제공됩니다:

1. 이름으로 제공되는 소수의 기본 필터 함수 집합. 이들은 특히 강력하지는 않지만, 편리하고 쉽게 이해할 수 있으며 흐림과 같은 일반적인 효과를 간단하게 달성할 수 있습니다. 기본 필터는 [CSS3-ANIMATIONS]에 의해 애니메이션할 수도 있습니다.

2. 전체 효과를 정의하는 마크업 내 개별 필터 효과의 그래프. 이 그래프는 입력에 대해 독립적이어서 어떤 콘텐츠에도 효과를 적용할 수 있습니다. 이러한 그래프는 단독으로는 단순한 효과의 조합일 수 있지만, 전체적으로는 복잡한 효과를 생성할 수 있습니다. 아래에 예시가 제시되어 있습니다.

이 예제에서는 이미지에 <grayscale()> 필터 함수가 적용됩니다.

#image {
    filter: grayscale(100%);
}

필터가 없는 이미지(왼쪽)와 100% 그레이스케일 필터가 적용된 동일한 이미지(오른쪽).

다음은 개별 필터 효과 그래프의 예시를 보여줍니다.

필터가 적용된 객체의 초기 예시.

이 예제를 SVG로 보기

위의 예제에서 사용된 필터 효과는 여기에 왼쪽 열의 참조 번호와 함께 여섯 개의 필터 프리미티브 앞에 반복되어 있습니다:

1 2 3 4 5 6

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120"> <desc>Produces a 3D lighting effect.</desc> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/> <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter>

다음 그림들은 여섯 개의 필터 요소 각각에서의 중간 이미지 결과를 보여줍니다:

소스 그래픽

필터 프리미티브 1 이후

필터 프리미티브 2 이후

필터 프리미티브 3 이후

필터 프리미티브 4 이후

필터 프리미티브 5 이후

필터 프리미티브 6 이후

1. 필터 프리미티브 feGaussianBlur는 입력으로 SourceAlpha를 받아(소스 그래픽의 알파 채널), 결과를 "blur"라는 임시 버퍼에 저장합니다. "blur"는 필터 프리미티브 2와 3 모두의 입력으로 사용됩니다.

2. 필터 프리미티브 feOffset는 "blur" 버퍼를 받아 x, y 모두 양의 방향으로 결과를 이동시키고 "offsetBlur"라는 새로운 버퍼를 만듭니다. 이 효과는 그림자 효과와 유사합니다.

3. 필터 프리미티브 feSpecularLighting는 "blur" 버퍼를 표면 고도 모델로 사용하여 단일 점광원으로 라이팅 효과를 생성합니다. 결과는 "specOut" 버퍼에 저장됩니다.

4. 필터 프리미티브 feComposite는 3번 필터의 결과를 원래 소스 그래픽의 알파 채널로 마스킹하여 중간 결과가 원래 소스 그래픽보다 크지 않도록 합니다.

5. 필터 프리미티브 feComposite는 스펙큘러 라이팅의 결과를 원래 소스 그래픽과 합성합니다.

6. 필터 프리미티브 feMerge는 두 레이어를 합성합니다. 하위 레이어는 2번 필터 프리미티브의 그림자 결과, 상위 레이어는 5번 필터 프리미티브의 스펙큘러 라이팅 결과로 구성됩니다.

2. 모듈 상호작용

이 명세는 해당 속성이 적용된 요소의 시각적 렌더링에 영향을 주는 일련의 CSS 속성을 정의합니다. 이러한 효과는 시각적 포맷팅 모델 [CSS21]에 따라 요소의 크기와 위치가 결정된 후에 적용됩니다. 이 속성의 일부 값은 포함 블록 및/또는 스태킹 컨텍스트를 생성합니다.

합성 모델은 SVG 합성 모델 [SVG11]을 따릅니다: 먼저 필터 효과가 적용되고, 그 다음 클리핑, 마스킹, 불투명도 [CSS3COLOR]가 적용됩니다. 이러한 모든 효과는 border [CSS3BG]와 같은 기타 CSS 효과 이후에 적용됩니다.

이 명세의 일부 속성 및 요소 정의는 SVG 1.1 구현 [SVG11]이 필요합니다. SVG를 지원하지 않는 UA는 color-interpolation-filters, flood-color, flood-opacity, lighting-color 속성과 filter 요소, feMergeNode 요소, 전이 함수 요소, 필터 프리미티브 요소를 구현해서는 안 됩니다.

3. 값

이 명세는 CSS 속성 정의 규칙 [CSS21]을 따릅니다. 이 명세에 정의되지 않은 값 유형은 CSS 값 및 단위 모듈 레벨 3 [CSS3VAL]에서 정의됩니다.

정의된 각 속성의 속성별 값 외에도, 이 명세에서 정의된 모든 속성은 inherit 키워드를 속성 값으로 허용합니다. 가독성을 위해 명시적으로 반복하지 않았습니다.

4. 용어

이 명세에서 사용되는 용어는 이 섹션에서 할당된 의미를 가집니다.

필터 프리미티브, filter-primitive

filter 요소의 출력을 제어하는 요소 집합으로, 특히 다음과 같습니다: feSpotLight, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence.

패스스루 필터

패스스루 필터의 출력은 필터 프리미티브의 주요 입력과 동일합니다.

5. 그래픽 필터: filter 속성

filter 속성의 설명은 다음과 같습니다:

<filter-value-list> = [ <filter-function> | <url> ]+

<url>

filter 요소에 대한 필터 참조입니다. 예: url(commonfilters.svg#filter). 필터가 존재하지 않는 객체를 참조하거나 참조된 객체가 filter 요소가 아닐 경우, 전체 필터 체인을 무시하고 아무 필터도 적용하지 않습니다.

<filter-function>

필터 함수 참조.

none

필터 효과가 적용되지 않습니다.

filter 속성이 none이 아닌 값을 가지면, 적용 대상 요소의 절대 및 고정 위치 자손에 대해 포함 블록을 생성하게 됩니다(단, 현재 브라우징 컨텍스트의 문서 루트 요소인 경우는 제외). 함수 목록은 제공된 순서대로 적용됩니다.

목록의 첫 번째 필터 함수 또는 filter 참조는 요소(SourceGraphic)를 입력 이미지로 사용합니다. 이후의 연산은 이전 필터 함수 또는 filter 참조의 출력을 입력 이미지로 사용합니다. filter 요소 참조 함수는 대체 입력을 지정할 수 있지만, 이전 출력은 여전히 SourceGraphic으로 사용됩니다.

color-interpolation-filters는 필터 함수에는 영향을 주지 않습니다. 필터 함수는 반드시 sRGB 색 공간에서 동작해야 합니다.

none이 아닌 계산된 값은 스태킹 컨텍스트 [CSS21]를 생성하며, CSS opacity와 동일한 방식으로 동작합니다. 모든 요소의 자손은 필터 효과가 그룹 전체에 적용된 상태로 함께 렌더링됩니다.

filter 속성은 대상 요소의 CSS 박스 기하에 아무런 영향을 주지 않으며, filter는 요소의 border box 밖에 페인팅을 발생시킬 수 있습니다.

개념적으로, 드로잉의 모든 부분은 필터 연산의 영향을 받습니다. 여기에는 필터가 적용된 요소의 콘텐츠, 배경, 테두리, 텍스트 장식, 윤곽선, 표시되는 스크롤 메커니즘과 자손의 해당 부분이 포함됩니다. 필터 연산은 요소의 로컬 좌표계에서 적용됩니다.

합성 모델은 SVG 합성 모델 [SVG11]을 따릅니다: 먼저 필터 효과가 적용되고, 그 다음 클리핑, 마스킹, 불투명도가 적용됩니다. SVG와 동일하게, filter 적용은 히트 테스트에 영향을 주지 않습니다.

filter 속성은 SVG 요소에 대한 프레젠테이션 속성입니다.

filter가 고정 배경 이미지에서 어떻게 동작하는가? <https://github.com/w3c/csswg-drafts/issues/238>

6. 필터 함수

6.1. 지원되는 필터 함수

<filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> |    
<grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>

별도의 정의가 없는 한, 생략된 값은 보간을 위해 초기값으로 기본 설정됩니다.

참고: 일부 필터 함수의 경우 생략된 값의 기본값이 보간을 위한 초기값과 다릅니다. 콘텐츠 제작자의 편의를 위해, <grayscale()>, <sepia()>, <invert()>의 생략된 값의 기본값은 1(효과 100% 적용)이지만, 보간을 위한 초기값은 0(효과 없음)입니다.

blur() = blur( <length>? )

입력 이미지에 가우시안 블러를 적용합니다. 전달된 매개변수는 가우시안 함수의 표준편차 값을 정의합니다. 이 매개변수는 CSS 길이로 지정되지만, 백분율 값은 허용되지 않습니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 0px입니다.

보간을 위한 초기값은 0px입니다.

참고: 표준편차는 box-shadow의 blur radius와 다릅니다.

brightness() = brightness( <number-percentage>? )

입력 이미지에 선형 배율을 적용하여 더 밝거나 어둡게 만듭니다. 0% 값은 완전히 검은 이미지를 만듭니다. 100% 값은 입력을 변경하지 않습니다. 그 외 값은 효과에 선형 배율로 적용됩니다. 100%를 초과하는 값도 허용되어 더 밝게 만들 수 있습니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 1입니다.

contrast() = contrast( <number-percentage>? )

입력 이미지의 대비를 조정합니다. 0% 값은 완전히 회색 이미지를 만듭니다. 100% 값은 입력을 변경하지 않습니다. 100%를 초과하는 값도 허용되어 더 높은 대비 결과를 얻을 수 있습니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 1입니다.

drop-shadow() = drop-shadow( <color>? && <length>{2,3} )

입력 이미지에 그림자 효과를 적용합니다. 그림자는 입력 이미지의 알파 마스크를 특정 색상으로 블러 처리하여 오프셋된 버전으로 이미지를 아래에 합성하는 효과입니다. 값들은 box-shadow [CSS3BG]와 동일하게 해석되지만, 선택적 3번째 length 값은 blur radius 대신 표준편차가 됩니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

생략된 값의 기본값은 누락된 길이 값은 0이고, 사용된 색상 값이 없으면 color 속성에서 가져옵니다.

보간을 위한 초기값은 모든 길이 값이 0, 사용된 색상은 transparent입니다.

참고: spread 값이나 다중 그림자는 이 명세 레벨에서는 허용되지 않습니다.

참고: 표준편차는 box-shadow의 blur radius와 다릅니다.

grayscale() = grayscale( <number-percentage>? )

입력 이미지를 회색조로 변환합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전히 회색조로 변환합니다. 0% 값은 입력을 변경하지 않습니다. 0%~100% 사이 값은 효과에 선형 배율로 적용됩니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 클램핑해야 합니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 0입니다.

hue-rotate() = hue-rotate( [ <angle> | <zero> ]? )

입력 이미지의 색상(Hue)을 회전합니다. 전달된 매개변수는 색상 원에서 입력 샘플이 조정될 각도를 정의합니다. 0deg 값은 입력을 변경하지 않습니다. 구현은 360deg를 넘는 애니메이션을 허용하기 위해 이 값을 정규화하면 안 됩니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

단위 식별자는 angle 값이 0일 때 생략할 수 있습니다.

생략 시 기본값은 0deg입니다.

보간을 위한 초기값은 0deg입니다.

invert() = invert( <number-percentage>? )

입력 이미지의 샘플을 반전합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전히 반전합니다. 0% 값은 입력을 변경하지 않습니다. 0%~100% 사이 값은 효과에 선형 배율로 적용됩니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 클램핑해야 합니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 0입니다.

opacity() = opacity( <number-percentage>? )

입력 이미지 샘플에 투명도를 적용합니다. 전달된 매개변수는 변환 비율을 정의합니다. 0% 값은 완전히 투명하게 만듭니다. 100% 값은 입력을 변경하지 않습니다. 0%~100% 사이 값은 효과에 선형 배율로 적용됩니다. 이는 입력 이미지 샘플을 amount 값으로 곱하는 것과 동일합니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 클램핑해야 합니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 1입니다.

참고: opacity 필터 함수는 opacity 속성의 축약형이 아닙니다. 또한, 다음 필터 프리미티브로 전달하기 전에 중간 필터 프리미티브 결과의 투명도를 설정할 수 있습니다. opacity 필터 함수가 마지막 필터 프리미티브로 설정된 경우, opacity 속성 값이 필터 함수 값에 곱해져 더 투명한 콘텐츠를 만들 수 있습니다.

saturate() = saturate( <number-percentage>? )

입력 이미지의 채도를 증가시킵니다. 전달된 매개변수는 변환 비율을 정의합니다. 0% 값은 완전히 비채도(회색)로 변환합니다. 100% 값은 입력을 변경하지 않습니다. 그 외 값은 효과에 선형 배율로 적용됩니다. 100%를 초과하는 값도 허용되어 매우 채도가 높은 결과를 얻을 수 있습니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 1입니다.

sepia() = sepia( <number-percentage>? )

입력 이미지를 세피아 톤으로 변환합니다. 전달된 매개변수는 변환 비율을 정의합니다. 100% 값은 완전히 세피아로 변환합니다. 0% 값은 입력을 변경하지 않습니다. 0%~100% 사이 값은 효과에 선형 배율로 적용됩니다. 100%를 초과하는 값도 허용되지만 UA는 값을 1로 클램핑해야 합니다. 이 함수의 마크업 등가는 아래에 제시되어 있습니다.

음수 값은 허용되지 않습니다.

생략 시 기본값은 1입니다.

보간을 위한 초기값은 0입니다.

6.2. 필터 함수의 계산된 값

<filter-function> 내 값은 다음 예외를 제외하고 명시된 대로 계산됩니다:

• 생략된 값은 포함되며 기본값으로 계산됩니다.

• <drop-shadow()>는 <color>의 계산된 값으로 시작하고, 그 다음 length 값의 계산된 값이 이어집니다.

6.3. 필터 함수의 직렬화

<filter-function>을 직렬화할 때는 각 개별 문법에 따라 직렬화하고, 문법이 작성된 순서대로 직렬화하며, 가능하면 <calc()> 표현식을 피하고, 필터 인자는 명시된 대로 직렬화하며, <calc()> 변환을 피하며, 공백으로 분리된 토큰은 한 개의 공백으로 결합하고, 직렬화된 쉼표 뒤에는 한 개의 공백을 둡니다.

6.4. 필터 함수의 보간

<filter-function> 내 값의 보간을 위해, 아래 목록의 첫 번째로 일치하는 조건에 해당하는 단계를 실행해야 합니다:

<blur()>

값을 계산된 값 기준 길이로 보간합니다.

<brightness()>

<contrast()>

<grayscale()>

<invert()>

<opacity()>

<saturate()>

<sepia()>

백분율 값은 숫자로 변환되며, 0%는 0에, 100%는 1에 해당합니다. 값을 계산된 값 기준 숫자로 보간합니다.

<hue-rotate()>

값을 계산된 값 기준 숫자로 보간합니다.

<drop-shadow()>

값을 반복 가능한 리스트로 그림자 리스트로 보간합니다.

7. SVG 필터 소스: filter 요소

filter 요소에 대한 설명은 다음과 같습니다:

<number-optional-number> = <number> <number>?

속성 정의:

filterUnits = "userSpaceOnUse | objectBoundingBox"

필터 영역 참조.

primitiveUnits = "userSpaceOnUse | objectBoundingBox"

필터 프리미티브와 필터 프리미티브 서브영역을 정의하는 다양한 길이 값의 좌표계를 지정합니다.

primitiveUnits가 userSpaceOnUse일 경우, 필터 정의 내의 모든 길이 값은 로컬 좌표계(즉, filter 요소를 filter 속성으로 참조하는 요소의 사용자 좌표계)에서의 값을 나타냅니다.

primitiveUnits가 objectBoundingBox일 경우, 필터 정의 내의 모든 길이 값은 참조 요소의 경계 상자의 분수 또는 백분율을 나타냅니다(object bounding box units 참조). <number-optional-number> 값에 숫자가 하나만 지정된 경우, 이 숫자는 primitiveUnits 계산 전에 확장됩니다.

primitiveUnits의 초기값은 userSpaceOnUse입니다.

애니메이션 가능: 예

x = "<length-percentage>"

필터 영역 참조.

y = "<length-percentage>"

필터 영역 참조.

width = "<length-percentage>"

필터 영역 참조.

height = "<length-percentage>"

필터 영역 참조.

filterRes = "<number-optional-number>"

filterRes 속성은 명세에서 제거되었습니다. 정의는 SVG 1.1 명세 [SVG11] 참조.

속성은 filter 요소에 상위 요소로부터 상속되며, filter 요소를 참조하는 요소로부터는 상속되지 않습니다.

filter 요소는 직접 렌더링되지 않습니다. 오직 filter 속성을 통해 참조될 때만 사용됩니다. display 속성은 filter 요소에는 적용되지 않으므로, filter 요소는 display 속성이 none이 아닌 값으로 설정되어 있어도 직접 렌더링되지 않으며, filter 요소나 그 상위 요소의 display 속성이 none으로 설정되어 있어도 참조에 사용 가능합니다.

8. 필터 영역

filter 요소는 캔버스에서 특정 필터 효과가 적용되는 필터 영역을 정의할 수 있으며, 래스터 기반 필터 프리미티브를 처리하는 데 사용되는 중간 연속 톤 이미지의 해상도를 제공할 수 있습니다. filter 요소에는 필터 영역을 정의하기 위해 함께 작동하는 다음 속성이 있습니다:

filterUnits

x, y, width, height 속성의 좌표계를 정의합니다.

filterUnits가 userSpaceOnUse이면, x, y, width, height 값은 filter 요소가 참조될 때의 현재 사용자 좌표계(즉, filter 요소를 filter 속성으로 참조하는 요소의 사용자 좌표계)를 나타냅니다.

filterUnits가 objectBoundingBox이면, x, y, width, height 값은 참조 요소의 경계 상자에 대한 분수 또는 백분율을 나타냅니다(object bounding box units 참조).

filterUnits의 초기값은 objectBoundingBox입니다.

애니메이션 가능: 예

x, y, width, height

이 속성들은 캔버스에서 이 필터가 적용되는 직사각형 영역을 정의합니다.

이 속성들의 좌표계는 filterUnits 속성 값에 따라 달라집니다.

이 직사각형의 경계는 해당 필터 프리미티브마다 강제 클리핑 영역으로 작동합니다. 따라서 특정 필터 프리미티브의 효과가 이 직사각형 경계를 넘어설 경우(예: feGaussianBlur 필터 프리미티브에서 stdDeviation 값을 크게 줄 때), 효과의 일부가 잘릴 수 있습니다.

x와 y의 초기값은 -10%입니다.

width와 height의 초기값은 120%입니다.

ng of the element which referenced the filter.

애니메이션 가능: 예

참고: filterUnits의 두 가지 가능한 값(즉, objectBoundingBox 및 userSpaceOnUse) 모두 필터 영역의 좌표계 X축과 Y축이 필터가 적용될 요소의 로컬 좌표계의 X축과 Y축에 각각 평행하게 설정됩니다.

참고: 때때로 구현자는 필터 영역을 디바이스 픽셀에 직접 매핑할 수 있을 때 더 빠른 성능을 달성할 수 있습니다. 따라서 디스플레이 장치에서 최적의 성능을 얻으려면, 영역을 사용자 에이전트가 필터 영역을 배경과 픽셀 단위로 맞출 수 있도록 정의할 것을 권장합니다. 특히 필터 효과의 성능을 위해, 사용자 좌표계의 회전이나 기울임을 피하세요.

참고: 필터 효과가 객체의 경계 상자보다 약간 바깥쪽 비트에 영향을 줄 수 있으므로 패딩 공간을 제공해야 하는 경우가 많습니다. 이러한 목적을 위해 x, y에 음수 백분율 값을, width, height에는 100%를 초과하는 백분율 값을 제공할 수 있습니다. 예를 들어 필터 영역의 기본값이 x="-10%" y="-10%" width="120%" height="120%"인 이유입니다.

9. 필터 프리미티브

9.1. 개요

이 섹션에서는 특정 필터 효과를 달성하기 위해 조합할 수 있는 다양한 필터 프리미티브를 설명합니다.

별도의 언급이 없는 한, 모든 이미지 필터는 프리멀티플라이드 RGBA 샘플에 대해 동작합니다. feColorMatrix와 feComponentTransfer와 같은 일부 필터는 비프리멀티플라이드 데이터에서 더 자연스럽게 동작합니다. 필터 작동 동안 모든 색상 값은 해당 필터의 색상 곱셈 방식에 맞게 임시로 변환되어야 합니다.

참고: 모든 입력 이미지는 프리멀티플라이드 RGBA로 가정합니다. 사용자 에이전트는 비프리멀티플라이드 데이터 버퍼링을 통해 성능을 최적화할 수 있습니다.

모든 래스터 효과 필터링 작업은 1~N개의 입력 RGBA 이미지, 추가 속성(매개변수), 그리고 하나의 출력 RGBA 이미지를 생성합니다.

각 필터 프리미티브의 RGBA 결과는 색상 및 불투명도 값의 허용 범위 내로 클램핑됩니다. 예를 들어, 필터 프리미티브의 결과가 음수 색상 값이나 불투명도 값을 가지면 해당 값은 0으로 조정됩니다.

특정 필터 프리미티브가 동작하는 색상 공간은 해당 필터 프리미티브의 color-interpolation-filters 속성 값에 의해 결정됩니다. color-interpolation이라는 다른 속성이 기타 색상 연산의 색상 공간을 결정합니다. 이 두 속성이 서로 다른 초기값(color-interpolation-filters는 linearRGB, color-interpolation는 sRGB)을 가지므로, 특정 결과(예: 그라디언트 보간과 필터링 연산을 조정할 때)를 얻기 위해 color-interpolation을 linearRGB로, 또는 color-interpolation-filters를 sRGB로 명시적으로 설정해야 할 수도 있습니다. 아래 예시에서는 color-interpolation이나 color-interpolation-filters를 명시적으로 설정하지 않았으므로, 해당 속성의 초기값이 적용됩니다.

때로는 필터 프리미티브가 정의되지 않은 픽셀을 생성할 수 있습니다. 예를 들어 feOffset 필터 프리미티브는 이미지를 아래쪽과 오른쪽으로 이동시켜 위쪽과 왼쪽에 정의되지 않은 픽셀이 남을 수 있습니다. 이 경우 정의되지 않은 픽셀은 투명한 검은색으로 설정됩니다.

고품질 렌더링을 제공하기 위해 모든 필터 프리미티브는 디바이스 종속 좌표 공간인 작동 좌표 공간에서 동작해야 하며, 디바이스 픽셀 밀도, 사용자 공간 변환과 확대/축소를 고려해야 합니다. 플랫폼 독립적 정렬을 제공하기 위해 속성과 속성 값은 종종 primitiveUnits 속성으로 설명되는 좌표계에 상대적으로 지정됩니다. 사용자 에이전트는 이러한 상대적 속성과 속성 값을 작동 좌표 공간에 맞게 스케일링해야 합니다.

참고: 고해상도 디바이스에서는 primitiveUnits에 상대적인 속성과 속성 값을 보통 확장해야 합니다. 사용자 에이전트는 플랫폼 리소스가 제한적일 경우 필터 프리미티브의 해상도를 낮출 수 있습니다.

참고: feConvolveMatrix와 광원 필터 프리미티브의 일부 속성 또는 속성 값은 primitiveUnits 속성으로 정의된 좌표계에서 작동 좌표 공간으로 매핑할 수 없습니다.

9.2. 공통 필터 프리미티브 속성

다음 필터 프리미티브 속성은 모든 필터 프리미티브에 사용할 수 있습니다:

속성 정의:

x = "<length-percentage>"

해당 필터 프리미티브의 계산 및 렌더링을 제한하는 서브영역의 최소 x 좌표입니다. 필터 프리미티브 서브영역 참조.

x의 초기값은 0%입니다.

애니메이션 가능: 예

y = "<length-percentage>"

해당 필터 프리미티브의 계산 및 렌더링을 제한하는 서브영역의 최소 y 좌표입니다. 필터 프리미티브 서브영역 참조.

y의 초기값은 0%입니다.

애니메이션 가능: 예

width = "<length-percentage>"

해당 필터 프리미티브의 계산 및 렌더링을 제한하는 서브영역의 너비입니다. 필터 프리미티브 서브영역 참조.

음수 값이나 0 값은 해당 필터 프리미티브의 효과를 비활성화합니다(즉, 결과는 투명한 검은 이미지가 됩니다).

width의 초기값은 100%입니다.

애니메이션 가능: 예

height = "<length-percentage>"

해당 필터 프리미티브의 계산 및 렌더링을 제한하는 서브영역의 높이입니다. 필터 프리미티브 서브영역 참조.

음수 값 또는 0 값은 해당 필터 프리미티브의 효과를 반드시 비활성화해야 합니다(즉, 결과는 투명한 검은 이미지가 됩니다).

height의 초기값은 100%입니다.

애니메이션 가능: 예

result = "<filter-primitive-reference>"

<filter-primitive-reference>는 <custom-ident> [CSS3VAL]이며, 해당 필터 프리미티브에 할당된 이름입니다. 만약 지정된다면, 해당 필터 프리미티브에서 처리된 그래픽은 동일 filter 요소 내의 후속 필터 프리미티브의 in 속성에서 참조할 수 있습니다. 값이 없으면 해당 출력은 다음 필터 프리미티브에서 filter primitive의 in 속성이 없을 때에만 암시적으로 입력으로 사용됩니다.

대부분의 필터 프리미티브는 다른 필터 프리미티브를 입력으로 받습니다. 다음 속성은 다른 필터 프리미티브를 참조하는 모든 입력 속성에서 대표적으로 사용됩니다:

속성 정의:

in = "SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"

해당 필터 프리미티브의 입력을 식별합니다. 값은 6개의 키워드 중 하나거나, 같은 filter 요소 내에서 이전 result 속성 값과 일치하는 문자열일 수 있습니다. 값이 없고 이것이 첫 번째 필터 프리미티브라면, 해당 필터 프리미티브는 SourceGraphic을 입력으로 사용합니다. 값이 없고 이것이 후속 필터 프리미티브라면, 해당 필터 프리미티브는 이전 필터 프리미티브의 결과를 입력으로 사용합니다.

result 값이 같은 filter 요소 내 여러 번 등장하면, 해당 결과에 대한 참조는 가장 가까운 앞의 필터 프리미티브의 result 값을 사용합니다.

결과에 대한 순방향 참조는 허용되지 않으며, 결과가 지정되지 않은 것으로 처리됩니다.

존재하지 않는 결과에 대한 참조도 결과가 지정되지 않은 것으로 처리됩니다.

6개의 키워드 정의:

SourceGraphic

이 키워드는 filter 요소에 원래 입력된 그래픽 요소를 나타냅니다. 래스터 효과 필터 프리미티브의 경우, 그래픽 요소는 이미지 공간의 RGBA 래스터로 래스터화됩니다. 원래 그래픽에 의해 영향을 받지 않은 픽셀은 클리어 상태로 남습니다. 이미지는 선형 RGBA 픽셀로 렌더링되어야 하며, 알파 채널은 SVG에서 지정된 안티앨리어싱을 캡처합니다(래스터가 선형이므로 알파 채널은 각 픽셀의 정확한 커버리지 비율을 나타냄).

SourceAlpha

이 키워드는 filter 요소에 원래 입력된 그래픽 요소를 나타냅니다. SourceAlpha는 SourceGraphic과 동일한 규칙을 따르지만 알파 채널만 사용합니다. 입력 이미지는 RGB 채널은 암시적으로 검은색이고, 알파 채널만 SourceGraphic과 동일한 RGBA 이미지입니다.

참고: 이 옵션을 사용할 경우, 일부 구현은 알파 채널을 추출하기 위해 그래픽 요소를 래스터화해야 할 수 있습니다.

BackgroundImage

이 키워드는 필터 영역 뒤의 현재 격리 그룹에서 filter 요소가 호출될 때 정의된 백드롭을 나타냅니다. isolation 속성 [COMPOSITING-1] 참조.

BackgroundAlpha

BackgroundImage와 동일하나 알파 채널만 사용합니다. SourceAlpha 및 isolation 속성 [COMPOSITING-1] 참조.

FillPaint

이 키워드는 필터 효과 대상 요소의 fill 속성의 값을 나타냅니다. FillPaint 이미지는 개념적으로 무한 크기를 가집니다. 이 이미지는 대부분 모든 영역이 불투명하지만, "페인트" 자체에 알파가 포함된 경우(예: 투명 또는 반투명 부분이 포함된 그라디언트 또는 패턴)에는 다를 수 있습니다. fill이 페인트 서버를 참조하면, 페인트 서버의 좌표계는 필터링된 객체에 대해 정의됩니다. 예를 들어 페인트 서버가 객체의 objectBoundingBox를 요구하면, 필터링된 객체의 경계 상자가 페인트 서버의 기준 크기를 정의합니다. 페인트 서버가 userSpaceOnUse를 요구하면, 해당 객체의 로컬 좌표계에서 가장 가까운 뷰포트가 페인트 서버의 기준 크기를 정의합니다.

StrokePaint

이 키워드는 필터 효과 대상 요소의 stroke 속성의 값을 나타냅니다. StrokePaint 이미지는 개념적으로 무한 크기를 가집니다. 자세한 내용은 위 FillPaint 참조.

애니메이션 가능: 예

9.3. 필터 프리미티브 트리

입력이 없거나 하나인 필터 프리미티브들은 필터 체인으로 연결할 수 있습니다. 예를 들어, <filter-value-list>에 두 개 이상의 <filter-function>가 있을 때의 필터 프리미티브 표현은 필터 체인의 예시입니다. 모든 필터 프리미티브는 이전 필터 프리미티브의 결과를 입력으로 받습니다.

<filter id="filter">
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
</filter>

일부 필터 프리미티브는 두 개 이상의 필터 프리미티브 입력을 가질 수 있습니다. in 및 result 속성을 사용하면 여러 필터 프리미티브를 결합하여 복잡한 필터 구조를 만들 수 있습니다. 순방향 참조 제한 때문에, 모든 필터 구조는 트리, 즉 필터 프리미티브 트리로 표현할 수 있습니다. 필터 프리미티브 트리의 루트 필터 프리미티브는 filter 요소의 필터 프리미티브 자식 중 가장 마지막 프리미티브입니다.

필터 체인은 필터 프리미티브 트리로도 표현할 수 있는 필터 구조 중 하나입니다. 따라서 이후로 필터 체인은 필터 프리미티브 트리로 지칭됩니다.

filter 요소는 하나 이상의 필터 프리미티브 트리를 가질 수 있습니다. 후속 필터 프리미티브가 해당 filter 요소의 마지막 필터 프리미티브 자식인 트리가 주 필터 프리미티브 트리입니다.

오직 주 필터 프리미티브 트리만 필터 처리에 기여합니다. 구현은 다른 모든 가능한 필터 프리미티브 트리를 무시할 수 있습니다.

filter 요소에 필터 프리미티브 트리가 없으면 필터가 적용된 요소는 렌더링되지 않습니다.

<filter id="filter">
  <-- The first filter primitive tree. Ignored for filter process. -->
  <feColorMatrix type="hueRotate" values="45"/>
  <feOffset dx="10" dy="10"/>
  <feGaussianBlur stdDeviation="3"/>
  <-- The primary filter primitive tree. -->
  <feFlood flood-color="green" result="flood"/>
  <feComposite operator="in" in="SourceAlpha" in2="flood"/>
</filter>

9.4. 필터 프리미티브 서브영역

모든 필터 프리미티브는 x, y, width, height 속성을 가지며, 이들이 모여 해당 필터 프리미티브 서브영역을 식별합니다. 이 서브영역은 해당 필터 프리미티브의 계산 및 렌더링을 제한합니다. x, y, width, height 속성은 다른 필터 프리미티브의 좌표 및 길이 속성과 동일한 규칙에 따라 정의되며, 따라서 primitiveUnits 속성이 설정한 좌표계의 값을 나타냅니다(filter 요소 기준).

x, y, width, height 속성은 모든 참조된 노드의 서브영역 합집합(즉, 가장 타이트하게 맞는 경계 상자)으로 기본 설정됩니다. 참조 노드가 없는 경우(예: feImage 또는 feTurbulence), 또는 참조 노드가 표준 입력(예: SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint)이거나, feTile의 경우(참조 노드를 X, Y로 복제하여 더 큰 결과를 만드는 것이 주 기능이므로), 기본 서브영역은 0%, 0%, 100%, 100%입니다. 이때 백분율은 필터 영역의 크기를 기준으로 하며, 기본 필터 프리미티브 서브영역이 필터 영역과 동일하게 됩니다.

필터 프리미티브 서브영역의 너비나 높이가 음수 또는 0이면 해당 필터 프리미티브의 효과가 비활성화됩니다.

필터 영역은 필터 프리미티브의 입력 이미지에 하드 클리핑 사각형으로 동작합니다.

필터 프리미티브 서브영역은 필터 프리미티브 결과에 하드 클리핑 사각형으로 동작합니다.

모든 중간 오프스크린은 필터 프리미티브 서브영역과 필터 영역의 교집합을 넘지 않도록 정의되어야 합니다. 필터 영역과 각 필터 프리미티브 서브영역은 모든 오프스크린이 필터 영역 또는 필터 프리미티브 서브영역과 부분적으로라도 겹치는 모든 픽셀을 포함할 만큼 충분히 크게 설정되어야 합니다.

feTile은 이전 필터 프리미티브를 참조한 후, 참조된 필터 프리미티브의 필터 프리미티브 서브영역을 기반으로 타일을 연결하여 자신의 필터 프리미티브 서브영역을 채웁니다.

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="flood" x="0" y="0" width="100%" height="100%" primitiveUnits="objectBoundingBox">
       <feFlood x="25%" y="25%" width="50%" height="50%"
          flood-color="green" flood-opacity="0.75"/>
    </filter>
    <filter id="blend" primitiveUnits="objectBoundingBox">
       <feBlend x="25%" y="25%" width="50%" height="50%"
          in2="SourceGraphic" mode="multiply"/>
    </filter>
    <filter id="merge" primitiveUnits="objectBoundingBox">
       <feMerge x="25%" y="25%" width="50%" height="50%">
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="FillPaint"/>
       </feMerge>
    </filter>
  </defs>

  <g fill="none" stroke="blue" stroke-width="4">
     <rect width="200" height="200"/>
     <line x2="200" y2="200"/>
     <line x1="200" y2="200"/>
  </g>
  <circle fill="green" filter="url(#flood)" cx="100" cy="100" r="90"/>

  <g transform="translate(200 0)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" filter="url(#blend)" cx="100" cy="100" r="90"/>
  </g>

  <g transform="translate(0 200)">
    <g fill="none" stroke="blue" stroke-width="4">
       <rect width="200" height="200"/>
       <line x2="200" y2="200"/>
       <line x1="200" y2="200"/>
    </g>
    <circle fill="green" fill-opacity="0.5" filter="url(#merge)" cx="100" cy="100" r="90"/>
  </g>
</svg>

서브영역 예시

이 예제를 SVG로 보기

위 예시에서는 세 개의 사각형이 각각 십자와 원을 가지고 있습니다. 각 원 요소에는 다른 필터가 적용되어 있지만 모두 동일한 필터 프리미티브 서브영역을 사용합니다. 필터 출력은 반드시 필터 프리미티브 서브영역으로 제한되어야 하므로, 실제로 원 자체는 보이지 않고 필터 프리미티브 서브영역을 구성하는 사각형만 보여야 합니다.

• 좌상단 사각형은 feFlood와 flood-opacity: 75%가 적용되어 있으므로, 십자가가 가운데 녹색 사각형을 통해 보입니다.

• 좌하단 사각형은 feMerge로 SourceGraphic과 FillPaint가 병합됩니다. 원은 fill-opacity="0.5"이므로 십자가가 가운데 녹색 사각형을 통해 보입니다.

• 우상단 사각형은 feBlend가 mode="multiply"로 적용됩니다. 이 경우 원이 불투명하므로 결과는 완전히 불투명합니다. 사각형은 어두운 녹색이 되고 십자가가 보이지 않습니다.

9.5. 필터 프리미티브 feBlend

이 필터는 일반적으로 사용되는 이미지 소프트웨어의 블렌드 모드를 사용하여 두 개체를 함께 혼합합니다. 두 입력 이미지를 픽셀 단위로 결합합니다. (자세한 내용은 [COMPOSITING-1] 참조.)

속성 정의:

mode = "<blend-mode>"

“Compositing and Blending Level 1” [COMPOSITING-1]에서 정의된 블렌드 모드 중 하나를 사용합니다. 입력 in은 소스 Cs를, 두 번째 입력 in2는 배경 Cb를 나타냅니다. 이 필터 프리미티브의 출력 Cm은 Cs와 Cb를 혼합한 결과입니다.

mode의 초기값은 normal입니다.

애니메이션 가능: 예

no-composite = "no-composite"

no-composite 속성이 있으면, 지정된 블렌드 모드는 알파 합성을 적용하지 않습니다. “혼합” 공식에서 합성 없이 사용하는 방법은 Blending [COMPOSITING-1]을 참조하세요. 그렇지 않으면, 구현은 mode로 지정된 블렌드 모드를 Source Over 합성 연산자와 결합해야 합니다. 합성 포함 “혼합” 공식은 Blending [COMPOSITING-1]을 참조하세요.

참고: 이 속성은 SVG 1.1에서 feBlend 요소 정의에 추가된 것입니다. no-composite가 지정되면, 필터링된 객체의 배경과 입력 소스를 혼합할 때 “이중 합성” 효과를 방지하기 위한 것입니다(예: BackgroundImage 필터 프리미티브 사용 시). 대부분의 사용 사례에서는 no-composite 속성을 명시할 필요가 없습니다.

애니메이션 가능: 아니오

in2 = "(in 속성 참조)"

블렌딩 연산에 사용되는 두 번째 입력 이미지입니다.

애니메이션 가능: 예

normal 블렌드 모드(알파 합성 포함)는 feComposite 필터 프리미티브에서 operator="over"와 동등하며, feMerge의 블렌딩 방식과도 같고, 필터 효과 외의 SVG에서 사용되는 단순 알파 합성 방식과도 일치합니다.

<svg width="5cm" height="5cm" viewBox="0 0 500 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>예제 feBlend - feBlend 모드 예제</title>
  <desc>다섯 개의 텍스트 문자열이 그라디언트에 블렌딩되어 있으며,
        각 feBlend 모드에 하나씩 텍스트 문자열이 있습니다.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="300" y2="0">
      <stop offset="0" stop-color="#000000" />
      <stop offset=".33" stop-color="#ffffff" />
      <stop offset=".67" stop-color="#ff0000" />
      <stop offset="1" stop-color="#808080" />
    </linearGradient>
    <filter id="Normal">
      <feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Multiply">
      <feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Screen">
      <feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Darken">
      <feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
    <filter id="Lighten">
      <feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic"/>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="498" height="498"/>
  <g isolation="isolate" >
    <rect x="100" y="20" width="300" height="460" fill="url(#MyGradient)" />
    <g font-family="Verdana" font-size="75" fill="#888888" fill-opacity=".6" >
      <text x="50" y="90" filter="url(#Normal)" >Normal</text>
      <text x="50" y="180" filter="url(#Multiply)" >Multiply</text>
      <text x="50" y="270" filter="url(#Screen)" >Screen</text>
      <text x="50" y="360" filter="url(#Darken)" >Darken</text>
      <text x="50" y="450" filter="url(#Lighten)" >Lighten</text>
    </g>
  </g>
</svg>

feBlend 예시

이 예제를 SVG로 보기

9.6. 필터 프리미티브 feColorMatrix

이 필터는 행렬 변환을 적용합니다:

입력 그래픽의 각 픽셀의 RGBA 색상 및 알파 값에 대해 새로운 RGBA 색상 및 알파 값 세트를 생성합니다.

계산은 비프리멀티플라이드 색상 값에 대해 수행됩니다.

속성 정의:

type = "matrix | saturate | hueRotate | luminanceToAlpha"

행렬 연산의 종류를 지정합니다. matrix 키워드는 전체 5x4 행렬 값을 제공해야 함을 의미합니다. 나머지 키워드들은 완전한 행렬을 지정하지 않아도 자주 사용되는 색상 연산을 편리하게 수행할 수 있도록 하는 단축키 역할을 합니다.

type의 초기값은 matrix입니다.

애니메이션 가능: 예

values = "list of <number>s"

values의 내용은 type 속성 값에 따라 달라집니다:

• type="matrix"의 경우, values는 20개의 행렬 값(a00 a01 a02 a03 a04 a10 a11 ... a34) 목록입니다. 값은 공백 또는 쉼표로 구분됩니다. 예를 들어, 항등 행렬은 다음과 같이 표현할 수 있습니다:

  type="matrix"
  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"

• type="saturate"의 경우, values는 단일 실수 값입니다. saturate 연산은 다음과 같은 행렬 연산과 같습니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0.213+\mathrm{0.787s}& 0.715-\mathrm{0.715s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715+\mathrm{0.285s}& 0.072-\mathrm{0.072s}& 0& 0\\ 0.213-\mathrm{0.213s}& 0.715-\mathrm{0.715s}& 0.072+\mathrm{0.928s}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  참고: 0 값을 지정하면 완전히 탈채(그레이스케일)된 필터 결과가 생성되며, 1 값을 지정하면 입력 이미지를 변경 없이 그대로 전달합니다. 0~1 범위를 벗어난 값은 입력 이미지의 채도를 감소 또는 증가시킵니다.

  참고: 명도 계수의 정밀도가 이전 명세 텍스트 [Cmam]에 비해 증가했습니다.

• type="hueRotate"의 경우, values는 하나의 실수 값(도 단위)입니다. hueRotate 연산은 다음 행렬 연산과 동일합니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}{a}_{00}& a_{01}& a_{02}& 0& 0\\ a_{10}& a_{11}& a_{12}& 0& 0\\ a_{20}& a_{21}& a_{22}& 0& 0\\ 0& 0& 0& 1& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

  a00, a01 등과 같은 항의 계산 방법은 다음과 같습니다:

  $\left[\begin{array}{ccc}{a}_{00}& a_{01}& a_{02}\\ a_{10}& a_{11}& a_{12}\\ a_{20}& a_{21}& a_{22}\end{array}\right]=\left[\begin{array}{ccc}+0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\\ +0.213& +0.715& +0.072\end{array}\right]+\cos (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}+0.787& -0.715& -0.072\\ -0.213& +0.285& -0.072\\ -0.213& -0.715& +0.928\end{array}\right]+\sin (\mathit{hueRotate}\mathit{value})\cdot \left[\begin{array}{ccc}-0.213& -0.715& +0.928\\ +0.143& +0.140& -0.283\\ -0.787& +0.715& +0.072\end{array}\right]$

  따라서 hue 행렬의 좌상단 항(a00)은 다음과 같이 계산됩니다:

  $a_{00}=0.2127+\cos (\mathit{hueRotate}\mathit{value})\cdot 0.7873-\sin (\mathit{hueRotate}\mathit{value})\cdot 0.2127$

• type="luminanceToAlpha"의 경우, values는 적용되지 않습니다. luminanceToAlpha 연산은 다음 행렬 연산과 동일합니다:

  $\left[\begin{array}{c}R\text{'}\\ G\text{'}\\ B\text{'}\\ A\text{'}\\ 1\end{array}\right]=\left[\begin{array}{ccccc}0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0& 0& 0& 0& 0\\ 0.2126& 0.7152& 0.0722& 0& 0\\ 0& 0& 0& 0& 1\end{array}\right]\cdot \left[\begin{array}{c}R\\ G\\ B\\ A\\ 1\end{array}\right]$

초기값에 대한 values

만약 type="matrix"

기본값은 항등 행렬입니다.

만약 type="saturate"

기본값은 1 입니다.

만약 type="hueRotate"

기본값은 0이며 이는 항등 행렬을 생성합니다.

values 목록의 항목 개수가 type에 필요한 항목 수와 맞지 않으면, 해당 필터 프리미티브는 통과 필터로 동작합니다.

애니메이션 가능: 예

<svg width="8cm" height="5cm" viewBox="0 0 800 500"
     xmlns="http://www.w3.org/2000/svg">
  <title>feColorMatrix 예시 - feColorMatrix 동작 예시</title>
  <desc>feColorMatrix의 효과를 보여주는 5개의 텍스트 문자열:
        필터가 적용되지 않은 참조용 텍스트,
        feColorMatrix의 matrix 옵션을 사용한 그레이스케일 변환,
        feColorMatrix의 saturate 옵션 사용,
        feColorMatrix의 hueRotate 옵션 사용,
        그리고 feColorMatrix의 luminanceToAlpha 옵션 사용.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="500" y2="0">
      <stop offset="0" stop-color="#ff00ff" />
      <stop offset=".33" stop-color="#88ff88" />
      <stop offset=".67" stop-color="#2020ff" />
      <stop offset="1" stop-color="#d00000" />
    </linearGradient>
    <filter id="Matrix" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="matrix" in="SourceGraphic"
           values=".33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0
                   .33 .33 .33 0 0"/>
    </filter>
    <filter id="Saturate40" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="saturate" in="SourceGraphic" values="0.4"/>
    </filter>
    <filter id="HueRotate90" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="hueRotate" in="SourceGraphic" values="90"/>
    </filter>
    <filter id="LuminanceToAlpha" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="a"/>
      <feComposite in="SourceGraphic" in2="a" operator="in" />
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="498"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="500" height="20" />
    <text x="100" y="90">Unfiltered</text>
    <text x="100" y="190" filter="url(#Matrix)" >Matrix</text>
    <text x="100" y="290" filter="url(#Saturate40)" >Saturate</text>
    <text x="100" y="390" filter="url(#HueRotate90)" >HueRotate</text>
    <text x="100" y="490" filter="url(#LuminanceToAlpha)" >Luminance</text>
  </g>
</svg>

feColorMatrix 예시

이 예시를 SVG로 보기

9.7. 필터 프리미티브 feComponentTransfer

이 필터 프리미티브는 다음과 같이 컴포넌트별 리매핑을 수행합니다:

R' = feFuncR( R )G' = feFuncG( G )
B' = feFuncB( B )
A' = feFuncA( A )

모든 픽셀에 대해 적용됩니다. 밝기 조정, 대비 조정, 색상 밸런스, 임계값 처리 등의 작업을 수행할 수 있습니다.

계산은 비프리멀티플라이드 색상 값에 대해 수행됩니다.

feComponentTransfer 요소의 자식 요소들은 네 채널에 대한 전이 함수를 지정합니다:

• feFuncR - 입력 그래픽의 빨강 컴포넌트에 대한 전이 함수

• feFuncG - 입력 그래픽의 초록 컴포넌트에 대한 전이 함수

• feFuncB - 입력 그래픽의 파랑 컴포넌트에 대한 전이 함수

• feFuncA - 입력 그래픽의 알파(투명도) 컴포넌트에 대한 전이 함수

feFuncR, feFuncG, feFuncB, feFuncA 요소 집합을 전이 함수 요소라고도 합니다.

feComponentTransfer 요소 처리에는 다음 규칙이 적용됩니다:

• 같은 종류의 전이 함수 요소가 둘 이상 지정된 경우, 마지막에 나타난 요소를 사용합니다.

• 어떤 전이 함수 요소도 지정되지 않았다면, feComponentTransfer는 해당 전이 함수 요소들의 type 속성이 identity로 설정된 것처럼 처리해야 합니다.

9.7.1. 전이 함수 feFuncR

아래 속성들은 전이 함수 요소 속성이며, 전이 함수 요소에 적용됩니다.

속성 정의:

type = "identity | table | discrete | linear | gamma"

컴포넌트 전이 함수의 유형을 지정합니다. 함수의 유형에 따라 다른 속성의 적용 가능성이 결정됩니다.

다음에서 C는 초기 컴포넌트(예: feFuncR), C'는 리매핑된 컴포넌트이며, 둘 다 [0,1]의 닫힌 구간에 있습니다.

• identity의 경우:

  C' = C

• table의 경우, 함수는 속성 tableValues에 지정된 값들 사이의 선형 보간으로 정의됩니다. 테이블에는 n+1개의 값(v₀부터 v_n까지)이 있으며, n개의 동일 크기 보간 영역의 시작과 끝 값을 지정합니다. 보간은 다음 수식을 사용합니다:

  C < 1일 때 k를 찾습니다:

  k/n <= C < (k+1)/n

  결과 C'는 다음과 같습니다:

  C' = vk + (C - k/n)*n * (vk+1 - vk)

  C = 1이면:

  C' = vn.

• discrete의 경우, 함수는 속성 tableValues에 지정된 스텝 함수로 정의되며, n개의 값(v₀부터 v_n-1까지)이 n개의 스텝으로 구성된 스텝 함수를 나타냅니다. 스텝 함수는 다음 수식으로 정의됩니다:

  C < 1일 때 k를 찾습니다:

  k/n <= C < (k+1)/n

  결과 C'는 다음과 같습니다:

  C' = vk

  C = 1이면:

  C' = vn-1.

• linear의 경우, 함수는 다음과 같은 선형 방정식으로 정의됩니다:

  C' = slope * C + intercept

• gamma의 경우, 함수는 다음과 같은 지수 함수로 정의됩니다:

  C' = amplitude * pow(C, exponent) + offset

초기값에 대한 type은 identity입니다.

애니메이션 가능: 예

tableValues = "(<number> 목록)"

type="table"일 때, <number>들의 목록 v0,v1,...vn이 공백 또는 쉼표로 구분되어 있으며, 조회 테이블을 정의합니다. 목록이 비어 있으면 항등 전이 함수가 적용됩니다.

속성이 지정되지 않으면, 빈 목록이 제공된 것처럼 동작합니다.

애니메이션 가능: 예

slope = "<number>"

type="linear"일 때, 선형 함수의 기울기입니다.

초기값에 대한 slope는 1입니다.

애니메이션 가능: 예

intercept = "<number>"

type="linear"일 때, 선형 함수의 절편입니다.

초기값에 대한 intercept는 0입니다.

애니메이션 가능: 예

amplitude = "<number>"

type="gamma"일 때, 감마 함수의 진폭입니다.

초기값에 대한 amplitude는 1입니다.

애니메이션 가능: 예

exponent = "<number>"

type="gamma"일 때, 감마 함수의 지수입니다.

초기값에 대한 exponent는 1입니다.

애니메이션 가능: 예

offset = "<number>"

type="gamma"일 때, 감마 함수의 오프셋입니다.

초기값에 대한 offset는 0입니다.

애니메이션 가능: 예

<svg width="8cm" height="4cm" viewBox="0 0 800 400"
     xmlns="http://www.w3.org/2000/svg">
  <title>feComponentTransfer 예시 - feComponentTransfer 동작 예시</title>
  <desc>feComponentTransfer의 효과를 보여주는 4개의 텍스트 문자열:
        항등 함수(참조용),
        feComponentTransfer의 table 옵션 사용,
        feComponentTransfer의 linear 옵션 사용,
        그리고 feComponentTransfer의 gamma 옵션 사용.</desc>
  <defs>
    <linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
            x1="100" y1="0" x2="600" y2="0">
      <stop offset="0" stop-color="#ff0000" />
      <stop offset=".33" stop-color="#00ff00" />
      <stop offset=".67" stop-color="#0000ff" />
      <stop offset="1" stop-color="#000000" />
    </linearGradient>
    <filter id="Identity" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="identity"/>
        <feFuncG type="identity"/>
        <feFuncB type="identity"/>
        <feFuncA type="identity"/>
      </feComponentTransfer>
    </filter>
    <filter id="Table" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="table" tableValues="0 0 1 1"/>
        <feFuncG type="table" tableValues="1 1 0 0"/>
        <feFuncB type="table" tableValues="0 1 1 0"/>
      </feComponentTransfer>
    </filter>
    <filter id="Linear" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope=".5" intercept=".25"/>
        <feFuncG type="linear" slope=".5" intercept="0"/>
        <feFuncB type="linear" slope=".5" intercept=".5"/>
      </feComponentTransfer>
    </filter>
    <filter id="Gamma" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
        <feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
        <feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
      </feComponentTransfer>
    </filter>
  </defs>
  <rect fill="none" stroke="blue"
        x="1" y="1" width="798" height="398"/>
  <g font-family="Verdana" font-size="75"
            font-weight="bold" fill="url(#MyGradient)" >
    <rect x="100" y="0" width="600" height="20" />
    <text x="100" y="90">Identity</text>
    <text x="100" y="190" filter="url(#Table)" >TableLookup</text>
    <text x="100" y="290" filter="url(#Linear)" >LinearFunc</text>
    <text x="100" y="390" filter="url(#Gamma)" >GammaFunc</text>
  </g>
</svg>

feComponentTransfer 예시

이 예시를 SVG로 보기

9.7.2. 전이 함수 feFuncG

속성 값의 정의는 feFuncR를 참조하세요.

9.7.3. 전이 함수 feFuncB

속성 값의 정의는 feFuncR를 참조하세요.

9.7.4. 전이 함수 feFuncA

속성 값의 정의는 feFuncR를 참조하세요.

9.8. 필터 프리미티브 feComposite

이 필터는 두 개의 입력 이미지를 이미지 공간에서 픽셀 단위로 결합하며, Porter-Duff [PORTERDUFF] 합성 연산 중 하나를 사용합니다: over, in, atop, out, xor, lighter [COMPOSITING-1]. 또한, 성분별 arithmetic 연산(결과는 [0..1] 범위로 클램프됨)을 적용할 수 있습니다.

arithmetic 연산은 feDiffuseLighting 와 feSpecularLighting 필터의 출력과 텍스처 데이터를 결합할 때 유용합니다. dissolve 구현에도 유용합니다. arithmetic 연산이 선택된 경우, 각 결과 픽셀은 아래 공식으로 계산됩니다:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4

여기서:

• i1과 i2는 입력 이미지의 해당 픽셀 채널 값이며, 각각 in과 in2에 매핑됩니다.

• k1, k2, k3 그리고 k4는 같은 이름의 속성 값을 의미합니다.

이 필터 프리미티브의 경우, 결과 이미지의 범위는 필터 프리미티브 서브리전 설명 섹션에 따라 확장될 수 있습니다.

속성 정의:

operator = "over | in | out | atop | xor | lighter | arithmetic"

수행할 합성 연산입니다. operator 타입은 arithmetic을 제외하고 모두 [COMPOSITING-1]에 설명된 연산과 일치하며, in은 소스, in2는 대상입니다. arithmetic 연산은 위에서 설명한 대로 동작합니다.

초기값에 대한 operator는 over입니다.

애니메이션 가능: 예.

k1 = "<number>"

operator="arithmetic"일 때에만 적용됩니다.

초기값에 대한 k1는 0입니다.

애니메이션 가능: 예.

k2 = "<number>"

operator="arithmetic"일 때에만 적용됩니다.

초기값에 대한 k2는 0입니다.

애니메이션 가능: 예.

k3 = "<number>"

operator="arithmetic"일 때에만 적용됩니다.

초기값에 대한 k3는 0입니다.

애니메이션 가능: 예.

k4 = "<number>"

operator="arithmetic"일 때에만 적용됩니다.

초기값에 대한 k4는 0입니다.

애니메이션 가능: 예.

in2 = "(see in 속성 참조)"

합성 연산에 사용되는 두 번째 입력 이미지입니다.

애니메이션 가능: 예.

참고: Compositing and Blending [COMPOSITING-1]은 더 많은 합성 키워드를 정의합니다. 추가 키워드의 기능은 입력 필터 프리미티브 in과 in2를 바꿔 적용하여 구현할 수 있습니다.

<svg width="330" height="195" viewBox="0 0 1100 650"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>feComposite 예시 - feComposite 연산 예시</title>
  <desc>서로 겹치는 삼각형 쌍 여섯 개로 이루어진 네 줄을 통해,
        서로 다른 투명도 값과 배경 삭제 여부에서 여섯 가지 feComposite 연산자가 어떻게 보이는지 보여줍니다.</desc>
  <defs>
    <desc>각 합성 연산자마다 여섯 개 필터의 두 세트를 정의합니다.
          첫 번째 세트는 불투명한 흰색으로 채워 배경 이미지를 지웁니다.
          두 번째 세트는 배경을 지우지 않아, 배경이 보이기도 하고 다른 경우에는
          배경 이미지가 자기 자신과 합성됩니다(즉, "double-counting").</desc>
    <filter id="overFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="inFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="outFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="atopFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="xorFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="arithmeticFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
      <feMerge> <feMergeNode in="flood"/> <feMergeNode in="comp"/> </feMerge>
    </filter>
    <filter id="overNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="over" result="comp"/>
    </filter>
    <filter id="inNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="in" result="comp"/>
    </filter>
    <filter id="outNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="out" result="comp"/>
    </filter>
    <filter id="atopNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="atop" result="comp"/>
    </filter>
    <filter id="xorNoFlood" filterUnits="objectBoundingBox" x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" operator="xor" result="comp"/>
    </filter>
    <filter id="arithmeticNoFlood" filterUnits="objectBoundingBox"
            x="-5%" y="-5%" width="110%" height="110%">
      <feComposite in="SourceGraphic" in2="BackgroundImage" result="comp"
                   operator="arithmetic" k1=".5" k2=".5" k3=".5" k4=".5"/>
    </filter>
    <path id="Blue100" d="M 0 0 L 100 0 L 100 100 z" fill="#00ffff" />
    <path id="Red100" d="M 0 0 L 0 100 L 100 0 z" fill="#ff00ff" />
    <path id="Blue50" d="M 0 125 L 100 125 L 100 225 z" fill="#00ffff" fill-opacity=".5" />
    <path id="Red50" d="M 0 125 L 0 225 L 100 125 z" fill="#ff00ff" fill-opacity=".5" />
    <g id="TwoBlueTriangles">
      <use xlink:href="#Blue100"/>
      <use xlink:href="#Blue50"/>
    </g>
    <g id="BlueTriangles">
      <use transform="translate(275,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(400,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(525,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(650,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(775,25)" xlink:href="#TwoBlueTriangles"/>
      <use transform="translate(900,25)" xlink:href="#TwoBlueTriangles"/>
    </g>
  </defs>

  <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/>
  <g font-family="Verdana" font-size="40" shape-rendering="crispEdges">
    <desc>불투명한 흰색 표면 위에 그려 배경을 완전히 덮는 필터로 예시를 렌더링합니다.</desc>
    <g isolation="isolate">
      <text x="15" y="75">투명도 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood 사용)</text>
      <text x="15" y="200">투명도 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood 사용)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overFlood)" />
        <use xlink:href="#Red50" filter="url(#overFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inFlood)" />
        <use xlink:href="#Red50" filter="url(#inFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outFlood)" />
        <use xlink:href="#Red50" filter="url(#outFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopFlood)" />
        <use xlink:href="#Red50" filter="url(#atopFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorFlood)" />
        <use xlink:href="#Red50" filter="url(#xorFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
    <g transform="translate(0,325)" isolation="isolate">
    <desc>배경을 지우지 않는 필터로 예시를 렌더링합니다.
          따라서 어떤 경우에는 배경이 계속 보이고, 다른 경우에는 배경
          이미지가 자기 자신과 합성됩니다("double-counting").</desc>
      <text x="15" y="75">투명도 1.0</text>
      <text x="15" y="115" font-size="27">(feFlood 미사용)</text>
      <text x="15" y="200">투명도 0.5</text>
      <text x="15" y="240" font-size="27">(feFlood 미사용)</text>
      <use xlink:href="#BlueTriangles"/>
      <g transform="translate(275,25)">
        <use xlink:href="#Red100" filter="url(#overNoFlood)" />
        <use xlink:href="#Red50" filter="url(#overNoFlood)" />
        <text x="5" y="275">over</text>
      </g>
      <g transform="translate(400,25)">
        <use xlink:href="#Red100" filter="url(#inNoFlood)" />
        <use xlink:href="#Red50" filter="url(#inNoFlood)" />
        <text x="35" y="275">in</text>
      </g>
      <g transform="translate(525,25)">
        <use xlink:href="#Red100" filter="url(#outNoFlood)" />
        <use xlink:href="#Red50" filter="url(#outNoFlood)" />
        <text x="15" y="275">out</text>
      </g>
      <g transform="translate(650,25)">
        <use xlink:href="#Red100" filter="url(#atopNoFlood)" />
        <use xlink:href="#Red50" filter="url(#atopNoFlood)" />
        <text x="10" y="275">atop</text>
      </g>
      <g transform="translate(775,25)">
        <use xlink:href="#Red100" filter="url(#xorNoFlood)" />
        <use xlink:href="#Red50" filter="url(#xorNoFlood)" />
        <text x="15" y="275">xor</text>
      </g>
      <g transform="translate(900,25)">
        <use xlink:href="#Red100" filter="url(#arithmeticNoFlood)" />
        <use xlink:href="#Red50" filter="url(#arithmeticNoFlood)" />
        <text x="-25" y="275">arithmetic</text>
      </g>
    </g>
  </g>
</svg>

feComposite 예시

이 예시를 SVG로 보기

9.9. 필터 프리미티브 feConvolveMatrix

feConvolveMatrix는 행렬 컨볼루션 필터 효과를 적용합니다. 컨볼루션은 입력 이미지의 픽셀을 이웃 픽셀과 결합하여 결과 이미지를 생성합니다. 컨볼루션을 통해 흐림, 모서리 감지, 선명화, 엠보싱 및 베벨링을 포함한 다양한 이미지 작업을 수행할 수 있습니다.

행렬 컨볼루션은 입력 이미지의 특정 픽셀 값과 이웃 픽셀 값을 결합하여 결과 픽셀 값을 생성하는 방법을 설명하는 n×m 행렬(컨볼루션 커널)을 기반으로 합니다. 각 결과 픽셀은 해당 소스 픽셀과 이웃 픽셀에 커널 행렬을 적용하여 결정됩니다. 주어진 픽셀에 대한 각 색상 값에 적용되는 기본 컨볼루션 공식은 다음과 같습니다:

여기서 "orderX"와 "orderY"는 order 속성의 X 및 Y 값을 나타내며, "targetX"는 targetX 속성의 값을 나타내고, "targetY"는 targetY 속성의 값을 나타내며, "kernelMatrix"는 kernelMatrix 속성의 값을 나타내고, "divisor"는 divisor 속성의 값을 나타내며, "bias"는 bias 속성의 값을 나타냅니다.

위의 공식에서 커널 행렬의 값은 많은 컴퓨터 그래픽 교과서에 설명된 컨볼루션 이론과 일치하도록 소스 이미지 및 대상 이미지에 대해 커널 행렬이 180도 회전된 상태로 적용됩니다.

예를 들어, 색상 채널 중 하나의 색상 값이 다음과 같은 5픽셀 x 5픽셀 크기의 입력 이미지가 있다고 가정해 봅시다:

그리고 다음과 같이 3x3 컨볼루션 커널을 정의합니다:

이미지의 두 번째 행과 두 번째 열에 있는 색상 값에 초점을 맞춰 봅시다 (소스 픽셀 값은 120입니다). 입력 이미지의 픽셀 격자가 커널의 픽셀 격자와 완벽하게 정렬된 가장 단순한 경우를 가정하고, 속성 divisor, targetX 및 targetY의 기본값을 가정한다면, 결과 색상 값은 다음과 같습니다:

행렬 컨볼루션은 픽셀에 작용하기 때문에 본질적으로 해상도에 의존합니다. feConvolveMatrix가 해상도 독립적인 결과를 생성하도록 하려면, 속성 kernelUnitLength에 명시적인 값을 제공해야 합니다.

kernelUnitLength는 다른 속성과 결합하여 필터 효과 좌표 시스템(즉, primitiveUnits 속성에 의해 설정된 좌표 시스템)에서 암시적인 픽셀 격자를 정의합니다. 입력 이미지는 kernelUnitLength와 픽셀이 일치하도록 일시적으로 리샘플링됩니다. 컨볼루션은 리샘플링된 이미지에서 발생합니다. 컨볼루션을 적용한 후 이미지는 원래 해상도로 다시 리샘플링됩니다.

컨볼루션 전에 kernelUnitLength에 의해 정의된 좌표 시스템과 일치하도록 이미지를 리샘플링해야 하거나, 컨볼루션 후 장치 좌표 시스템과 일치하도록 리샘플링해야 하는 경우, 고품질 뷰어는 예를 들어 양선형 또는 양입방(interpolation)과 같은 적절한 보간 기법을 사용하는 것이 권장됩니다. 사용 가능한 보간 기법의 속도에 따라, 이 선택은 image-rendering 속성 설정에 의해 영향을 받을 수 있습니다. 구현은 적절한 결과를 생성하는 데 필요하지 않은 경우 리샘플링을 최소화하거나 제거하는 접근 방식을 선택할 수 있으며, 예를 들어 문서가 kernelUnitLength가 장치 픽셀보다 훨씬 작은 경우 축소될 때와 같은 경우가 이에 해당합니다.

속성 정의:

order = "<number-optional-number>"

kernelMatrix에 대한 각 차원의 셀 수를 나타냅니다. 제공된 값은 <integer> 값으로 0보다 커야 합니다. 정수가 아닌 값은 소수점 이하를 버려서 가장 가까운 정수 값으로 내림됩니다. 첫 번째 숫자인 <orderX>는 행렬의 열 수를 나타냅니다. 두 번째 숫자인 <orderY>는 행렬의 행 수를 나타냅니다. <orderY>가 제공되지 않으면 기본적으로 <orderX>와 동일합니다.

작은 값만 사용하는 것이 권장됩니다(예: 3). 높은 값은 매우 높은 CPU 오버헤드를 초래할 수 있으며 일반적으로 성능에 미치는 영향을 정당화할 만한 결과를 생성하지 않습니다.

초기 값은 3입니다.

애니메이션 가능: 예.

kernelMatrix = "<list of numbers>"

컨볼루션을 위한 커널 행렬을 구성하는 <number> 값 목록입니다. 값은 공백 문자 및/또는 쉼표로 구분됩니다. 값 목록의 항목 수는 <orderX>와 <orderY>의 곱과 같아야 합니다.

orderX * orderY의 결과가 값 목록의 항목 수와 동일하지 않으면 필터 프리미티브는 통과 필터로 작동합니다.

값 목록의 항목 수가 유효하지 않을 경우의 동작은? <https://github.com/w3c/csswg-drafts/issues/237>

애니메이션 가능: 예.

divisor = "<number>"

kernelMatrix를 입력 이미지에 적용하여 숫자를 얻은 후 해당 숫자를 divisor로 나누어 최종 목적지 색상 값을 도출합니다. 행렬 값의 합계를 나눗셈 값으로 사용하는 것은 결과의 전체 색상 강도에 균등한 영향을 미치는 경향이 있습니다. 지정된 나눗셈 값이 0이면 기본값이 대신 사용됩니다.

초기 값은 kernelMatrix의 모든 값의 합계이며, 합계가 0인 경우 나눗셈 값은 1로 설정됩니다.

애니메이션 가능: 예.

bias = "<number>"

kernelMatrix를 입력 이미지에 적용하여 숫자를 얻은 후 divisor를 적용한 후 bias 속성이 각 구성 요소에 추가됩니다. bias의 한 가지 응용은 필터의 0 반응이 .5 회색 값이 되도록 하는 경우입니다. bias 속성은 필터의 범위를 이동합니다. 이를 통해 0 또는 1로 클램핑될 값들을 표현할 수 있습니다.

초기 값은 0입니다.

애니메이션 가능: 예.

targetX = "<integer>"

입력 이미지에서 주어진 대상 픽셀에 대해 컨볼루션 행렬의 X 위치를 결정합니다. 행렬의 가장 왼쪽 열은 열 번호 0입니다. 값은 다음 조건을 충족해야 합니다: 0 <= targetX < orderX. 기본적으로 컨볼루션 행렬은 각 입력 이미지 픽셀에 대해 X 방향으로 중심이 맞춰져 있습니다(즉, targetX = floor ( orderX / 2 )).

애니메이션 가능: 예.

targetY = "<integer>"

입력 이미지에서 주어진 대상 픽셀에 대해 컨볼루션 행렬의 Y 위치를 결정합니다. 행렬의 가장 위쪽 행은 행 번호 0입니다. 값은 다음 조건을 충족해야 합니다: 0 <= targetY < orderY. 기본적으로 컨볼루션 행렬은 각 입력 이미지 픽셀에 대해 Y 방향으로 중심이 맞춰져 있습니다(즉, targetY = floor ( orderY / 2 )).

애니메이션 가능: 예.

edgeMode = "duplicate | wrap | none"

컨볼루션 행렬이 입력 이미지의 가장자리 또는 근처에 위치할 때 행렬 연산을 적용할 수 있도록 필요한 경우 입력 이미지를 색상 값으로 확장하는 방식을 결정합니다.

duplicate는 입력 이미지의 경계에서 필요한 만큼 해당 경계의 색상 값을 복제하여 이미지를 확장함을 나타냅니다.

원래 N-by-M 이미지에서, 여기서 m=M-1이고 n=N-1:

$\left[\begin{array}{ccccc}11& 12& \text{.}\text{.}\text{.}& 1m& 1M\\ 21& 22& \text{.}\text{.}\text{.}& 2m& 2M\\ \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}& \text{.}\text{.}\text{.}\\ n1& n2& \text{.}\text{.}\text{.}& \mathrm{nm}& \mathrm{nM}\\ N1& N2& \text{.}\text{.}\text{.}& \mathrm{Nm}& \mathrm{NM}\end{array}\right]$

duplicate를 사용하여 두 픽셀 확장:

$\left[\begin{array}{ccccccccc}11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 11& 11& 11& 12& \dots & 1m& 1M& 1M& 1M\\ 21& 21& 21& 22& \dots & 2m& 2M& 2M& 2M\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ n1& n1& n1& n2& \dots & \mathrm{nm}& \mathrm{nM}& \mathrm{nM}& \mathrm{nM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\\ N1& N1& N1& N2& \dots & \mathrm{Nm}& \mathrm{NM}& \mathrm{NM}& \mathrm{NM}\end{array}\right]$

wrap는 입력 이미지가 이미지의 반대쪽 가장자리에서 색상 값을 가져와 확장됨을 나타냅니다.

wrap을 사용하여 두 픽셀 확장:

$\left[\begin{array}{ccccccccc}\mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\\ \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots & \dots \\ \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}& \dots & \mathit{nm}& \mathit{nM}& \mathit{n1}& \mathit{n2}\\ \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}& \dots & \mathit{Nm}& \mathit{NM}& \mathit{N1}& \mathit{N2}\\ \mathrm{1m}& \mathrm{1M}& 11& 12& \dots & \mathrm{1m}& \mathrm{1M}& 11& 12\\ \mathrm{2m}& \mathrm{2M}& 21& 22& \dots & \mathrm{2m}& \mathrm{2M}& 21& 22\end{array}\right]$

값 none는 입력 이미지가 R, G, B 및 A에 대해 0의 픽셀 값으로 확장됨을 나타냅니다.

초기 값은 edgeMode에 대해 duplicate입니다.

애니메이션 가능: 예.

kernelUnitLength = "<number-optional-number>"

첫 번째 숫자는 <dx> 값입니다. 두 번째 숫자는 <dy> 값입니다. <dy> 값이 지정되지 않으면 기본적으로 <dx> 값과 동일합니다. primitiveUnits 속성 값에 의해 결정된 단위(현재 필터 단위)에서 각각 연속 열과 행 사이의 의도된 거리를 나타냅니다. kernelUnitLength에 값이 지정되면 커널이 확장 가능하고 추상적인 좌표 시스템에서 정의됩니다. kernelUnitLength가 지정되지 않으면 기본값은 오프스크린 비트맵의 한 픽셀(픽셀 기반 좌표 시스템)이므로 확장 가능하지 않을 수 있습니다. 디스플레이 매체와 사용자 에이전트 전반에서 일관성을 어느 정도 유지하기 위해 kernelUnitLength에 값을 제공해야 합니다. 일부 구현에서는 임시 오프스크린 이미지의 픽셀 격자가 커널의 픽셀 격자와 정렬되면 가장 일관된 결과와 빠른 성능을 얻을 수 있습니다.

음수 값이나 0이 지정된 경우 기본값이 대신 사용됩니다.

참고: 이 속성은 더 이상 사용되지 않으며 제거될 예정입니다. 플랫폼 독립적인 결과를 생성하는 신뢰할 수 있는 방법을 제공하지 않습니다. 이 사용 사례는 향후 사양에서 다룰 예정입니다.

애니메이션 가능: 예.

preserveAlpha = "false | true"

false 값은 컨볼루션이 알파 채널을 포함한 모든 채널에 적용됨을 나타냅니다. 이 경우 주어진 픽셀에 대한 컨볼루션 공식의 ALPHAX,Y는 다음과 같습니다:

ALPHAX,Y = (
SUM I=0 to [orderY-1] {
SUM J=0 to [orderX-1] {
SOURCE X-targetX+J, Y-targetY+I * kernelMatrixorderX-J-1, orderY-I-1
}
}
) / divisor + bias


"true" 값은 컨볼루션이 색상 채널에만 적용됨을 나타냅니다. 이 경우 필터는 일시적으로 색상 구성 요소 값을 unpremultiply한 다음 커널을 적용합니다. 이 경우 주어진 픽셀에 대한 컨볼루션 공식의 ALPHAX,Y는 다음과 같습니다:

ALPHAX,Y = SOURCEX,Y

초기 값은 preserveAlpha에 대해 false입니다.

애니메이션 가능: 예.