HTML5/SVG

SVG in HTML

Jundol 2015. 6. 8. 12:26

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.





HTML5 에서는 HTML 페이지 내에 SVG 요소들을 직접 삽입할 수 있습니다.


HTML 페이지에 SVG를 직접적으로 끼워넣기.

여기 간단한 SVG그래픽의 예가 있다.


Sorry, your browser does not support inline 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