3.1 SVG 기본 개념

3.1.1 SVG 문서 구조

SVG 문서는 XML 형식으로 작성되며, 다음과 같은 요소들로 구성할 수 있습니다. 요소들을 적절히 조합하여 다양한 SVG 그래픽을 만들 수 있습니다.

<aside> 💡 XML 이란?

XML(Extensible Markup Language)은 마크업 언어(Markup Language) 중 하나로, 데이터를 저장하고 전송하기 위해 사용됩니다. HTML과 마찬가지로 태그로 구성되어 있지만, HTML과는 달리 데이터의 구조와 의미를 더욱 명확하게 정의할 수 있습니다.

XML은 태그와 속성을 사용하여 데이터를 구조화하며, 이를 이용해 데이터의 의미와 구조를 설명합니다. 예를 들어, <book> 태그 안에 <title>, <author> 등의 하위 태그들을 포함해 책의 정보를 구조화할 수 있습니다.

</aside>

SVG 루트 요소

<svg> 요소로 문서의 시작과 끝을 나타냅니다. 이 요소에는 SVG 문서의 너비, 높이, 배경색 등과 같은 기본적인 설정이 포함됩니다. 그래픽 요소나 컨테이너 요소 등 이미지를 구성하는 요소들은 <svg> ****내부에 위치하게 됩니다.

<svg width="100" height="100" viewBox="0 0 100 100">
	...
</svg>

그래픽 요소

<rect>, <circle>, <line>, <path> 등과 같은 그래픽 요소들은 <svg> 요소 내부에 추가됩니다. 이러한 요소들은 SVG 그래픽을 구성하는 주요 요소입니다. 그래픽 요소에는 다양한 속성이 존재합니다. 예를 들어, <rect> 요소는 넓이(width)와 높이(height) 등의 속성을 가집니다. 이러한 속성은 그래픽 요소의 모양, 크기, 위치, 색상 등을 지정할 수 있습니다.

컨테이너 요소

<g>, <use>, <defs>,<symbol> ****등과 같은 컨테이너 요소들은 ****SVG 그래픽 요소들을 그룹화하여 하나의 객체로 다룰 수 있게 하는 요소입니다. 이러한 컨테이너 요소를 사용하면 다수의 SVG 요소를 하나의 그룹으로 묶을 수 있습니다. 이렇게 그룹화된 요소들은 하나의 요소처럼 조작하거나 스타일을 적용할 수 있습니다. SVG의 컨테이너 요소들에 대해서는 이후 섹션에서 자세히 다루겠습니다.

설명 표현 요소

<title>, <desc>, <metadata>, <aria-label> 등과 같은 설명 표현 요소들은 그래픽 요소에 대한 추가적인 정보와 설명을 제공합니다. 이 요소들은 시각 장애인이나 스크린 리더 사용자 등과 같이 시각적으로 그래픽 요소를 인식하기 어려운 사용자들이 정보를 이해하고 접근할 수 있도록 도와줍니다. SVG의 설명 표현 요소들에 대해서는 이후 섹션에서 자세히 다루겠습니다.

스타일(Style)