html5 svg

-svg

백터 이미지를 저장하는 포맷

svg에는 개발자가 사용할 수 있는 몇가지 미리 정의 된 형상 요소들이 있습니다.

rect 사각형

circle 원

ellipse 타원

line 라인

polyline 다각형 선

polygon 다각형

path 패스 (모양의 경로)

 

[ rect ] 요소는 사각 모양의 사각형 또는 그것의 변형을 만드는 데 사용됩니다.

<svg width="400" height="110">

  <rect width="300" height="100" style="fill:rgb(0,0,255); stroke-width:3; stroke:rgb(0,0,0)" />

</svg>

css로 몇가지 새로운 특성을 포함할 수도 있습니다.

<svg width="400" height="180">

  <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.2; stroke-opacity:0.9" />

</svg>

- x ="50"

사각형의 왼쪽 위치를 정의 (왼쪽에서 50픽셀 거리에 사각형 형성)

- y ="20"

사각형의 위쪽 위치를 정의 (위에서 20픽셀 거리에 사각형 형성)

- fill-opacity:0.2;

채우기 색상의 투명도를 정의 (0~1)

- stroke-opacity:0.9;

선 색상의 불투명도를 정의 (0~1)

 

"전체 요소 (fill,stroke)의 불투명도를 한꺼번에 적용하려면?"

css로 전체 요소의 불투명도 값을 정의합니다. (0~1)

opacity:0.6

<svg width="400" height="180">

  <rect x="50" y="20" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; opacity:0.6" />

</svg>

"모서리가 둥근 사각형을 표현하려면?"

rx, ry는 사각형 모서리의 둥글기를 정의합니다.

<svg width="400" height="180">

  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red; stroke:black; stroke-width:5; opacity:0.5;" />

</svg>

 

[ circle ] 요소는 원을 만들 수 있습니다.

<svg height="100" width="100">

  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

cx와 cy속성은 원의 중심의 x와 y 좌표를 정의합니다.

cx와 cy를 생략하면, 원의 중심이 (0,0)로 설정됩니다.

r 특성은 원의 반지름을 정의합니다.

 

[ ellipse ] (엘립스) 타원을 만들 수 있습니다. 타원은 원과 밀접한 관련이 있습니다.

차이로는 원은 x, y 둥글기가 같지만 타원은 x, y 둥글기가 다릅니다.

<svg height="140" width="500">

  <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow; stroke:purple; stroke-width:2;" />

</svg>

- cx="200" 타원의 중심의 좌표를 정의 (타원의 중심축 x좌표)

- cy="80" 타원의 중심의 좌표를 정의 (타원의 중심축 y좌표)

- rx="100" 수평 반지름을 정의 (타원의 넓이)

- ry="50" 수직 반지름을 정의 (타원의 높이)

 

"타원 3개를 겹겹이 쌓으면?"

<svg height="150" width="500">

  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />

  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:green" />

  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />

</svg>

"노란 타원 위에 흰 타원을 겹치면?"

<svg height="100" width="500">

  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" />

  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" />

</svg>

 

- line 요소는 선을 만드는데 사용됩니다.

<svg height="210" width="500">

  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0); stroke-width:2" />

</svg>

 

- x1="0" 선의 x축 시작 부분을 정의

- y1="0" 선의 y축 시작 부분을 정의

- x2="200" 선의 x축 끝 부분을 정의

- y2="200" 선의 y축 끝 부분을 정의

 

[ polygon ] (폴리곤) 다각형; polygon 요소는 적어도 세개의 변(측면)을 포함하는 그래픽을 생성하는데 사용됩니다.

다각형은 직선을 만들고, 모양이 닫힙니다. (모든 라인은 서로 연결됩니다.)

다각형은 그리스어에서 유래했습니다.

poly는 "다(여럿)"

gon은 "(연결형)각형" 을 의미합니다.

세 개의 변 (side, 측면, 선분)을 가진 다각형을 작성합니다.

<svg height="210" width="500">

  <polygon points="200,10 250,190 160,210" style="fill:green; stroke:purple; stroke-width:1;" />

</svg>

- points="200,10 250,190 160,210" 다각형 각 코너(점)의 위치를 x와 y로 정의

points="x1,y1  x2,y2  x3,y3"

 

"네개의 측면(side)를 가진 다각형은?"

<svg height="250" width="500">

  <polygon points="220,10 300,210 170,250 123,234" style="fill:green; stroke:purple; stroke-width:1;" />

</svg>

"polygon 태그로 별을 만든다면?"

fill-rule:nonzero;

<svg height="210" width="500">

  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:green; stroke:purple; stroke-width:5; fill-rule:nonzero;" />

</svg>

polygon 태그로 별을 만들 때, fill-rule 속성을 변경하여 중첩 부분에는 색을 채우지 않을 수도 있습니다.

fill-rule:evenodd;

<svg height="210" width="500">

  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:green; stroke:purple; stroke-width:5; fill-rule:evenodd;" />

