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 이미지를 가져오려면

<object type="image/svg+xml" data="image.svg"></object>

기술적으로

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="HTML5에서 SVG를 사용하는 방법" >
</object>

태그를 사용하여 SVG 이미지를 가져옵니다.

<embed type="image/svg+xml" src="image.svg" />

SVG 이미지는 HTML 사양의 일부는 아니지만 주로 Flash 플러그인을 구현하는 데 사용되는 모든 브라우저에서 널리 지원됩니다.

SVG 이미지를 가져오려면

<iframe src="image.svg"></iframe>

CSS 배경 이미지를 사용하여 SVG 이미지 가져오기

CSS 배경 속성을 사용하여 SVG 이미지를 배경 이미지로 가져올 수 있습니다.

이것은 태그를 사용하는 것과 동일하며 동일한 장점이 있습니다. 그리고 단점.

#id {
  background-image: url(image.svg)  no-repeat;
}

Rendering:

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되길 바랍니다.

위 내용은 HTML5에서 SVG를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!