최신 웹 개발 튜토리얼

HTML5 SVG

❮ 이전 다음 장 ❯

SVG는 무엇입니까?

  • SVG는 확장 가능한 벡터 그래픽을 의미합니다
  • SVG는 웹에 대한 그래픽을 정의하는 데 사용됩니다
  • SVG는 W3C 추천

스케일 러블 벡터 그래픽 (SVG)는 상호 작용 및 애니메이션 지원 이차원 그래픽을위한 XML 기반의 벡터 이미지 포맷이다. SVG 사양은 1999 년부터 월드 와이드 웹 컨소시엄 (W3C)에서 개발 한 개방형 표준입니다.

SVG 이미지와 그들의 행동은 XML 텍스트 파일에 정의되어 있습니다. 이것은 그들이, 검색 색인, 스크립트 및 압축 할 수 있다는 것을 의미한다. XML 파일로, SVG 이미지를 생성 할 수 있으며, 텍스트 편집기뿐만 아니라 드로잉 소프트웨어로 편집.

모든 주요 현대적인 웹 브라우저를 포함한 모질라 파이어 폭스, 인터넷 익스플로러, 구글 크롬, 오페라, 사파리, 마이크로 소프트 SVG 렌더링을 지원 Edge는-있습니다.

html로 <svg> 요소

표시되는 HTML <svg> 요소 (introduced in HTML5) SVG 그래픽에 대한 컨테이너이다.

SVG 그리기 경로, 상자, 원, 텍스트, 그래픽 이미지를위한 여러 가지 방법이 있습니다.

브라우저 지원

테이블의 숫자는 완벽하게 지원하는 최초의 브라우저 버전 지정 <svg> 요소를.

요소
<svg> 4.0 9.0 3.0 3.2 10.1

SVG 원

예

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
»그것을 자신을 시도

SVG 사각형

RGB (0, 0, 0) ">

예


<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

»그것을 자신을 시도

SVG 둥근 사각형

죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

예


<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

»그것을 자신을 시도

SVG 스타

죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

예


<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

»그것을 자신을 시도

SVG 로고

SVG 죄송합니다, 귀하의 브라우저가 인라인 SVG를 지원하지 않습니다.

예


<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Sorry, your browser does not support inline SVG.
</svg>

»그것을 자신을 시도

SVG와의 차이점 Canvas

SVG는 XML에 2D 그래픽을 기술하는 언어입니다.

Canvas 즉시, 2D 그래픽을 그립니다 (with a JavaScript) .

SVG는 모든 요소가 SVG DOM 내에서 사용할 수 있음을 의미하는 XML 기반으로합니다. 당신은 요소에 대한 자바 스크립트 이벤트 핸들러를 첨부 할 수 있습니다.

SVG에서, 각 그린 도형 객체로 기억된다. SVG 개체의 속성이 변경되는 경우, 브라우저는 자동으로 모양을 다시 렌더링 할 수 있습니다.

캔버스 화소 단위 렌더링된다. 그래픽이 그려되면 캔버스에, 그것은 브라우저에 의해 잊혀진다. 그 위치를 변경해야하는 경우, 전체 장면은 그래픽에 포함되었을 수있는 개체를 포함하여 다시 그려야 할 필요가있다.

캔버스와 SVG의 비교

아래의 표는 캔버스와 SVG 사이에 몇 가지 중요한 차이점을 보여줍니다 :

Canvas SVG
  • 해상도에 따라
  • 이벤트 핸들러에 대한 지원 없음
  • 불쌍한 텍스트 렌더링 기능
  • 당신은 결과 이미지를 저장할 수 있습니다 .png 또는 .jpg
  • 그래픽 집약적 인 게임에 적합
  • 독립적 인 해상도
  • 이벤트 핸들러에 대한 지원
  • 가장 큰 렌더링 영역 애플리케이션에 적합 (Google Maps)
  • 느린 렌더링 복잡한 경우 (anything that uses the DOM a lot will be slow)
  • 게임 응용 프로그램에 적합하지 않음

SVG에 대한 자세한 내용은, 우리의 참조하시기 바랍니다 SVG 자습서 .

❮ 이전 다음 장 ❯