h33. HTML5 벡터 그래픽

HTML5 벡터 그래픽

SVG (Scalable Vector Graphics) 는 가변형 벡터 그래픽인데, 웹용 그래픽으로 사용되며 W3C 의 추천 포맷입니다. 

HTML <svg> 태그는 HTML5 에서 등장하였는데 SVG 그래픽을 담기 위한 영역을 생성합니다. 

SVG 는 직선, 사각형, 원형, 문자 및 그래픽 이미지를 그리기 위한 몇가지 메소드를 가지고 있습니다.

크롬, 사파리, 파이어폭스 및 IE9 이상의 대부분의 브라우저에서 <svg> 태그를 지원합니다.

브라우저가 인라인 벡터 그래픽 기능을 지원하지 않습니다. 

<svg width="200" height="200">
<circle cx="100" cy="100" r="90"
stroke="yellow" stroke-width="20" fill="blue" />
인라인 벡터 그래픽 기능을 브라우저가 지원하지 않거나 웹사이트가 허용하지 않았습니다.
</svg>

---

<svg width="250" height="150">
<rect width="250" height="150"
style="fill:rgb(255,255,0);stroke-width:30;stroke:rgb(0,255,255)" />
인라인 벡터 그래픽 기능을 브라우저가 지원하지 않거나 웹사이트가 허용하지 않았습니다.
</svg>

---

<svg width="250" height="150">
<rect x="30" y="30" rx="40" ry="40" width="190" height="90"
style="fill:green;stroke:blue;stroke-width:30;opacity:0.6" />
인라인 벡터 그래픽 기능을 브라우저가 지원하지 않거나 웹사이트가 허용하지 않았습니다.
</svg>

---

벡터 그래픽(SVG) 와 캔버스 기능의 차이점으로는 벡터 그래픽은 XML 에서 2차원 그래픽을 표현하는 언어입니다. 

캔버스는 자바스크립트로 간편하게 2차원 그래픽을 그립니다.

SVG 는 XML 기반인데, 따라서 SVG DOM 내에 어떤 태그들도 올수 있습니다. 

자바스크립트 이벤트 헨들러를 태그로 삽입할 수도 있습니다.

SVG 에서, 그려진 도형들은 객체로서 관리되는데, SVG 객체의 속성이 변하게 되면, 브라우저는 자동으로 도형을 다시 렌더 하게 됩니다.

반면 캔버스는 픽셀 단위로 렌더 합니다. 캔버스에서는 한번 그래픽이 그려지면 브라우저는 그 다음은 잊어버립니다. 

도형의 위치가 만일 변한다면, 관련된 모든 객체를 포함하여 전체 장면이 다시 그려져야 합니다.

캔버스의 장점은, 결과이미지를 .jpg 또는 .png 로 저장할 수 있다는 것, 그리고 그래픽 게임용으로 더 적합하다는 점을 들수 있습니다.

반면, SVG 벡터 그래픽은 일단 해상도로부터 독립적이고, 이벤트 헨들러를 지원하며, 구글 지도와 같은 대용량의 렌더링이 필요한 응용프로그램에 적합하며, 단, 복잡한 도형일 수록 렌더링이 늦어져서 게임용으로는 적합하지 않습니다.

---

[광고] Udemy 동영상 강의로 보기