SVG :: 개념 및 좌표체계

SVG 에 대한 정리 내용은 대부분 아래의 Spec 과 Tutorial 을 참조한다.

https://www.w3.org/TR/SVG : W3C SVG Spec 

http://tutorials.jenkov.com/svg/index.html : SVG Tutorial by Jenkov

이번 페이지에서는 SVG 에 대한 기본 개념과 좌표체계 그리고 여러 요소들을 표현하기 위한 기본적인 svg element 에 대해 정리하였다.

---

SVG 개념

• Scalable Vector Graphics 의 약어로 Vector 기반이기때문에 해상도에 영향을 받지 않고 확대나 축소를 하여도 이미지가 깨지지 않는다.

• XML based

• Javascript SVG DOM API를 이용하기 때문에 Event handler를 등록하여 Element 를 자유롭게 컨트롤 할 수 있다. ( DOM 제어가 쉽다. )

• 데이터분석, 일반적인 Chart 에 사용

SVG Coordinate System

 

일반적인 좌표 체계

• 수학에서 사용하는 일반적인  좌표 시스템의 경우, x=0, y=0 의 좌표는 그래프의 왼쪽 하단 모서리에 존재 

• x좌표는 오른쪽, y좌표는 위로 이동하면서 값을 증가시키고 아래로 갈수록 값을 감소시킨다. 

   

 

SVG 좌표 체계

• SVG 좌표 시스템에서 점 x=0 은 왼쪽 상단 모서리이고.  y 축은 일반 그래프 좌표 시스템과 비교하여 역전된다. 

SVG svg element

<svg  xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">

</svg>

SVG element 선언방식이다. HTML5, 대부분의 브라우저는 SVG를 지원하기 때문에  namespace 관련부분은 확장자가 ' .svg ' 인 독립 파일에 대해서만 포함시켜주어도 된다. IE8 같은 브라우저는 기본적으로 SVG에 대한 지원을 하지 않기 때문에 SVG 랜더링 플러그인을 따로 설정해주어야 한다. SVG 랜더링에 관련해서는 아래의 표와 다음 url 을 참고할 것.

SVG Rendering ( https://msdn.microsoft.com/ko-kr/library/gg589526(v=vs.85).aspx )

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <svg x="10">
    <rect x="10" y="10" height="100" width="100"
        style="stroke:#ff0000; fill: blue"/>
  </svg>                                                                

   <rect x="20" y="10" height="100" width="100"
        style="stroke:#009900; fill: red"/>
</svg>

위와 같이 SVG element 내에 중첩하여 사용할 수도 있다. 중첩된 SVG element 는 상위 좌표에 상대적으로 위치하게 되며 상위에 좌표를 선언하여 시작점을 변경 할 수 있다. 위 예제는 red, blue 두개의 사각형을 을 선언한 것이다. blue rect 는 x좌표가 10+10 이고 red  rect 은 x좌표가 20 으로 두 도형의 좌표가 동일하여 겹쳤기 때문에 뒤에 선언한 rect 만 출력된다.