SVG 필터를 사용하면 SVG 그래픽 및 텍스트에 특수 효과를 추가할 수 있습니다. 다른 유형의 요소에는 CSS 효과를 사용합니다.
SVG 필터 효과의 예(원본 SVG: 왼쪽)
SVG 필터를 추가하거나 수정하는 방법
- SVG 또는 텍스트 요소를 마우스 오른쪽 버튼으로 클릭합니다.
- 팝업 메뉴에서 SVG 필터 추가...를 선택합니다. 필터가 이미 적용된 경우 SVG 필터 수정...을 선택합니다.
- SVG 필터 수정 대화상자의 오른쪽 패널에 있는 필터 드롭다운에서 필터를 선택합니다.
- 필터 설정을 맞춤설정합니다.
- 저장을 클릭합니다. 설정이 맞춤 필터로 저장됩니다.
참고: 미디어 규칙이 활성화되어 있으면 SVG 필터를 적용할 수 없습니다.
텍스트 요소
텍스트 요소에 SVG 필터를 적용하면 텍스트가 SVG로 변환되며 더 이상 텍스트 도구로 텍스트를 편집할 수 없습니다. SVG 텍스트는 줄바꿈 없이 한 줄에 표시되므로 모든 줄바꿈이 삭제됩니다. SVG 필터를 제거하여 변환을 취소할 수 있습니다.
SVG 필터 수정 대화상자에서 텍스트에 다음과 같은 변경 작업을 수행할 수 있습니다.
- 텍스트(텍스트 콘텐츠)
- 글꼴 크기
- 텍스트 색상
필터 및 필터 설정
없음
SVG 요소에 아무 효과도 적용되지 않습니다. SVG 필터를 적용하여 SVG로 변환된 텍스트는 텍스트 요소로 복원됩니다.
아우라
SVG 요소를 아우라로 둘러쌉니다.
| 설정 | 설명 |
|---|---|
| X 반경 | 아우라의 수평 반경입니다. 동일하게 유지  - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| Y 반경 | 아우라의 수직 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| 색상 | 아우라의 색상입니다. |
입체 테두리
SVG 요소의 가장자리에 입체적인 느낌을 줍니다.
| 설정 | 설명 |
|---|---|
| 둥근 정도 | 입체 테두리의 곡률입니다. |
| 깊이 | 입체 테두리의 깊이입니다. |
블러
SVG 요소를 흐리게 처리합니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 요소가 흐리게 나타나는 정도에 영향을 줍니다. |
| X 반경 | 블러의 수평 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| Y 반경 | 블러의 수직 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
분화구
SVG 요소에 분화구 모양을 적용합니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 이는 분화구의 크기에 영향을 미칩니다. |
| 깊이 | 분화구의 깊이입니다. |
| 각도 | 분화구의 각도입니다. |
디졸브
SVG 요소의 일부에 디졸브 효과를 줍니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 이는 디졸브 효과가 적용되는 영역의 크기에 영향을 미칩니다. |
| 정의 | 원래 가장자리가 유지되는 정도입니다. |
그림자
SVG 요소에 그림자를 추가합니다.
| 설정 | 설명 |
|---|---|
| 음영 X | 요소에서 나오는 음영의 가로 오프셋입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| 음영 Y | 요소에서 나오는 음영의 세로 오프셋입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| 반경 흐리게 | 그림자 블러의 반경입니다. 값이 클수록 그림자가 더 흐리게 나타납니다. |
| 색상 | 그림자의 색상입니다. |
흐릿한 빛
SVG 요소에 빛나는 효과를 줍니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. SVG 요소의 밝기에 영향을 미칩니다. |
| 광원 높이 | 빛의 높이입니다. 빛이 SVG 요소에 도달하는 각도에 영향을 미칩니다. |
| 색상 | 빛의 색상입니다. |
발광 효과
SVG 요소에 발광 효과를 더합니다.
| 설정 | 설명 |
|---|---|
| X 반경 | 발광 효과의 수평 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| Y 반경 | 발광 효과의 수직 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| 색상 | 발광 효과의 색상입니다. |
확장
SVG 요소가 풍선처럼 부풀어 올라 보이는 효과를 줍니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 이는 요소의 3차원 효과에 영향을 줍니다. |
| 색조 색상 | 요소에 반사된 색조의 색상입니다. |
| 색조 강도 | 반사된 색조의 강도입니다. |
| 음영 X | 요소에서 나오는 음영의 가로 오프셋입니다. |
| 음영 Y | 요소에서 나오는 음영의 세로 오프셋입니다. |
윤곽선
SVG 요소의 가장자리에 윤곽선을 추가합니다.
| 설정 | 설명 |
|---|---|
| X 반경 | 윤곽선의 수평 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| Y 반경 | 윤곽선의 수직 반경입니다. 동일하게 유지 - 이 버튼이 활성화되면 X 반경과 Y 반경 값이 동일하게 유지됩니다. |
| 색상 | 윤곽선의 색상입니다. |
세피아
SVG 요소의 색상을 세피아 톤으로 변경합니다.
| 설정 | 설명 |
|---|---|
| 밝기 | 요소의 밝기입니다. |
스플래시
SVG 요소에 액체를 뿌린 것 같은 효과를 줍니다. 액체 분산 효과 2가지가 생성됩니다. 아래 예에서 '분산 1'은 보라색이고 '분산 2'는 파란색입니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 전체 효과의 크기입니다. 뿌려지는 물방울 크기에 영향을 미칩니다. |
| 패턴 | 10개의 스플래시 패턴 중 하나를 선택합니다. |
| 밝기 | 요소의 밝기입니다. |
| 소멸 | 요소에 소멸 효과를 적용한 범위입니다. |
| 분산 1 크기 조절 | 첫 번째 분산 효과의 크기입니다. |
| 분산 1 흐리게 | 첫 번째 분산 효과의 흐림 정도입니다. |
| 분산 2 색상 | 두 번째 분산 효과의 색상입니다. |
| 분산 2 크기 조절 | 두 번째 분산 효과의 크기입니다. |
| 분산 2 흐리게 | 두 번째 분산 효과의 흐림 정도입니다. |
질감
SVG 요소에 질감을 적용합니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 질감 세그먼트의 크기에 영향을 줍니다. |
| 색조 색상 | 색조의 색상입니다. |
| 색조 강도 | 색조의 강도입니다. |
| 블러 | 요소의 흐림 정도입니다. |
| 둥근 정도 | 각 텍스처 세그먼트의 곡률입니다. |
| 패턴 | 10개의 텍스처 패턴 중 하나를 선택합니다. |
왜곡
SVG 요소를 왜곡합니다.
| 설정 | 설명 |
|---|---|
| 크기 조절 | 효과의 크기입니다. 왜곡된 물결의 크기에 영향을 줍니다. |
| 왜곡 | 왜곡의 정도입니다. |