jiraynor’s 하루 2시간 프로그래밍 - HTML 42. SVG 영상 보러가기

HTML SVG

SVG란?

  • SVG는 Scalable Vector Graphics의 약자입니다.
  • SVG는 웹용 그래픽을 정의하는 데 사용됩니다.
  • SVG는 W3C 권장 사항입니다.

<svg> 요소

HTML <svg> 요소는 SVG 그래픽스용 컨테이너입니다.

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

지원하는 브라우저

표의 숫자는 <svg> 요소를 완전히 지원하는 최소 브라우저 버전을 지정합니다.

브라우저 구글 Chrome 마이크로소프트 Edge Firefox Safari Opera
버전 4.0 9.0 3.0 3.2 10.1

SVG 원

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

SVG 사각형

<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 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 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>
  죄송합니다. 현재 브라우저는 SVG를 지원하지 않습니다.
</svg>

SVG와 Canvas의 차이점

SVG는 XML에서 2D 그래픽을 설명하는 언어입니다.

캔버스는 (JavaScript를 사용하여) 2D 그래픽을 즉시 그립니다.

SVG는 XML 기반입니다. 즉, SVG DOM 내에서 모든 요소를 사용할 수 있습니다. 요소에 JavaScript 이벤트 핸들러를 연결할 수 있습니다.

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

캔버스는 픽셀 단위로 렌더링됩니다. 캔버스에서 그래픽이 그려지면 브라우저에 의해 잊혀집니다. 위치를 변경해야 하는 경우 그래픽에 가려졌을 수 있는 객체를 포함하여 전체 장면을 다시 그려야 합니다.

캔버스와 SVG의 비교

Canvas

  • 해상도에 따라 다름
  • 이벤트 핸들러 지원 없음
  • 텍스트 렌더링 기능 저하
  • 결과 이미지는 .png 또는 .jpg로 저장할 수 있습니다.
  • 그래픽스 부하가 높은 게임에 최적

SVG

  • 해상도에 의존하지 않음
  • 이벤트 핸들러 지원
  • 렌더링 영역이 큰 응용 프로그램에 가장 적합합니다(Google Maps).
  • 복잡한 경우 렌더링 속도가 느림(DOM을 많이 사용하는 경우 렌더링 속도가 느림)
  • 게임 어플리케이션에는 적합하지 않습니다.