웹기반 편집기 개발을 위한 SVG 정리

현재 캔버스로 개발되어있는 편집기가 하나하나의 객체가 많아지다보니 렌더링 시간이 꽤나 오래 걸리기 시작했다.

또한 캔버스 기반 편집기는 렌더링시마다 서버와 통신을 해서 바뀐 정보를 하나하나 보낸 뒤 다시 받는 형식으로 개발되어있다.

SVG로 변경하게 되면 서버와의 통신을 줄일 수 있고, 좀더 클라이언트 기반으로 편집기 엔진이 변경될 것 같아 SVG 스터디를 시작하려 한다.

SVG 의 위키백과부터 살펴보았다.

SVG(Scalable Vetor Graphics) 는 2차원 벡터 그래픽을 표현하기 위한 XML기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화,목록화,스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG 형식의 파일은 SVG기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어 있으므로 문서 편집기로도 편집이 가능하다.

현재 MS의 IE8 이전 버전을 제외한 대부분의 주요 웹 브라우저들은 SVG를 지원한다. 인터넷 익스플로러에서는 SVG파일을 보기 위해 별도의 플러그인을 수동으로 설치하여야 하며, 그렇지 않은 경우에는 웹 페이지 제작자가 구글 코드에서 개발중인 JS 라이브러리, SVG Web을 웹 페이지 코드에 포함시켜야 한다.

웹 브라우저에서의 SVG 지원

• IE에서는 IE9부터 SVG를 지원한다.
  IE를 위한 플러그인이 어도비 사에서 나왔으나, 09년 1월 1일부터 지원을 중단.
• 오페라는 8.0 beta3부터 SVG 1.1 Tiny 를 지원한다.
• FF(1.5베타 1 이후) 는 SVG 1.1 의 지원을 위한 기능을 개발 중이다.

출처 위키백과 SVG (http://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4)

W3School SVG

SVG는 스케일러블 벡터 그래픽스 기반이다.

SVG는 XML형식의 벡터기반 그래픽으로 정의되어있다.

선행되어야 할 학습

• HTML
• 기본 XML

SVG란 무엇인가

• SVG 는 스케일러블 벡터 그래픽 기반이다.
  
• SVG 는 줌인/아웃 , 리사이즈 했을 때 화질이 떨어지지 않는다.
• SVG내의 모든 요소와 모든 속성들은 animate가 가능하다.