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>