HTML5에서 SVG를 사용하는 방법

青灯夜游
풀어 주다: 2018-12-04 10:49:14
원래의
9035명이 탐색했습니다.

HTML5에서는 태그를 사용하여 SVG를 인라인할 수 있고, HTML의 HTML5에서 SVG를 사용하는 방법 태그, 태그,

HTML5에서 SVG를 사용하는 방법

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

HTML5 태그를 인라인 SVG에 사용하기

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

참고:

1. 태그를 인라인 SVG에 사용하려면 태그 요소 내에 선언하는 것을 잊지 마세요: xmlns="http://www.w3.org/ 2000/svg".

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>
로그인 후 복사

렌더링:

HTML5에서 SVG를 사용하는 방법

SVG 이미지를 가져오려면 HTML5에서 SVG를 사용하는 방법 태그를 사용하세요.

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

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />
로그인 후 복사

렌더링:

HTML5에서 SVG를 사용하는 방법

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

<object type="image/svg+xml" data="image.svg"></object>
로그인 후 복사

기술적으로 태그는 SVG 파일을 포함한 많은 요소에 사용할 수 있습니다. 이미지로 식별된 요소가 아닌 요소는 이미지 검색에서 사용할 수 없습니다. 해결 방법은 대체 태그로 HTML5에서 SVG를 사용하는 방법 태그를 사용하는 것입니다.

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