[IT] SVG(Scalable Vector Graphics) 확장자란?

SVG(Scalable Vector Graphics) 파일은 XML 형식의 벡터 이미지 파일 포맷으로, 크기와 관계없이 이미지 품질이 유지되는 특징이 있습니다. 주로 웹과 그래픽 디자인에서 사용되며, 해상도에 구애받지 않는 벡터 기반이라 확대해도 픽셀이 깨지지 않습니다.

SVG의 주요 특징

1. 벡터 형식: 비트맵 이미지(JPG, PNG 등)와 달리, SVG는 수학적 좌표와 경로로 이미지를 정의하므로 품질 손실 없이 크기를 조절할 수 있습니다.

2. XML 기반: SVG 파일은 XML 형식으로 저장되기 때문에 텍스트 편집기로도 열고 편집할 수 있습니다. 각 요소의 위치, 색상, 투명도 등의 정보가 태그 형식으로 표현됩니다.

3. 애니메이션 지원: CSS, JavaScript를 활용하여 SVG 파일에 애니메이션을 적용할 수 있어, 인터랙티브한 웹 요소로도 활용됩니다.

4. 검색 엔진 최적화(SEO): SVG 이미지의 텍스트는 검색 엔진에서 읽을 수 있어 웹에서 더 나은 SEO 성능을 발휘할 수 있습니다.

5. 파일 크기 효율성: XML 텍스트 파일이기 때문에 파일 크기가 작고, 압축하면 더욱 가볍게 사용할 수 있습니다.

SVG의 사용 예시

• 로고: 다양한 화면 크기에서 고품질로 표현되어야 하는 로고에 적합합니다.
• 아이콘: 웹 페이지와 앱에서 크기와 해상도에 관계없이 일관된 아이콘 디자인을 유지할 수 있습니다.
• 인포그래픽: 데이터가 포함된 시각화 자료를 만들기 좋으며, 그래프나 차트를 동적으로 조작할 때도 사용됩니다.

SVG의 장점과 단점

• 장점: 크기 조절 가능, SEO 친화적, 애니메이션 지원, 다채로운 브라우저 지원
• 단점: 복잡한 이미지에는 비트맵보다 파일 크기가 클 수 있으며, XML 구문이 익숙하지 않은 경우 편집에 어려움이 있을 수 있음.

SVG는 HTML 문서에 직접 삽입하거나 링크하여 사용할 수 있어 웹 페이지에서의 활용도가 높으며, 최근에는 많은 웹 브라우저에서 기본적으로 지원하고 있어 활용이 더욱 확산되고 있습니다.