SVG는 Scalable Vector Graphics의 약자로, 확장 가능한 벡터 그래픽을 나타냅니다. SVG는 XML 기반의 벡터 이미지 형식으로, 웹에서 그래픽 요소를 표현하는 데 사용됩니다. SVG를 사용하면 이미지를 확대 또는 축소하더라도 이미지의 품질이 유지되므로 다양한 크기의 디스플레이에서 일관된 모습을 제공할 수 있습니다.

SVG를 사용하는 방법은 다음과 같습니다:

SVG 파일 생성:
- SVG 파일은 일반적으로 확장자가 ".svg"로 끝나는 텍스트 파일입니다.
- 텍스트 편집기를 사용하여 직접 작성하거나, 벡터 그래픽 편집 도구를 사용하여 그림을 만들고 저장할 수 있습니다.
기본 구조:
- SVG 파일은 <svg> 요소로 시작하고 끝나며, 기본적인 구조는 다음과 유사합니다:
```
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  
</svg>
```
  - width 및 height 속성은 SVG 이미지의 가로 및 세로 크기를 지정합니다.
  - xmlns 속성은 XML 네임스페이스를 정의하는데, SVG 문서에 필요한 네임스페이스를 나타냅니다.

그래픽 요소 추가:

다양한 그래픽 요소를 추가하여 원하는 그림을 만들 수 있습니다. 몇 가지 예는 다음과 같습니다:

<rect>: 사각형
<circle>: 원
<line>: 선
<path>: 경로 등

xml
<rect width="50" height="50" fill="blue" />
<circle cx="30" cy="30" r="20" fill="red" />
<line x1="10" y1="10" x2="90" y2="90" stroke="green" />
<path d="M10 10 L90 90" stroke="black" />

스타일과 속성:
- 각 그래픽 요소는 스타일 및 속성을 설정할 수 있습니다. fill, stroke, stroke-width 등의 속성을 사용하여 요소의 색상, 테두리, 두께 등을 지정할 수 있습니다.
웹 페이지에 삽입:
- SVG 파일을 HTML 문서에 삽입하여 웹 페이지에 표시할 수 있습니다.
- <img> 태그를 사용하거나, HTML 문서 내에 직접 SVG 코드를 넣어 사용할 수 있습니다.

간단한 SVG 예제를 웹 페이지에 추가하는 경우:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Example</title>
</head>
<body>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <rect width="50" height="50" fill="blue" />
  </svg>
</body>
</html>

이렇게 하면 파란색 사각형이 포함된 웹 페이지가 나타납니다.