SVG는 웹에서 벡터(Vector) 그래픽 요소를 다루는 DOM 인터페이스에 포함된 기술이다. 벡터는 로고, 심벌, 캐릭터 제작 등에 특화된 그래픽 표현 기술이며 웹에서 이러한 결과물들을 SVG를 통해 비트맵 전환없이 표현할 수 있다.
벡터는 기본적으로 크기 조정으로부터 자유롭고 그래픽을 형성하는 선, 면 하나하나에 원하는 인터랙티브 및 애니메이션 처리를 할 수 있다. 특히 SVG는 벡터 그래픽 도구에서 손쉽게 생성하여 코드로 전환할 수 있다.
방식 | Embed | Inline | Image | Background |
---|---|---|---|---|
<object> | <svg> | <img> | css: background-image | |
CSS 적용 | 가능 | 가능 | 일부 inline 방식 가능 | 일부 inline 방식 가능 |
JavaScript 동적 처리 | 가능 | 가능 | 불가능 | 불가능 |
SVG 요소 조작 | 가능 | 가능 | 가능 | 가능 |
SVG 애니메이션 | 가능 | 가능 | 불가능 | 불가능 |