SVG 그레인 질감: 노이즈를 그림 안에 가두기

SVG 일러스트에 그레인을 추가하려면 feTurbulence로 노이즈를 생성하고, 옅은 단색 오버레이로 바꾼 다음, 그 오버레이를 SourceAlpha 안에 합성합니다. 원래 채우기가 보이도록 SourceGraphic 위에 병합합니다. 이렇게 하면 그림의 경로 기하학을 그대로 유지하면서 렌더링된 질감을 더할 수 있습니다.

노이즈 기본 요소만 사용하면 결과가 다릅니다. 도형의 외곽선을 따르는 대신 필터 기본 요소의 하위 영역을 채웁니다. 잎이 직사각형 노이즈 덩어리로 바뀔 수 있는 이유입니다. MDN의 feTurbulence 참고 문서가 이 동작을 설명합니다.

웹 일러스트에는 질감을 넣은 표시용 버전과 깨끗한 원본이 유용한 산출물입니다. 이 필터가 만드는 그레인은 개별 편집 가능한 점이나 절단 윤곽선의 집합이 아닙니다.

도형과 표면 효과를 구분합니다

그레인이 없어도 이미 올바르게 보이는 단순한 채워진 경로로 시작합니다. 효과를 추가하기 전에 외곽선, 틈, 색상을 수정합니다. 필터는 그 기하학을 고쳐 주지 않습니다.

아래 세 상태는 경계 문제를 설명합니다.

경계가 중요합니다

SourceGraphic은 필터를 적용할 요소를 제공합니다. SourceAlpha는 그 요소의 알파 채널을 제공합니다. 필터는 그림의 이미지에 작용하며 경로 명령을 다시 쓰지 않습니다. 이러한 입력과 필터 그래프는 W3C Filter Effects 명세에 정의되어 있습니다.

원래 그림에 투명한 영역이 있다면 그 영역도 제한 범위에 영향을 줍니다. SourceAlpha는 추정한 바깥 경계 상자가 아니라 실제 렌더링된 불투명도를 따릅니다.

완전한 SVG 그레인 예제를 복사합니다

이 코드를 .svg 파일로 저장하고 브라우저에서 엽니다. 직접 만든 잎 경로 하나, 결과가 일정한 노이즈 시드, 어두운 오버레이, 명시적인 내부 제한 단계가 들어 있습니다. 대각선 틈은 경로의 일부이므로 질감 버전에서도 투명하게 유지됩니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="grain" x="-10%" y="-10%" width="120%" height="120%"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.65"
                    numOctaves="2" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="0 0 0 0 0
        0 0 0 0 0
        0 0 0 0 0
        0 0 0 0.28 0" result="ink"/>
      <feComposite in="ink" in2="SourceAlpha" operator="in" result="inside"/>
      <feMerge>
        <feMergeNode in="SourceGraphic"/>
        <feMergeNode in="inside"/>
      </feMerge>
    </filter>
  </defs>
  <path d="M36 142C40 70 104 26 164 30C164 100 120 150 60 156L38 180L28 170L52 146C80 112 112 78 146 46C104 78 74 110 54 140Z" fill="#e76b50" filter="url(#grain)"/>
</svg>

필터는 네 가지 작업을 합니다.

1. feTurbulence가 노이즈를 만들고 noise라는 이름을 붙입니다.
2. 행렬이 빨강, 초록, 파랑을 0으로 설정합니다. 마지막 행은 노이즈의 알파에 0.28을 곱해 ink라는 옅은 검정 오버레이를 만듭니다.
3. operator="in"을 사용하는 feComposite가 SourceAlpha가 있는 곳에 오버레이를 유지합니다.
4. feMerge가 원래 그림을 먼저 그리고 그 위에 내부로 제한한 오버레이를 그립니다.

MDN feColorMatrix 참고 문서는 5열 행렬이 색상과 알파를 변환하는 방식을 설명합니다. 여기서는 잎의 채우기가 아니라 노이즈 이미지를 바꿉니다. MDN feComposite 참고 문서는 오버레이를 두 번째 입력에 제한하는 데 쓰는 in 연산을 설명합니다.

0.28은 이 산호색 잎을 위한 시작점이며 모든 그레인에 통용되는 설정은 아닙니다. 질감이 그림을 탁하게 만들면 낮추고, 실제 표시 크기에서 그레인이 사라지면 높입니다. 검정 오버레이 그레인은 채우기를 어둡게 합니다. 검정 모티프에 눈에 띄는 밝은 반점을 만들지는 않습니다.

