SVG는 Scalable Vector Graphics를 나타내며 XML로 2D 그래픽 및 그래픽 응용 프로그램을 설명하기 위한 언어이며 XML은 SVG 뷰어에 의해 렌더링됩니다.
SVG는 원형 차트, X, Y 좌표계의 2차원 그래프 등과 같은 벡터 유형 다이어그램에 주로 유용합니다.
HTML5에서 SVG(Scalable Vector Graphics)로 작업하려면 다음 구문과 함께 태그를 사용하여 SVG를 직접 포함하십시오 -
구문
<svg xmlns="https://www.w3.org/2000/svg"> ... </svg>
HTML5 SVG에서 모양을 그리려면
요소를 사용하여 원을 그립니다. 사각형을 그리는 요소입니다. 선을 그리는 요소입니다. 요소를 그려서 타원으로 표시합니다. 다각형을 그리는 요소입니다.
,

다음 코드를 실행하여 HTML5에서 SVG로 작업하는 방법을 배울 수 있습니다. 여기에 원을 그릴 것입니다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 10%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Circle</title>
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
<circle id="greencircle" cx="60" cy="60" r="50" fill="green" />
</svg>
</body>
</html>