최근 포트폴리오 작업을 하면서 디자인을 위해서 Icon을 적용할 방법을 찾아보다가 발견한 글입니다. 몇몇 글에서 Icon Fonts를 사용하는 방법과 SVG(Scalable Vector Graphics) 이미지를 사용해서 Icon을 적용하는 방법을 알게 되었습니다. 두 기능의 차이점이 궁금해서 구글링 하다가 잘 정리해놓은 글이 있어서 간단하게 정리해봤습니다.
보다 상세한 내용은 글 하단에 첨부한 링크를 참고해주세요~
0. 용어 정리
Icon fonts
- SVG 기반의 이미지를 Font 파일화 하여 css를 통해 Icon을 사용
- 웹 폰트처럼 사용할 수 있음
SVG Icon
- SVG(Scalable Vector Graphics) : XML 기반의 Vector 이미지
- Vector 이미지이기 때문에 품질 손실 없이 크기를 조정할 수 있음
- SVG를 기반으로 만든 Icon 이미지
1. Icon Fonts vs SVG Icon 비교
1.1 파일 크기
파일 크기는 Icon Font가 SVG Icon보다 약간 더 유리합니다.
그러나 파일 크기의 차이는 그렇게 두드러지지 않으며 무시할 수 있습니다.
외부 SVG Icon 파일보다 inline SVG를 사용하는 경우 파일 크기가 상당히 커질 수 있습니다. 외부 SVG와 달리 inline SVG는 브라우저에서 캐시 되지 않기 때문입니다. 여러 색상의 아이콘은 inline SVG를 사용해야 합니다.
1.2 접근성
Icon Font에 비해 SVG Icon은 접근성이 뛰어납니다.
아이콘 글꼴과 달리 SVG는 텍스트가 아닌 이미지로 처리됩니다. SVG는 <title>, <desc> 태그를 사용할 수 있어서 스크린 리더 및 텍스트 브라우저에서 의미 있게 해석될 수 있습니다.
1.3 성능
Icon Font는 가끔 실패하는 경우가 있어서 SVG가 좀 더 좋습니다.
Icon Font는 쉽게 캐시 되고 로드 속도를 높일 수 있는 표준 글꼴입니다. 그러나 이 장점은 캐싱을 위해 추가 HTTP 서버 요청이 필요하다는 큰 단점이 있습니다.
반면 inline SVG의 경우는 반대입니다. inline SVG는 추가 서버 요청을 하지 않지만, HTML 코드 블록으로 간주되기 때문에 브라우저에서 캐시 할 수 없습니다. 이것은 외부 SVG 파일을 사용해 해결할 수 있습니다.
어떤 아이콘이 시스템에 적합한지 선택하는 것은 필요에 따라 다릅니다.
여러 가지 색상의 수정 및 애니메이션 없이 몇 개의 아이콘이 필요한 경우 아이콘 글꼴이 좋습니다. 그러나 여러 색상이 있고 애니메이션이 있는 아이콘을 많이 사용하는 경우 SVG가 더 좋은 선택이 됩니다.
Icon Font는 가끔 오류가 발생할 수 있습니다. Font 로딩에 실패하면 의도한 것과는 다른 깨진 이미지로 표시될 수 있습니다.
1.4 확장성
확장성은 Icon Font 보다 SVG가 큰 이점이 있습니다.
Icon Font는 브라우저에서 일반 글꼴로 간주됩니다. 따라서 브라우저에서 구현하는 Anti-Aliasing 기술에 취약합니다. 반면 SVG는 브라우저에서 이미지로 처리되므로 Anti-Aliasing 규칙이 적용되지 않습니다. 덕분에 SVG는 눈에 띄는 품질 저하 없이 모든 해상도에서 완벽하게 표시됩니다.
1.5 애니메이션
수정 및 스타일 제어 측면에서 Icon Font보다 SVG가 훨씬 더 높은 수준의 융통성을 가지고 있습니다.
Icon Font는 Image Icon과 비교하여 표준 CSS 스타일 규칙을 사용하여 상당한 수준의 사용자 정의를 사용할 수 있지만, 유연성에 관한 한 여전히 제한적입니다. CSS 스타일 수정은 단색 색상, 크기, 표준 변환 및 애니메이션으로 제한됩니다.
SVG는 아이콘 글꼴과 동일한 CSS 컨트롤뿐만 아니라 추가 CSS 획 속성 및 필터도 사용할 수 있습니다. SVG 아이콘의 각 개별 획은 독립적으로 애니메이션 될 수 있습니다.
1.6 위치 지정 (Positioning)
Icon Font 보다 SVG는 배치가 용이합니다.
Icon Font는 글자처럼 동작하기 때문에 위치 지정이 어려울 수 있습니다. 원하는 위치에 Icon Font를 정렬하려면 font-size, line-height, word-spacing, letter-spacing, vertical-align과 같은 다양한 CSS 속성을 조정해야 할 수 있습니다.
SVG는 위치 지정이 훨씬 간단합니다. 크기만 지정하면 됩니다.
1.7 배포
Icon Font는 배포하기가 약간 더 쉽지만, SVG는 수정하기 쉽고 성능이 더 좋습니다.
Icon Font는 일반적으로 @font-face, cdn 혹은 CSS 스타일 시트를 사용하여 배포하기에 더 빠르고 덜 복잡한 편입니다.
SVG를 일반 이미지, 배경 이미지, 개체 또는 inline SVG로 사용하는 방법에는 여러 가지가 있습니다. inline SVG는 성능 저하를 위한 추가 서버 요청을 하지 않고 수정을 허용하므로 SVG 아이콘을 배포하는 방법으로 inline SVG를 가장 많이 사용합니다.
1.8 크로스 브라우저 호환성
브라우저 간 호환성은 Icon Font가 SVG에 비해 훨씬 더 높은 호환성을 제공합니다.
Icon Font는 모든 데스크톱 및 모바일 브라우저와 레거시 IE6~IE8을 포함한 모든 브라우저 버전에서 완벽하게 지원됩니다. 하지만 SVG(기본 지원)는 IE8 이하 버전을 제외한 모든 브라우저에서 크로스 브라우저 호환성을 제공합니다. (원문 작성일 : 2019년 3월)
SVG를 많이 사용하는 경우 브라우저 간 호환성이 큰 문제가 될 수 있습니다.
2. Icon Font vs SVG Icon 비교표
| 구 분 | Icon Font | SVG Icon |
| 파일 크기 | 약간 더 좋음 | |
| 접근성 | 월등히 좋음 | |
| 성능 | 몇개의 단색 아이콘 사용 시 좋음 | 약간 더 좋음 - 여러 색상 사용, 애니메이션 사용 시 좋음 |
| 확장성 | 보통 - 브라우저에서 글꼴로 처리됨 |
좋음 - 브라우저에서 이미지로 처리됨 |
| 애니메이션 | 보통 - CSS Font 설정을 사용 |
좋음 - CSS Font 뿐만 아니라 확장 기능인 획 설정, 필터도 가능 |
| 위치지정 | 약간 불편 - HTML의 글자 처럼 처리, 위치 지정 시 추가 CSS 코딩이 필요하기도 함. |
편리함 - HTML의 이미지 처럼 처리 |
| 배포 | 편리함 | 수정이 용이하고, 속도가 보다 빠름 |
| 크로스 브라우저 호환성 | 호환성이 더 높음 | 일부 기능은 브라우저 호환성 확인 필요 |
참고
https://www.lambdatest.com/blog/its-2019-lets-end-the-debate-on-icon-fonts-vs-svg-icons/
https://kdydesign.github.io/2020/08/25/web-icon-font/
'Dev.FrontEnd > ETC' 카테고리의 다른 글
| [마크다운] Markdown 문법 기본 및 확장, Quick Reference (0) | 2023.11.07 |
|---|
댓글