기존 그림을 다시 칠하는 색상 및 알파 연산은 별도의 feColorMatrix 안내를 참고합니다. 기존 투명 가장자리를 선명하게 만드는 방법은 SVG 알파 임계값을 참고합니다. 두 연산 모두 여기서 사용하는 생성 노이즈 소스를 제공하지는 않습니다.

사람들이 보게 될 크기에서 결과를 확인합니다

이 원본 경로로 세 버전을 만들었습니다. 필터가 없는 버전, 노이즈 기본 요소만 들어 있는 필터 버전, 위의 완전한 내부 제한 그레인 그래프 버전입니다. 동일한 0 0 200 200 viewBox로 Chrome에서 120 × 120 및 360 × 360 CSS 픽셀 크기의 렌더링을 확인했습니다.

모든 예제의 브라우저 DOM에는 경로 하나가 들어 있었습니다. 여섯 d 속성은 모두 동일했습니다. 이로써 이 예제의 범위가 분명해집니다. 렌더링된 표면만 바뀌었고, 반점 경로는 추가되지 않았습니다. 직접 만든 브라우저 테스트 예제이며 PerfectVector나 네이티브 벡터 편집기의 출력이 아닙니다.

큰 미리보기는 효과를 확인하는 데 도움이 되지만, 그림이 여전히 명확하게 읽히는지는 작은 버전으로 판단합니다. 검토할 때 두 크기를 모두 유지합니다. 같은 viewBox에서 표시 크기를 키우면 질감이 보이는 크기도 달라지므로 하나의 미리보기가 모든 용도를 대표한다고 가정하지 않습니다.

한 번에 하나의 설정으로 그레인을 조정합니다

작은 웹 카드 일러스트라면 예제 값으로 시작합니다. 그런 다음 매개변수 하나를 바꾸고 동일한 두 표시 크기를 비교하며 선호하는 버전의 사본을 보관합니다.

baseFrequency는 양쪽 축에 적용할 값 하나 또는 가로와 세로 주파수에 적용할 값 두 개를 받습니다. MDN baseFrequency 참고 문서가 이 차이를 설명합니다. 이 잎에는 값 하나로 시작합니다. 다른 두 값은 방향성 질감을 위한 의도적인 선택입니다.

numOctaves는 MDN numOctaves 참고 문서에 설명된 대로 노이즈 옥타브 수를 제어합니다. 옥타브를 늘리는 것은 벡터 경로를 추가하는 것이 아닙니다. 필요한 크기에서 눈에 보이는 표면이 개선될 때만 사용합니다.

예제는 color-interpolation-filters="sRGB"를 명시적으로 설정합니다. 후보를 비교할 때 이 설정을 유지하여 색상 처리 변화가 그레인 비교를 혼동시키지 않도록 합니다.

직사각형, 사라진 채우기, 지저분한 가장자리를 수정합니다

질감이 직사각형 덩어리로 나옵니다. 필터의 최종 출력을 확인합니다. feTurbulence로 끝난다면 노이즈 이미지를 반환하고 있는 것입니다. 행렬, SourceAlpha 합성, 병합을 복원합니다. 필터 직사각형을 키워도 제한되지 않은 노이즈에 더 많은 공간을 줄 뿐입니다.

잎의 색상이 사라집니다. 첫 번째 병합 노드가 SourceGraphic을 사용하는지 확인합니다. 최종 inside 결과만으로는 어두운 오버레이만 있고 원래 산호색 채우기는 없습니다. 각 이름 있는 result와 in 참조의 철자와 대소문자도 확인합니다.

투명한 틈에 노이즈가 남습니다. 두 번째 합성 입력이 직사각형 노이즈나 불투명 배경이 아닌 SourceAlpha인지 확인합니다. 질감을 넣고 싶은 그림에 필터를 적용합니다. 필터를 적용한 그룹에 불투명 배경을 넣으면 알파 입력이 바뀝니다.

출력 일부가 잘립니다. 필터의 x, y, width, height를 확인합니다. 이 값은 MDN filter 참고 문서에 설명된 대로 사용 가능한 필터 영역을 설정합니다. 예제는 약간의 여유 공간을 제공합니다. 영역을 넓혀도 빠진 내부 제한 단계를 고칠 수 없고, 별도 컨테이너가 만드는 잘림도 해결하지 못합니다.

작은 그림이 탁해 보입니다. 먼저 오버레이 알파를 줄인 다음 주파수와 옥타브 수를 비교합니다. 그래도 질감이 실루엣을 해친다면 해당 크기에는 깨끗한 버전을 전달합니다.

