SVG(Scalable Vector Graphic)

참고 https://brunch.co.kr/@kkak10/3

SVC(Scalable Vector Graphic):

벡터 기반. 사이즈를 키워도 깨지지 않고 2차원 그래픽을 표현하기 위해 나왔다. xml 기반이다.

(보통 웹에서 이미지를 표시하려고 하면 기존 사이즈보다 x2된 사진을 사용한다고 한다)

W3C에서 개발함. 

현재 1.2버전이 최신이지만 1.1이 안정적이고 내 코드도 1.1인 것을 확인하였다. 1.2버전은 SVC2로 넘어갈 것이라고 한다.

사이트를 들어가보니 2.1버전이 최신이군 허허)

<svg>태그 알아보기:

<svg width="100%" height="100%" viewBox="0 0 14 14" version="1.1" 

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

xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

...

</svg>

속성-

xmlns: xhtml 스펙을 따르므로 xmlns를 꼭 적어서 NameSpace를 지정해 주어야 한다.

width와 height: svg Element의 크기를 지정해 주며 무조건 지정해 주어야 한다.

viewbox: 실제 svg 영역 중에 보여줄 기준점을 정하는 속성이다. viewbox="x y width height"로 이루어짐.

내부 태그-

rect

circle

Ellipse

Line

Polygon

polyline

path http://blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220045621716참고. 선을 그리는 것 같음.

http://www.clker.com/inc/svgedit/svg-editor.html

이 사이트에서 그리고 <svg> 버튼을 누르면( 좌상단 2번째버튼) html 코드를 확인할 수 있다.