<SVG>

정의 및 사용

SVG란?

  • SVG는 Scalable Vector Graphics의 약자입니다.
  • SVG는 웹을 위한 벡터 기반의 그래픽을 정의하기 위해 사용됩니다.
  • SVG는 XML 포맷을 통해 그래픽을 정의합니다.
  • SVG 그래픽은 줌이나 리사이즈와 상관없이 퀄리티의 손실이 없습니다.
  • SVG 파일 내에서 모든 요소와 속성은 에니메이션 처리가 가능합니다.
  • SVG 는 W3C 권고안입니다.

SVG의 이점

  • SVG 이미지는 어떤 텍스트 에디터로도 생성 및 편집이 가능하다.
  • SVG 이미지는 검색, 인덱스, 스크립트, 압축 등이 가능하다.
  • SVG 이미지는 확대 및 축소가 가능하다.
  • SVG 이미지는 어떠한 해상도로도 고퀄리티로 출력이 가능하다.
  • SVG 이미지는 (화질 저하 없이) 확대가 가능하다.

SVG와 Canvas의 차이점
SVG는 XML로 그리는 2D 그래픽을 기술하는 언어이다.
반면, Canvas는 (자바스크립트로) 2D 그래픽을 그린다.

SVG가 XML에 기반한다는 것은 모든 요소가 SVG DOM 내에서 사용 가능하다는 것을 의미한다. 따라서 해당 요소를 위한 자바스크립트 인벤트 핸들러를 붙일 수 있다.
SVG 내에서, 각각의 그려진 형태들은 객체로 기억된다. SVG 객체가 변경되면, 브라우저는 자동으로 그 형태를 다시 렌더링한다(re-render).

Canvas는 픽셀로 렌더링된다. Canvas 내에서는, 그래픽이 한번 그려지면, 브라우저에 의해서 잊혀진다. 만약 그것의 위치가 변동되면, 그것이 포함하는 모든 객체들을 포함한 모든 것들이 전체적으로 다시 그려져야 한다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함IE9  지원IE10  지원Chrome 지원Firefox 지원Opera 지원Safari 지원

구문

속성 값 설명
속성 설명

예제

참고 : http://msdn.microsoft.com/ko-kr/library/gg193983%28v=vs.85%29.aspx

버그 및 이슈

소제목

목록 으로

댓글