HTML의 SVG
SVG 요소를 HTML 페이지에 직접 삽입할 수 있다.
SVG를 HTML 페이지에 직접 삽입
다음은 간단한 SVG 그래픽의 예시다.
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>SVG 코드 설명
- <svg>루트 요소 부터 시작하자.
- SVG 이미지의 너비와 높이는 width및 height 속성 으로 정의된다.
- SVG는 XML 방언이므로 항상 xmlns속성을 사용하여 네임스페이스를 올바르게 바인딩하자.
- 네임스페이스 “http://www.w3.org/2000/svg”는 HTML 문서 내부의 SVG 요소를 식별한다.
- <circle>요소는 원을 그리는 데 사용된다.
- cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의한다. 생략하면 원의 중심이 (0, 0)으로 설정된다.
- r 속성은 원의 반지름을 정의한다.
- stroke 및 stroke-width 속성은 도형의 윤곽이 표시되는 방식을 제어한다. 원의 윤곽선을 4px 녹색 “테두리”로 설정한다.
- fill 속성은 원 안의 색상을 참조한다. 채우기 색상을 노란색으로 설정한다.
- 닫는 </svg>태그는 SVG 이미지를 닫는다.
⭐ SVG는 XML로 작성되므로 모든 요소는 제대로 닫혀야 하며, XML은 대소문자를 구분하므로 모든 SVG 요소와 속성을 동일한 대소문자로 작성해야 한다. SVG의 모든 속성 값은 숫자일지라도 따옴표로 묶는다.
또 다른 SVG 예
<!DOCTYPE html>
<html>
<body>
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
<circle cx="75" cy="50" r="40" fill="yellow" />
<text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>SVG 코드 설명
- 루트 요소 <svg> 부터 시작하여 너비와 높이, 적절한 네임스페이스를 정의한다.
- 이 <rect> 요소는 사각형을 그리는 데 사용된다.
- 사각형의 너비와 높이는 <svg> 요소의 너비/높이의 100%로 설정된다.
- 사각형의 채우기 색상을 녹색으로 설정하자.
- <circle> 요소는 원을 그리는 데 사용된다.
- cx 및 cy 속성은 원 중심의 x 및 y 좌표를 정의한다.
- r 속성은 원의 반지름을 정의한다.
- 원의 채우기 색상을 노란색으로 설정한다.
- 이 <text>요소는 텍스트를 그리는 데 사용된다.
- x 및 y 속성은 텍스트 중심의 x 및 y 좌표를 정의한다.
- font-size 속성은 텍스트의 글꼴 크기를 정의한다.
- text-anchor 속성은 (텍스트의) 중간 지점이 될 위치를 정의한다.
- fill 속성은 텍스트의 색상을 정의한다.
- 표시할 텍스트로 “SVG”를 쓰자.
- </svg>로 SVG 이미지를 닫는다.
참고
W3C School - SVG in HTML
