SVG (확장 가능한 벡터 그래픽스) Format Guide

SVG (확장 가능한 벡터 그래픽스)

Extension: .svg

MIME Type: image/svg+xml

Overview

SVG는 XML 기반의 2D 벡터 이미지 형식입니다. 래스터 형식과 달리 수학적 도형과 경로로 이미지를 정의하므로, 어떤 크기로 확대해도 화질이 깨지지 않습니다.

SVG는 웹에서 아이콘, 로고, 일러스트레이션, 인터랙티브 그래픽의 표준 형식입니다. 파일이 순수 텍스트이므로 CSS로 스타일을 지정하고, JavaScript로 조작하며, 검색 엔진이 색인할 수 있습니다.

SVG 개발은 1999년 W3C에서 시작되었습니다. SVG 1.0은 2001년 9월 W3C 권고안으로 채택되었고, 2003년 발표된 SVG 1.1은 2011년 2차 개정을 거쳐 현재 가장 널리 구현된 버전입니다.

SVG 2는 2012년부터 개발 중이며, CSS·HTML과의 통합을 강화하고 폐기된 요소를 제거하는 방향으로 진행되고 있습니다. 핵심 SVG 기능에 대한 브라우저 지원은 우수하며, 현대 웹에서 아이콘·로고 형식의 표준으로 자리 잡았습니다.

SVG 파일은 <rect>, <circle>, <path>, <text>, <image>, <g>(그룹) 같은 그래픽 요소를 담은 XML 문서입니다. 경로(path)는 이동, 직선, 곡선, 호 명령으로 구성된 간결한 미니 언어를 사용합니다.

선형·원형 그라디언트, 클리핑 패스, 마스크, 필터(블러, 드롭섀도 등), 패턴, 변환(이동·회전·크기·기울임), CSS 스타일링을 지원합니다. 애니메이션은 SMIL, CSS 애니메이션, JavaScript로 구현할 수 있습니다.

SVG 내부에 래스터 이미지나 다른 SVG를 삽입할 수 있습니다. HTML에 인라인으로 삽입하면 모든 요소가 DOM의 일부가 되어 CSS 셀렉터와 이벤트 핸들러로 직접 제어할 수 있습니다.

SVG (확장 가능한 벡터 그래픽스)

Extension: .svg

MIME Type: image/svg+xml