전달용 깨끗한 원본을 보관합니다

필터 없는 원본을 만들려면 경로의 filter="url(#grain)"와 이제 사용하지 않는 필터 정의를 제거합니다. 경로의 d, 채우기, viewBox는 보존합니다. 그 파일을 별도로 열고 잎과 틈이 원래 깨끗한 버전과 일치하는지 확인합니다.

웹 앱에는 실제 배포할 브라우저와 정확한 삽입 방식으로 질감 버전을 확인합니다. 이 인라인 SVG를 한 페이지에 반복한다면 각 필터에 고유 ID를 지정하고 url(#...) 참조를 갱신합니다. 독립형 예제는 인스턴스 하나만 있으므로 ID 하나를 사용합니다.

정확한 래스터 모양이 필요한 대상으로는 요구되는 크기의 래스터 미리보기를 내보내고 그 환경에서 확인합니다. 편집하거나 절단할 수 있는 기하학이 필요한 작업에는 깨끗한 경로를 전달하고, 그레인은 표시 효과라는 점을 분명히 합니다. 필터 노이즈를 벡터 반점이라고 설명하거나 이후 편집기, PDF 내보내기 도구, 절단기가 이를 재현한다고 약속하지 않습니다. 실제 대상을 테스트합니다.

개별 편집 가능한 반점이 의도적으로 필요하다면 별도의 기하학 작업입니다. 정리 수준도 결정해야 합니다. 질감을 수많은 작은 윤곽선으로 추적하기 전에 SVG에 노드가 너무 많은 이유를 참고합니다. 래스터 그림의 그레인을 보존하는 것은 또 다른 출발점이며 수채화 벡터화에서 다룹니다.

벡터화가 도움이 되는 경우

깨끗한 모티프가 PNG나 JPG로만 남아 있다면 브라우저 필터를 추가하기 전에 그 원본을 편집 가능한 SVG 그림으로 변환합니다. 깨끗한 버전에서 복원된 실루엣과 틈을 먼저 확인합니다. PerfectVector는 래스터를 벡터로 변환하는 단계를 제공합니다. 이 안내의 절차적 그레인 그래프는 이후에 추가하는 별도 SVG 효과입니다.

이미 경로 기반 원본이 있다면 그대로 사용합니다. 필터 작업에 두 번째 변환은 필요하지 않습니다. 원본 복원이 필요하다면 이미지 벡터화 안내가 해당 단계를 설명합니다.

자주 묻는 질문

feTurbulence는 왜 도형을 따르지 않고 직사각형을 만드나요? 노이즈는 필터 기본 요소의 하위 영역을 채웁니다. 오버레이를 그림 안에 제한하면서 채우기를 보존하려면 SourceAlpha 안에 합성하고 SourceGraphic 위에 병합합니다.

SVG 그레인은 경로에 노드를 추가하나요? 이 필터는 반점 경로를 추가하지 않습니다. 원래 브라우저 테스트에서는 여섯 예제가 모두 동일한 d 데이터의 경로 하나를 유지했고, 필터는 렌더링된 표면만 바꿨습니다.

어떤 그레인 설정으로 시작해야 하나요? 원래 잎 예제에는 fractalNoise, baseFrequency 0.65, 옥타브 2개, seed 8, 검정 오버레이 알파 배율 0.28로 시작합니다. 실제 표시 크기로 비교하고 한 번에 한 설정씩 조정합니다.

그레인 효과를 절단 파일로 사용할 수 있나요? 생성된 질감은 편집 가능한 절단 기하학이 아닙니다. 별도의 필터 없는 경로 원본을 보관하고 실제 절단 작업에서 기하학을 확인합니다.

출처

1. MDN: feTurbulence — 노이즈 생성과 기본 요소 하위 영역입니다.
2. W3C: 필터 기본 요소 트리 — SourceGraphic, SourceAlpha, 필터 이미지 처리입니다.
3. MDN: feColorMatrix — 색상과 알파 행렬 연산입니다.
4. MDN: feComposite — in 연산자를 사용한 내부 제한입니다.
5. MDN: baseFrequency — 한 축과 두 축의 주파수 값입니다.
6. MDN: numOctaves — 노이즈 세부 레이어입니다.
7. MDN: filter — 필터 영역 속성입니다.

웹 일러스트에 래스터에서 복원한 깨끗한 원본이 필요하다면 이미지 벡터 변환부터 시작하고, 경로를 검토한 뒤 별도의 표시용 사본에 그레인을 추가합니다.