SVG 필터가 CSS filter보다 나은 순간
이미지나 도형에 흐림 효과를 주고 싶을 때 CSS의 filter: blur(10px) 한 줄이면 충분해 보입니다. 밝기·대비·채도까지 CSS filter 함수 하나로 조절되는데, 왜 SVG 필터라는 걸 따로 배워야 하는지 의아할 수 있습니다. 두 방식은 화면에서는 똑같아 보여도, 효과가 '어디에 저장되는지'가 다르기 때문에 쓰임새가 갈립니다.
요약 ① CSS filter는 특정 웹페이지에 딸린 스타일 규칙이라, 그 페이지의 CSS를 벗어나면(파일만 따로 열면) 효과가 사라집니다 ② SVG 필터는 filter 정의를 이미지 파일 자체 안에 저장하므로, 어떤 프로그램에서 열어도 똑같이 적용된 채로 보입니다 ③ 여러 효과를 겹쳐 쓸 때도 SVG 필터는 하나의 수식으로 정밀하게 조합해, CSS 함수를 여러 개 이어 붙이는 것보다 더 세밀하게 제어됩니다
CSS filter로 되는데 왜 SVG 필터가 따로 있을까
CSS filter의 blur, brightness, contrast, saturate, hue-rotate, sepia, invert 같은 함수들은 사실 SVG 필터가 먼저 정의해 둔 계산 방식(feGaussianBlur, feComponentTransfer, feColorMatrix 같은 프리미티브)을 그대로 가져와 쓰도록 만들어졌습니다. 이름이 같은 게 우연이 아니라, CSS filter가 SVG 필터의 일부 기능을 페이지 스타일 문법으로 간편하게 옮겨놓은 것에 가깝습니다.
그런데 이렇게 옮겨놓는 과정에서 한 가지가 달라집니다. CSS filter는 항상 특정 HTML 요소에 스타일 규칙으로 걸립니다. 즉 이 요소에 이 효과를 입히라는 명령이 그 페이지의 CSS 안에만 존재합니다. 반면 SVG 필터는 filter 정의 자체를 이미지 파일(svg 문서) 안에 넣고, 도형에 그 정의를 직접 연결해 둡니다.
이 차이는 svg 파일을 원래 걸려 있던 페이지 밖으로 옮기는 순간 드러납니다. CSS로 건 효과는 그 페이지의 스타일과 함께 사라지지만, svg 파일 안에 직접 저장된 필터는 파일 자체의 데이터이므로 어디로 옮겨도 그대로 남아 있습니다.
확인하는 방법 — 두 방식의 차이를 직접 눈으로 확인하기
가장 쉬운 확인 방법은 svg 아이콘 파일 하나로 두 가지를 각각 시험해 보는 것입니다. 먼저 웹페이지에서 img 태그로 불러온 svg에 CSS로 filter: blur(4px)를 걸어봅니다. 화면에서는 분명히 흐려 보이지만, 그 svg 파일을 다운로드해서 다른 이미지 뷰어나 디자인 프로그램으로 열어보면 흐림 효과는 사라져 있습니다.
이번엔 반대로 해봅니다. svg 소스 코드를 열어 도형 태그의 filter 속성에 url(#blur) 값을 직접 연결하고, 같은 파일 안에 그 필터 정의를 함께 저장합니다. 이렇게 만든 파일은 다른 프로그램으로 열거나 웹페이지를 옮겨도 흐림 효과가 그대로 유지됩니다.
여러 효과를 한꺼번에 조합할 때도 차이가 납니다. CSS filter는 brightness(1.2) contrast(1.1) invert(0.3)처럼 함수를 나열한 순서대로 하나씩 겹쳐 계산하지만, SVG 필터는 이 값들을 하나의 수식(feComponentTransfer)으로 미리 합산해 한 번에 적용할 수 있습니다. 이 수식을 손으로 계산하려면 기울기(slope)와 절편(intercept) 값을 각각 구해야 해서 번거롭습니다.
저희 도구로 확인하기. 이 계산과 코드 작성을 슬라이더 조작만으로 끝내고, 원이나 사각형, 별 모양에 즉시 적용된 결과를 눈으로 보면서 SVG 필터 코드를 만들 수 있습니다.
무료 · 가입 불필요 · 브라우저에서 슬라이더로 SVG 필터 코드 바로 생성
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| svg 아이콘에 CSS filter를 걸었는데, 파일만 다운로드하면 효과가 사라짐 | CSS filter는 페이지 스타일 규칙이라 파일 자체에는 저장되지 않습니다 |
| 이메일 템플릿이나 일부 PDF 변환기에서 CSS filter가 무시됨 | 외부 스타일시트를 해석하지 않는 렌더러는 svg 안에 직접 저장된 필터만 인식합니다 |
| 밝기·대비·반전을 각각 CSS 함수로 걸었더니 계산값이 예상과 다름 | CSS 함수는 나열한 순서대로 겹겹이 적용되어 값이 누적되므로, 정밀한 결과는 하나의 수식으로 미리 계산해야 합니다 |
| png가 아니라 svg 도형(별 모양 등) 자체에 효과를 걸고 싶음 | filter 속성을 도형 태그에 직접 연결하면 벡터 좌표 그대로 계산되어 확대해도 유지됩니다 |
표에 정리된 상황들은 모두 같은 이유로 생깁니다. CSS filter는 페이지 스타일이고, SVG 필터는 파일 데이터라는 차이입니다. 효과가 파일 안에 남는지 여부만 구분해두면 어떤 상황에서 어느 쪽을 써야 할지 헷갈리지 않습니다.
정리
CSS filter와 SVG 필터는 같은 계산 방식을 공유하지만, 효과가 저장되는 위치가 다릅니다. CSS filter는 특정 페이지의 스타일 규칙이고, SVG 필터는 이미지 파일 자체에 저장되는 데이터입니다.
웹페이지 안에서만 쓸 효과라면 CSS filter로 충분하지만, 파일을 옮기거나 다른 프로그램에서도 효과가 유지되어야 하거나 여러 효과를 정밀한 수치로 조합해야 한다면 SVG 필터 쪽이 맞습니다.
무료 · 가입 불필요 · 브라우저에서 슬라이더로 SVG 필터 코드 바로 생성
자주 묻는 질문
CSS filter와 SVG 필터, 결과가 똑같아 보이는데 정말 다른가요?
화면에 보이는 결과는 같은 값을 넣으면 거의 동일하게 보입니다. 다만 CSS filter는 그 효과를 적용한 페이지의 스타일 규칙으로만 존재하고, SVG 필터는 filter 정의를 이미지 파일 자체 안에 저장한다는 차이가 있습니다. svg 파일을 다른 프로그램으로 옮겨보면 이 차이가 바로 드러납니다.
생성된 SVG 필터 코드는 어디에 넣어야 하나요?
두 가지 방법이 있습니다. 페이지 안 특정 요소에만 적용하려면 필터 정의를 html에 한 번 넣어두고 css에서 filter: url(#id)로 연결하면 됩니다. svg 파일 자체에 효과를 저장해 어디서 열어도 유지되게 하려면, 도형 태그의 filter 속성에 url(#id) 값을 직접 연결하고 같은 파일 안에 필터 정의도 함께 저장하면 됩니다.
png나 jpg 같은 일반 이미지에도 SVG 필터를 쓸 수 있나요?
가능합니다. 다만 이 경우는 이미지 파일 자체에 필터를 저장하는 게 아니라, img 태그에 css로 filter: url(#id)를 걸어서 페이지 안에서만 적용하는 방식입니다. 이때는 SVG 필터를 쓰더라도 CSS filter와 마찬가지로 그 페이지를 벗어나면 효과가 남지 않는다는 점은 동일합니다.