</svg>

 

 

[ polyline ] 요소는 직선으로 구성되어 모양(shape)을 만드는데 사용됩니다.

<svg height="200" width="500">

  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none; stroke:black; stroke-width:3;" />

</svg>

<svg height="180" width="500">

  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white; stroke:red; stroke-width:4" />

</svg>

 

 

[ path ] 패스, 경로; path는 요소 경로를 정의하는 데 사용됩니다.

다음 명령은 경로 데이터를 사용할 수 있습니다.

M = moveTo

L = lineTo

H = 수평 lineTo

V = 수직 lineTo

C = curveTo

S = 매끄러운 curveTo

Q = 베지어 곡선

T = 부드러운 정방형 3차원 curveTo

A = 타원형 호

Z = closePath

 

위의 모든 명령은 소문자로도 표현 될 수 있습니다.

이때 대문자는 절대 위치를, 소문자는 상대 위치를 의미합니다.

<svg height="210" width="400">

  <path d="M150 0 L75 200 L225 200 Z" />

</svg>

 

- M150 0 : 절대위치 x150 y0 위치에서 패스를 시작 (Move To)

- L75 200 : 절대위치 x75 y200 위치까지 선을 도식 (Line To)

- L225 200 : 절대위치 x225 y200 위치까지 선을 도식 (Line To)

- Z : 패스 시작 위치까지 연결하여 패스 닫음

 

 

[ 배지어 곡선 ] 은 무한히 확장 할 수 있습니다.

베지어는 부드러운 곡선을 모델링하는 데 사용됩니다.

일반적으로, 사용자는 두개의 끝 포인트와 하나 또는 두 개의 제어점을 선택합니다.

하나의 제어 지점을 가지는 베지어 곡선을 이차 베지어 곡선이라고 하며

두개의 제어 포인트를 가지는 베지어 곡선을 큐빅 베지어 곡선 (입방형 3차원 곡선)이라고 합니다.

A는 시작점을 C는 끝점을, B는 제어점입니다.

A와 C지점을 연결하는 직선이 있습니다.

이떄, B지점에서 그 직선을 잡아 당겨서 곡선을 만들게 됩니다.

<svg height="400" width="450">

  <path id="lineAB" d="M100 350 l150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M250 50 l150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M175 200 l150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M100 350 q150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="100" y="350" dx="-10">B</text>
    <text x="100" y="350" dx="-30">C</text>
  </g>
  
</svg> 

3차 베지어 곡선 (큐빅 베지어 곡선)은 아래와 같이 시작점과 끝점에 각각 제어점이 있습니다.

 

[ text ] 텍스트, 글자, 문자 text 요소는 글자(텍스트)를 정의하는데 사용합니다.

<svg height="30" width="200">

  <text x="0" y="15" fill="red">text</text>

</svg>

<svg height="60" width="200">

  <text x="0" y="15" fill="red" transform="rotate(30 20, 40)">text text text text</text>

</svg>

<text>요소는 <tspan>요소의 서브 그룹 중 임의의 개수로 배치 될 수 있습니다.

각 <tspan>요소는 다른 형식 및 위치를 포함 할 수 있습니다.

 

"<tspan>요소로 여러 줄의 텍스트를 표현하면"

<svg height="90" width="200">

  <text x="10" y="20" style="fill:red;"> text:
  
    <tspan x="10" y="45"> text1</tspan>
    <tspan x="10" y="70">text2</tspan>
    
  </text>
  
</svg>

<a>요소로 텍스트에 링크를 걸 수 있습니다.

<svg height="30" width="200" xmins:xlink="http://www.w3.org/1999/xlink">

  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red"> text text </text>
  </a>
  
</svg>

 

[ stroke ] 스크로크, 윤곽선, 외관선

모든 스트로크 특성은 원형 형상 요소의 선, 텍스트 등 윤곽선의 모든 종류에 적용될 수 있다.

svg는 스트로크 속성의 넓은 범위를 제공합니다.

 

- stroke

- stroke-width

- stroke-linecap

- stroke-dasharray

stroke 속성은 요소의 선, 텍스트, 윤곽의 색을 정의합니다.

<svg>

	<g fill="none">
    
    	<path stroke="red" d="M5 20 l215 0" />
    	<path stroke="black" d="M5 40 l215 0" />
    	<path stroke="blue" d="M5 60 l215 0" />
        
    </g>
    
</svg>

stroke-width 속성은 요소의 선, 텍스트 또는 윤곽의 두께를 정의합니다.

<svg height="80" width="300">

	<g fill="none" stroke="black">
    
    	<path stroke-width="2" d="M5 20 l215 0" />
    	<path stroke-width="4" d="M5 40 l215 0" />
    	<path stroke-width="6" d="M5 60 l215 0" />
        
    </g>
    
</svg>

 

 

 

 

- source

웹디자인/웹퍼블리셔 고급노하우

http://pjh445.blog.me