Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

우기TIL

SVG Tutorial 본문

클라이언트

SVG Tutorial

우기왕 2016. 9. 3. 02:32

SVG (Scalable Vector Graphics)

 

  • XML 기반 표준 그래픽 포멧입니다.
  • SVG 의 모든 요소와 속성들에 애니메이션을 적용시킬 수 있습니다.
  • 벡터기반으로 구성되어 있어 해상도에 영향을 받지 않습니다. (확대 축소로 인해 이미지가 깨지는 현상이 X)
  • Javascript SVG DOM API를  이용해서 모든 element를 자유롭게 컨트롤 할 수 있다.
  • 문서 복잡도가 증가할수록 렌더링이 느리다.( Dom이 많을 수록 느려짐..게임에 비적합 )

HTML안에 SVG 넣어보기!

 

<!DOCTYPE html>
<html>
<body>
<h1>SVG in HTML!!</h1>
<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" style="fill:#f0f;stroke-width:5;stroke:#000">
</svg>
</body>
</html>
더보기

SVG in HTML!!

 

 


SVG에서는 모양을 만들 수 있는 여러 태그가 있습니다. 그것들의 대해서 예제를 보고 갑시다.

 


직사각형 만들기 - <rect>

<svg width="100" height="100">
    <rect x="25" y="25" width="50" height="50" 
    style="fill:#f0f;stroke-width:5;stroke:#000;fill-opacity:0.3;stroke-opacity:0.9">
</svg>
  • svg태그에 width, height는 svg영역의 크기를 선택합니다.
  • rect태그에서 x, y 는 직사각형의 위치를 지정합니다. x는 왼쪽을 기준으로 y는 상단을 기준으로 지정
  • rect태그에 width, height는 svg태그와 마찬가지로 크기를 지정한다.
  • rect태그 안에 style에서는 css를 정의되어있는데 svg는 스타일속성은 css속성을 사용한다.
    • fill : 도형의 내부를 채우는 색을 지정?
    • stroke-width : 테두리선의 굵기를 지정
    • stroke : 테두리선의 색을 지정
    • fill-opacity, stroke-opacity : 도형의 내부, 테두리선의 투명도를 정의한다. (그냥 opacity를 사용해 두개를 하나로 처리 할 수 있다.)

위에 예제에는 빠져있지만 rect에 atrribute중에 rx와 ry가 있는데 이것을 통해서 사각형 모서리에 둥글게 만들 수 있다.

ex)

 


원 만들기 - <circle>

 

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" style="fill:#0f0;stroke-width:3;stroke:#f00;">
</svg>
  • circle 태그는 rect 와는 다르게 x,y 대신에 cx,cy가 있다.  cx,cy는 원의 중심의 좌표를 기준으로 위치를 정한다.
  • r은 원의 반지름 크기이다. 즉 원의 크기를 결정한다.

 

 


타원 만들기 - <ellipse>

 

 

<svg width="200" height="100">
    <ellipse cx="90" cy="45" rx="80" ry="40" style="fill:#00f;stroke-width:3;stroke:#f00;">
</svg>
  • cx, cy는 circle태그의 속성과 동일한 기능을 한다.
  • rx, ry도 원의 반지름이랑 같은 개념이지만 ellipse태그에서는 rx로 x축의 반지름 ry로 y축의 반지름을 따로 지정한다.

선 그리기 - <line>

 

<svg width="200" height="100">
    <line x1="10" y1="10" x2="190" y2="80" style="stroke-width:3;stroke:#00f;">
</svg>
  • x1, y1은 선의 시작위치를 지정한다. 마찬가지로 x2,y2는 선의 도착지점을 지정한다.

 


다각형 그리기 - <polygon>

다각형은 최소 3개의 변을 포함하는 모양을 생성시 사용한다.

 

<svg width="300" height="100">
    <polygon points="10, 10 290, 50 10, 90 " style="stroke-width:3;stroke:#00f;fill:#f00;">
</svg>

 

  • polygon 태그는 points 속성에 x,y를 쭉 나열하는 식으로 작성하면 된다.    ex) points="x1, y1 x2, y2 x3, y3" 
  • 예제 처럼 최소 3개 이상의 점을 만들어줘야 한다. 
  • 그려지는 방식은 points 에 작성한 좌표값대로 선이 그려지면서 모든 선이 다 그려진 후에는 마지막 좌표값이 다시 첫번째 좌표로 
    선을 그으면서 겹치는 영역을 채우면서 도형이 완성되는 것으로 추정한다....

 

 

    그려지는 원리..?

  나는 이상하게 잘 이해가 안가서...혼자 30~40분을 써가면서 만들어봤다....


