HTML에서 SVG

SVG 요소를 직접 HTML 페이지에 삽입할 수 있습니다.

SVG를 직접 HTML 페이지에 삽입

아래는 간단한 SVG 그래픽 예제입니다:

죄송합니다만,您的浏览器不支持内联 SVG.

이는 HTML 코드입니다:

<!DOCTYPE html>
<html>
<body>
<h1>제 하나 번 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 이미지의 너비와 높이를 정의합니다.
  • <circle> 요소는 원형을 그리는 데 사용됩니다.
  • cx와 cy 속성은 원심의 x와 y 좌표를 정의합니다. cx와 cy가 설정되지 않으면 원심은 (0, 0)으로 설정됩니다.
  • r 속성은 원의 반지름을 정의합니다.
  • stroke와 stroke-width 속성은 형태의 경계선 표시 방식을 제어합니다. 우리는 원의 경계선을 4픽셀의 녹색 '경계선'으로 설정했습니다.
  • fill 속성은 원 내부의 색상을 설정합니다. 우리는 채우기 색상을 노란색으로 설정했습니다.
  • </svg> 태그로 SVG 이미지를 닫습니다

주의: SVG는 XML로 작성되므로 모든 요소가 올바르게 닫혀야 합니다!