HTML5에서는 HTML 페이지에 직접 SVG 요소를 포함 할 수 있습니다.
직접 HTML 페이지에 삽입 SVG
다음은 간단한 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 Code explanation:
- SVG 이미지는 시작 <svg> 요소
- 폭 및 높이의 속성 <svg> SVG 이미지의 폭과 높이를 정의 소자
- <circle> 요소는 원을 그리는 데 사용
- CX는 및 CY 속성은 X와 원의 중심의 y 좌표를 정의합니다. CX와 CY를 생략하는 경우, 원의 중심으로 설정된다 (0, 0)
- r 특성은 원의 반지름을 정의
- 스트로크와 스트로크 폭 속성은 모양의 윤곽이 표시되는 방식을 제어합니다. 우리는 4 픽셀 녹색 "경계"에 원의 윤곽을 설정
- fill 속성은 원 내부 색상을 의미한다. 우리는 노란색으로 칠 색상을 설정
- 닫는 </svg> 태그는 SVG 이미지를 닫습니다
참고 : SVG는 XML로 작성되어 있기 때문에, 모든 요소가 제대로 닫아야합니다!