* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.
* 필자의 기준이 절대적인 진리는 아닙니다.
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코드 설명
- SVG 이미지는 <SVG>태그와 함께 시작한다.
- SVG 태그 내의 width, height 속성은 SVG 이미지의 width,height 속성을 정의한다.
- <circle> 태그는 원을 그리는 태그다.
- cx, cy 속성은 원의 중심 좌표를 정의한다. 만약 cx,cy 속성이 정의 되어 있지 않다면 원의 중심은 (0,0)으로 지정된다.
- r 속성은 원의 반지름을 정의한다.
- stroke 와 stroke-width 속성은 테두리를 어떻게 나타낼지 조절할 수 있다. 우리는 여기서 원의 테두리를 4px 초록색의 'border'로 설정했다.
- fill 속성은 원의 안쪽 색상을 정의한다. 우리는 노란색으로 설정했다.
- 마지막 닫는 </SVG>태그는 SVG 이미지를 끝낸다.
Note : SVG는 XML로 작성되어있다. 모든 요소들은 반드시 태그가 닫혀야 한다.
출처 : W3SCHOOL - SVG - SVG in HTML5
'HTML5 > SVG' 카테고리의 다른 글
| SVG Line (6) | 2015.06.08 |
|---|---|
| SVG Ellipse (6) | 2015.06.08 |
| SVG Circle (182) | 2015.06.08 |
| SVG rect (66) | 2015.06.08 |
| 웹기반 편집기 개발을 위한 SVG 정리 (263) | 2015.06.08 |
댓글