SVG(Scalable Vector Graphics) 정의

> 바로가기 : W3C SVG Specfication (https://www.w3.org/TR/SVG2/)
> 바로가기 : W3School SVG Tutorial (https://www.w3schools.com/graphics/svg_intro.asp)
> 바로가기 : SVG 애니메이션 레벨2 (https://svgwg.org/specs/animations/)

동적 웹페이지를 위하여 플래쉬가 널리 사용되던 적이 있습니다. 현재도 사용되긴 하지만 웹 호환성 문제가 나타나며 점진적으로 사용이 감소하고 있는 추세입니다. 플래쉬를 충분히 대체할 수 있는 웹 표준 기술이 존재하기 때문에 플래쉬는 결국 사장될 것입니다. 이를 대체하는 대표적인 표준 기술이 SVG 입니다.

SVG(Scalable Vector Graphics)는 XML 문서 형식으로 2차원 벡터 그래픽 객체를 정의하는 웹 표준으로 1999년 W3C(World Wide Web Consortium)의 주도로 개발되었습니다. 당시 인터넷 이용 환경은 차별없는 웹 구현에 제약이 있었습니다. 웹 브라우저에서 그래픽 객체를 표현하기 위해 Flash, Applet, ActiveX 등 벤더 종속적인 Binary Plug-in 을 사용했으나 상호운영성 및 호환성에 부족한 부분이 있었습니다.

현재 신규 제작되는 웹사이트의 경우 대부분 HTML5 사양이 적용되고 있습니다. HTML5가 이전 HTML 사양과 구별되는 기술직인 특징은 멀티미디어(video, audio) 사용성 강화, 그래픽 표현 강화(svg, canvas), Socket 적용 등을 들 수 있습니다. HTML5가 정의하는 2차원 벡터 그래픽 표현 방법은 SVG를 사용합니다. 이를 통해 HTML5는 SVG가 가지는 장점을 수용합니다. SVG가 가지는 장점은 여러가지가 있지만 대표적으로 다음과 같습니다.

  • 문서로 작성되는 그래픽이기 때문에 텍스트 편집기를 통해 제작될 수 있다. 기계판독(Machine-Readable)이 되는 형식이다
    (플래쉬는 이진 바이너리 코드의 실행으로 기계판독이 되지 않는 데이터 입니다)
  • 벡터 그래픽이기 때문에 표현되는 장비 해상도에 영향을 받지 않는다
    (확대, 축소하더라도 원본의 품질을 유지한다)
  • DOM (Document Object Model)을 가지기 때문에 그래픽 요소에 대한 검색, 색인이 가능하다
  • Video, Audio, Raster Image 등 멀티미디어 요소와 통합이 쉽다
  • Animation 지원으로 동적인 그래픽 표현이 가능하다
    (SVG 애니메이션은 SMIL(Synchronized Multimedia Intergration Language)을 정의하는 W3C Synchronized Multimedia(SYMM) 워킹그룹과 협력하여 개발되었습니다.)
  • 웹 표준 기술이기 때문에 별도의 이진 플러그인 없이 웹브라우저에서 바로 동작한다.

[출처] http://svgtutorial.com/svg-browser-support/   

SVG 적용 사례

> 바로가기 : Pinterest (https://www.pinterest.co.kr/)
> 바로가기 : ArcGIS (https://developers.arcgis.com/javascript/3/jssamples/graphics_svg_path.html)
> 바로가기 : Earth NullSchool (https://earth.nullschool.net/)
> 바로가기 : D3-Data Driven Documents (https://d3js.org/)

 

SVG를 이용한 공간정보 시각화

공간정보 분야에서 SVG 적용으로 얻을 수 있는 가장 큰 이점은 SVG Animation 요소 적용으로 실시간으로 변하는 상황의 표현이 쉽다는 것입니다. 아래의 예시는 간단한 SVG 애니메이션 소스 입니다. 

첫번째는 그래픽요소가 가지는 속성을 변경하는 것으로, 실제 공간정보분야에 적용된다면 비즈니스 레이어에 존재하는 객체가 가지는 Business Value에 연동하여 그래픽 표현을 적용하는데 적용될 수 있습니다.
두번째는 객체의 위치를 변경하는 것으로써 이동체(Moving Object)의 실시간 위치를 관제하는 경우 적용될 수 있습니다.
세번째는 지정된 길을 따라가는 예시로 항공기의 궤적, 물류 분야 관제 등 경로 표현에 적용될 수 있습니다.
SVG에서 객체의 형상(Rectagle, Circle, General Path, Group,..)을 정의하는 모든 요소는 애니메이션의 대상이 됨으로 동적인 표현이 가능합니다.

지리좌표계의 적용을 위해 SVG 의 Root Element(<svg>)에 'viewBox' 속성을 지정합니다. 이를 통해 실세계 좌표계(World Coordintate Reference System)를 사용할 수 있습니다. 일반적으로 경위도로 표현되는 좌표를 그대로 이용하기 때문에 GIS App 개발을 위한 별도의 변환 작업이 요구되지 않습니다.

> 다운로드 : svg_gis.html ( 

svg_gis.zip
다운로드

가장 일반적인 방법으로써 공간정보의 시각화를 위하여 Openlayers, leaflet등의 공개 SW가 널리 사용됩니다. 이 들 라이브러리는 D3와 함께 사용되면 동적인 정보 표현을 가능하게 합니다. D3는 HTML, SVG, CSS를 쉽게 사용하도록 도와주는 Wrapper 또는 Helper 라이브러리 입니다. 사용자는 SVG가 정의하는 그래픽 요소에 대한 지식이 없더라도 D3를 통해 쉽게 SVG를 이용할 수 있습니다.

기회가 된다면 본 블로그를 통해 다양한 GIS Data Viewer(OpenLayers, Leaflet, CesiumJS)에서 SVG를 활용하는 사례를 직접 제작하여 게시하겠습니다. 

> 바로가기 : SVG 애니메이션 사례 - 영국 바람 차트 (

https://charts.animateddata.co.uk/ukwind/)

> 바로가기 : leatlet + SVG - TOURISVIS.COM 스키장 안내 지도 (

https://winter.intermaps.com/oetztal?lang=en)

 

 

+ Recent posts