SVG 변위 맵으로 로고 미리보기 왜곡하기
SVG feDisplacementMap으로 로고 미리보기를 변형하고 sRGB의 채널과 중립 회색을 제어합니다. 두 크기로 결과를 확인하고 전달용 원본 경로 마스터를 보관하세요.
목차
SVG의 feDisplacementMap 필터는 다른 이미지를 샘플링 맵으로 사용해 렌더러가 표시하는 이미지를 왜곡합니다. 원본 경로 데이터는 변경하지 않습니다. 되돌릴 수 있는 로고 미리보기나 웹 일러스트에 사용하고, 편집과 전달을 위해 필터를 적용하지 않은 마스터를 보관하세요.
예측하기 쉬운 첫 예제를 만들려면 in="SourceGraphic"을 설정하고, in2에 이름이 지정된 맵을 선택하고, 가로와 세로 채널을 지정한 다음 color-interpolation-filters="sRGB"를 설정합니다. MDN 변위 참조 문서는 두 입력과 샘플링 공식을 설명합니다. 화면에서 휘어 보이는 모양이 자동으로 새로운 편집 가능한 윤곽선이 되는 것은 아닙니다.
어떤 파일이 필요한지 결정하기
| 목표 | 적합한 방법 | 보관할 것 |
|---|---|---|
| 웹페이지에 표시할 정적인 왜곡 아트워크 | 필터가 적용된 표시용 사본 | 원본 SVG 경로 마스터 |
| 윤곽이 영구적으로 변형된 편집 가능한 로고 | 의도적으로 형상을 편집하거나 재구성 | 검증된 새 경로 형상 |
| 모양이 고정된 래스터 미리보기 | 필요한 크기로 표시용 사본을 렌더링 | 깨끗한 마스터와 확인을 마친 래스터 내보내기 파일 |
| 인쇄 또는 커팅용 제작 형상 | 필터가 없는 마스터에서 시작 | 실제 사용처에서 확인한 치수, 구멍, 경로 |
아래 예제는 가운데가 뚫린 자체 제작 정사각형 배지를 사용합니다. 가장자리가 직선이라 왜곡을 비교하기 쉽습니다. 시연용 도안이며, 고객의 로고나 벡터 변환 결과물이 아닙니다.
미리보기의 색상만 바꾸려면 feColorMatrix로 색상 변경하기를 사용하세요. 변위는 렌더링되는 이미지를 어디에서 샘플링할지라는 공간적 문제를 다룹니다.
조건을 고정한 정적 SVG 예제 복사하기
이 코드를 SVG로 저장하고 브라우저에서 엽니다. 경로 하나, 고정된 노이즈 소스 하나, 가로 채널은 변화시키고 세로 채널은 중립으로 유지하는 행렬, 36의 변위 스케일이 포함되어 있습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feTurbulence type="fractalNoise" baseFrequency="0.035"
numOctaves="1" seed="8" result="noise"/>
<feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
0 0 0 0 0.5
0 0 0 0 0
0 0 0 0 1" result="map"/>
<feDisplacementMap in="SourceGraphic" in2="map" scale="36"
xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>feTurbulence는 절차적으로 변화를 생성합니다. MDN 노이즈 참조 문서는 주파수, 옥타브, 시드, 유형 제어 항목을 설명합니다. 여기서는 값을 고정해 scale을 바꿀 때 동일한 맵을 기준으로 강도를 비교하도록 했습니다.
행렬은 노이즈의 빨강 채널을 유지하고, 초록을 0.5, 파랑을 0, 알파를 1로 설정합니다. 출력은 제어 맵이며, 산호색 배지에 적용할 새 색상 팔레트가 아닙니다. MDN 행렬 참조 문서는 채널 변환을 설명합니다. 이후 빨강은 가로 샘플링을 제어하고, 초록은 중립적인 세로 오프셋을 제공합니다.
강도를 비교하려면 scale="36"만 scale="12"로 바꾸고, 이어서 scale="0"으로 바꿉니다. 경로, 시드, 맵 행렬, 색 공간, viewBox는 그대로 두세요. 이렇게 해야 지금 내리는 판단에 영향을 주는 요소를 분리할 수 있습니다.
scale을 샘플링 오프셋으로 이해하기
선택한 맵 채널에 대한 원본 샘플링 위치는 다음과 같습니다.
sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)W3C 변위 명세는 이 역방향 매핑을 정의합니다. 출력의 각 위치에서 원본의 어디를 샘플링할지 묻는 방식입니다. 양의 샘플링 오프셋은 경로 노드를 그 방향으로 움직이라는 지시가 아닙니다.
스케일이 36일 때 가로 채널의 샘플링 오프셋은 다음과 같습니다.
| 필터의 작업 색 공간에서 채널 값 | 가로 샘플링 오프셋 |
|---|---|
0 | -18 |
0.5 | 0 |
1 | +18 |
예제는 primitiveUnits="userSpaceOnUse"를 사용하므로 이 값은 SVG의 사용자 좌표계를 기준으로 합니다. viewBox의 크기를 조정한 뒤에도 CSS 픽셀 거리와 같다고 보장할 수는 없습니다. 명세는 스케일 0에 변위 효과가 없다는 점도 정의합니다.
이 예제에서는 초록 값을 고정해 세로 샘플링을 중립으로 유지합니다. 나중에 두 축의 왜곡을 탐색하려면 초록에도 의도적으로 변화를 주세요. 예상과 다른 결과를 진단할 때 채널과 맵을 동시에 바꾸지 마세요.
중립 회색의 색 공간 명시하기
중립이란 선택한 채널의 값이 맵에 사용하는 작업 색 공간에서 0.5라는 뜻입니다. 눈에 중간 회색으로 보이는 모든 색이 어떤 필터 설정에서도 중립이라는 뜻은 아닙니다.
필터의 기본 작업 색 공간은 linearRGB이지만, 이 예제는 명시적으로 sRGB를 사용합니다. rgb(50%,50%,50%)로 쓴 색은 선형 RGB로 변환한 뒤에는 수치상 0.5가 아닙니다. MDN color-interpolation-filters 참조 문서는 기본값과 명시적인 선택 항목을 설명합니다.
진단용 상수 맵을 만들려면 노이즈 기본 요소와 행렬을 다음으로 바꿉니다.
<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>변위 기본 요소, 선택자, 필터에 명시한 sRGB는 유지하세요. MDN feFlood 참조 문서는 여기서 사용하는 단색 이미지를 설명합니다. 이 대조군은 맵의 변화와 색 공간으로 인한 이동을 구분하는 데 도움이 됩니다.
Chrome 테스트 파일에서는 sRGB 상수 맵 배지가 필터 없는 배지와 정렬되어 보였습니다. 명시적인 색 공간 설정을 제거하자 같은 회색 맵 배지가 눈에 띄게 이동했습니다. 이는 브라우저에서 관찰한 결과이며, 엔진마다 픽셀까지 동일하게 렌더링된다는 주장은 아닙니다. 이 방법을 자신의 아트워크에 적용할 때도 색 공간 설정을 유지하고, 덮어쓰는 CSS 규칙이 있는지 확인하세요.
같은 배지를 두 크기로 확인하기
원본 배지를 Chrome에서 120 × 120과 300 × 300 CSS 픽셀로 렌더링했습니다. 각 크기는 같은 고정 맵을 스케일 0, 12, 36으로 보여 주며, 동일한 0 0 200 200 viewBox를 사용했습니다.
| 강도 | 원본 테스트 파일의 관찰 결과 | 판단에 도움이 되는 점 |
|---|---|---|
0 | 곧은 바깥 가장자리와 정사각형 구멍 | 비교 기준 |
12 | 가로 윤곽에 완만한 변화가 있으며 구멍이 계속 보임 | 절제된 표시 효과 |
36 | 바깥 가장자리와 구멍의 왜곡이 더 강함 | 전달 전에 식별 가능성 확인 |
효과는 두 크기 모두에서 보였고, 큰 미리보기에서는 구멍과 가장자리를 더 쉽게 살펴볼 수 있었습니다. 브라우저 DOM에는 여섯 표본마다 경로 하나가 그대로 있었고, d 값도 같았습니다. 추가로 200픽셀 대조군 세 개를 사용해 필터 없는 배지와 명시적인 sRGB 및 기본 linearRGB의 상수 회색 맵을 비교했습니다.
이들은 독립적으로 제작한 SVG 표본입니다. 테스트한 브라우저에서 이 파일이 어떻게 동작했는지, 원본 형상이 바뀌지 않았는지를 보여 줍니다. 네이티브 편집기 테스트, PerfectVector 결과물, 호환성 조사가 아닙니다.
자신의 로고에서는 실제로 표시할 가장 작은 크기부터 확인하세요. 깨끗한 마스터가 그대로 있어도 구멍이나 모서리가 왜곡되면 마크가 읽히는 방식이 달라질 수 있습니다.
이동, 약한 효과, 잘린 가장자리 진단하기
배지가 휘는 대신 전체가 이동합니다. sRGB를 명시한 상수 맵 대조군을 시험하세요. 선택한 채널과 그 채널에서 맵이 실제로 변하는지 확인합니다. 선택한 값이 일정하면서 중립이 아니면 균일한 샘플링 오프셋이 생깁니다.
효과가 계속 약합니다. in2="map"이 행렬의 이름 붙은 result와 일치하는지 확인하세요. 같은 시드와 주파수에서 스케일을 조금씩 높입니다. 그런 다음 필요하면 다른 맵을 시험합니다. 새 시드는 공간 패턴을 바꾸므로 별도의 비교입니다.
세로 가장자리가 예상과 다르게 움직입니다. 이 예제는 가로 변위용입니다. xChannelSelector="R"과 yChannelSelector="G"를 사용하고 G를 0.5로 고정합니다. 두 축의 변화를 추가하기 전에 행렬의 행과 채널 이름의 철자를 확인하세요.
변형된 윤곽이 잘립니다. 원본 경로를 편집하기 전에 필터 영역을 확인하세요. 예제는 x="-25%", y="-25%", 너비와 높이 150%로 여유 공간을 제공합니다. MDN filter 참조 문서는 이 영역 속성을 설명합니다. 더 극단적인 효과에는 다른 영역이 필요할 수 있고, 주변 뷰포트가 별도의 경계를 만들 수도 있습니다. 영역을 넓혀도 빠진 출력이 복구되지 않으면 SVG 필터와 뷰포트 잘림 점검을 따르세요.
다른 사용처에서 SVG 효과가 사라집니다. 전달할 바로 그 파일을 해당 사용처에서 여세요. 브라우저 미리보기는 편집기, PDF 내보내기 도구, 커팅기에서의 동작을 입증하지 않습니다. 필터가 그대로 전달된다고 약속하기보다 깨끗한 마스터를 준비해 두세요.
깨끗한 마스터는 별도로 전달하기
필터 없는 버전은 경로에서 filter="url(#warp)"를 지우고, 사용하지 않는 필터 정의도 제거해 만듭니다. 원본 d, fill-rule="evenodd", 채우기, viewBox는 유지하세요. 결과 파일을 열어 정사각형 구멍과 곧은 가장자리가 깨끗한 기준본과 일치하는지 확인합니다.
깨끗한 마스터와 표시 효과를 적용한 파일에는 서로 다른 이름을 사용하세요. 필터가 있는 SVG를 한 페이지에 인라인으로 반복 배치한다면 필터마다 고유한 ID를 지정하고 url(#...) 참조를 갱신합니다. 최종 삽입 방식과 지원하려는 브라우저를 확인하세요.
최종적으로 왜곡된 윤곽 자체가 편집 가능해야 한다면, 그 형상은 별도의 아트워크 작업으로 준비하세요. 이 필터는 미리보기를 새 경로 명령으로 굳히지 않습니다. 래스터화한 미리보기를 추적하는 것도 정확도와 정리 상태를 따로 확인해야 하는 새로운 변환입니다. 수학적으로 변하지 않은 원본 마스터를 복원하는 방법은 아닙니다.
SVG 안에 배치한 PNG는 또 다른 문제입니다. 파일 이름이 편집 가능한 로고 경로를 보장한다고 가정하기 전에 래스터 이미지를 포함하는 SVG 파일을 살펴보세요.
로고 벡터 변환이 도움이 되는 경우
깨끗한 원본 로고가 PNG나 JPG로만 남아 있다면 그 원본 로고를 벡터로 변환한 뒤 실루엣, 구멍, 편집 가능한 색상 영역을 확인하고 표시 필터를 추가하세요. PerfectVector는 래스터를 벡터로 변환합니다. 이 가이드의 변위 그래프는 별도의 SVG 효과입니다. 왜곡된 미리보기를 제작용으로 보장된 윤곽으로 바꾸지는 않습니다.
깨끗한 경로 마스터가 이미 있다면 해당 파일을 바로 사용하세요. 원본 준비와 로고 정리는 로고 벡터 변환 가이드에서 브라우저 왜곡이 아닌 복구 단계로 설명합니다.
자주 묻는 질문
feDisplacementMap이 SVG 경로를 바꾸나요? 이 필터는 맵 기반 샘플링으로 렌더링된 이미지를 바꿉니다. 원본 브라우저 테스트 파일에서 강도를 비교한 여섯 표본은 각각 동일한 d 값을 가진 경로 하나를 유지했습니다.
회색 변위 맵인데도 아트워크가 움직이는 이유는 무엇인가요? 중립은 맵의 작업 색 공간에서 채널 값이 0.5라는 뜻입니다. 50% sRGB 회색은 기본 linearRGB 공간으로 변환한 뒤에는 수치상 0.5가 아닙니다. 색 공간을 명시적으로 설정하고 조건을 고정한 상수 맵 테스트를 사용하세요.
이 예제에서 scale 36은 무엇을 뜻하나요?
기본 요소 단위가 userSpaceOnUse이면 선택한 채널 값 01은 SVG 사용자 단위로 -18+18의 샘플링 오프셋을 만듭니다. 화면에 표시되는 거리는 SVG viewBox의 크기 조정에 따라 달라집니다.
왜곡된 SVG를 커팅기에 바로 전달해도 되나요? 표시된 왜곡은 새로운 편집 가능한 커팅 형상이 아닙니다. 필터 없는 경로 마스터를 보관하고 실제 사용처에서 확인하세요. 작업에 영구적으로 변형된 윤곽이 필요하다면 별도로 준비합니다.
출처
- MDN: feDisplacementMap — 원본과 맵 입력, 채널, 샘플링 동작.
- W3C: 변위 필터 — 역방향 매핑, 스케일, 기본 요소 좌표.
- MDN: feTurbulence — 고정된 절차적 맵 제어 항목.
- MDN: feColorMatrix — 제어 맵의 명시적 채널 값.
- MDN: color-interpolation-filters — 기본 linearRGB와 명시적인 sRGB.
- MDN: feFlood — 단색 맵 대조군.
- MDN: filter — 필터 영역 속성.
깨끗한 원본이 래스터로만 있다면 자신의 로고를 SVG로 변환하고 실루엣과 구멍을 확인한 다음, 별도의 왜곡된 표시용 사본을 만들기 전에 그 마스터를 저장하세요.
