HTML의 SVG
SVG 요소를 HTML 페이지에 직접 포함할 수 있습니다.
SVG를 HTML 페이지에 직접 포함
다음은 간단한 SVG 그래픽의 예입니다.
다음은 HTML 코드입니다.
예시
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG 코드 설명:
- SVG 이미지는 <svg> 요소로 시작합니다.
- <svg> 요소의 너비 및 높이 속성은 SVG 이미지의 너비와 높이를 정의합니다.
- <circle> 요소는 원을 그리는 데 사용됩니다.
- cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의합니다. cx 및 cy가 설정되지 않은 경우 원의 중심은 (0, 0)으로 설정됩니다.
- r 속성은 원의 반지름을 정의합니다.
- 획 및 획 너비 속성은 모양의 윤곽선이 표시되는 방식을 제어합니다. 원의 윤곽을 4px 녹색 "테두리"로 설정합니다.
- 채우기 속성은 원 안의 색상을 나타냅니다. 채우기 색상을 노란색으로 설정합니다.
- 닫는 </svg> 태그는 SVG 이미지를 닫습니다.
참고: SVG는 XML로 작성되었으므로 모든 요소를 제대로 닫아야 합니다!