폴리라인 만들기 (꺽인선) - <polyline>

 

<svg width="300" height="100">
    <polyline points="10, 10 100, 90 200, 10 290,50 " style="stroke-width:3;stroke:#00f;fill:#f00;">
</svg>
  • 작성법은 polygon tag와 동일하다. 다른점은 폴리라인은 굳이 도형을 만들지 않아도 된다.

Path로 만들기 - <path>

일단 path는 다른것과 달리 몇개의 정의되어있는 문자로 경로를 지정하여 도형이나 선을 그릴 수 있다. 일단 정의되어 있는 문자에 대해서 알아보자

  • M = moveto    (기준점 이동) -> parameter : x,y
  • L = lineto    (점으로 이동) -> parameter : x,y
  • H = horizontal lineto    (가로선 이동) -> parameter : x
  • V = vertical lineto    (세로선 이동) -> parameter : y
  • C = curveto    (곡선 이동) -> parameter : x1,y1 x2,y2 x,y
  • S = smooth curveto    (부드러운 곡선 이동) -> parameter : x2,y2 x,y
  • Q = quadratic  Bézier curve    (2차 베지어 곡선) -> parameter : x1,y1 x,y
  • T = smooth quadratic Bézier curveto    (부드러운 2차 베지어 곡선) -> parameter : x,y
  • A = elliptical Arc    (타원형의 호) -> parameter : rx,ry x-axis-rotation-large-arc-flags, sweepflag x,y
  • Z = closepath    (닫아버리기!)
* 위 문자들은 전부 소문자로 표시가 가능합니다. 단 대문자절대적 값이고, 소문자상대적 값이 적용된다.
대문자는 svg전체를 기준으로 x, y가 적용되지만 소문자는 이전 점을 기준으로 x, y 가 적용된다.
예제를 다 풀면 ..암이 걸릴 것 같아서 w3school에 첫번째 예제만 옮기고 추후에 path만 다시 포스팅을 해야겠다.....
<svg width="200" height="100">
    <path d="M10 10 L190 50 L10 90 Z" style="fill:#f00;stroke:#00f;stroke-width:5px">
</svg>
더보기
    

w3School에서도..Complex? YES!!!! Because of the complexity involved in drawing paths it is highly recommended to use an SVG editor to create complex graphics.라고 작성되어있다. 내가 해석했을때는 원래 어려운거니 ...복잡한거는 SVG편집기를 쓰라는것 같다...그러니 나도...ㅂㅇ


Text작성하기 - <text>

 

<svg width="200" height="100">
    <a href="http://ukking90.tistory.com">
       <text x="0" y="15">ukking90 블로그가기</text>
    </a>
</svg>
  • text는 특이한 속성이 없이 x,y로 위치만 지정한후 작성하면 된다.
  • w3School을 보다가 알아낸 것인데 모든 요소에 html태그를 사용할 수 있는 것 같다. 예제처럼 a tag로 감싸서 link를 거는 등 여러 작업을 할 수 있을 것 같다.
  • text태그 하위그룹으로 입력하는 tspan태그가 있는데 text를 그룹화하는 용도를 제외한 장점은 모르겠어서 따로 설명은 안하겠다. 

stroke 속성

매우 간단한 개념이라서 따로 예제소스를 작성하지는 않겠다.

  • stroke = 앞에서 사용한 것인데 stroke의 선색을 지정하는데 사용한다
  • stroke-width = 선의 굵기 지정
  • stroke-linecap = butt, round, square ......쉽다고 했는데 butt와 square의 차이를 잘모르겠다...(square가 길고 butt가 짧음) round는 끝을 원형으로
  • stroke-dasharray = 점선을 만드는 것이다 사용법은 array처럼 반복을 원하는 점선을 정의해서 작성하면 된다.
    ex)"10,10"또는 "10, 5" 또는 "20,10,5,5,5,10" -> 선,빈공간,선, 빈공간 이규칙으로 들어간다.

 

Comments