HTML5에서 SVG를 사용하는 방법

HTML5에서는 태그, 태그,

SVG는 웹 페이지의 크기가 변경될 때 왜곡 없이 크기에 맞게 다시 그릴 수 있는 벡터 그래픽 형식으로 반응형 웹 디자인에 사용하기에 매우 적합합니다. 이 기사는 HTML5에서 SVG를 사용하는 방법에 대해 자세히 소개합니다. 도움이 되기를 바랍니다. [관련 동영상 튜토리얼 추천: HTML5 튜토리얼]

HTML5

SVG는 HTML 5 초안 사양의 일부입니다. HTML 5 언어의 인라인이 가능합니다. 이제 모든 주요 브라우저 브랜드(IE9 제외)는 매우 우수한 지원을 제공합니다.

참고:

1.

2. 이는 정적 SVG를 가져오는 데에만 사용할 수 있습니다.

아래는 간단한 HTML5 SVG 예입니다.

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>

렌더링:

SVG 이미지를 가져오려면 태그를 사용하세요.

참고: 태그는 정적 이미지 SVG를 가져오는 데만 사용할 수 있습니다.

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />

렌더링:

SVG 이미지를 가져오려면