[SVG] codeschool: You, Me & SVG

LEVEL 1

Oh, the Shapes You Can Make 

1.1 SVG Fun

SVG: Scalable Vector Graphics

raster(png, jpeg, gif) <-> vector(svg)

img 태그에 .svg 파일 src에 링크시키면 되는데

svg파일은 아래와 같다.

HTML과 SVG는 XML 타입이다.

ex) our_first.svg   --> <img src="our_first.svg">와 같이 사용.

<svg width="100" height="100" //여기 가로세로는 viewport

 xmlns="http://www.w3.org/2000/svg"   //xmlns=xml name space

 version="1.1">

<rect height="80" width="100"/>

<rect height="50" width="80" fill="white" x="10" y="10"/>

<rect height="10" width="40" x="30" y="90"/>

</svg>

LEVEL 2

Would You, Could You With a Badge? 

2.1 Circles by the Ton

rectangle stroke이 10px 이고 x, y가 0,0 으로 시작하면 5px지점에 viewport가 위치하게 된다.

The outline stroke is centered along the rectangle's border.

아래와 같이 해야 테두리 두께가 제대로 나온다.

<rect height="100" width="70" fill="white" stroke="red" stroke-width="10" x="5" y="5" rx="5"/>

<circle cx="40" cy="105" r="3" fill="white">

radius는 다음과 같이 한다.

<rect height="100" width="70" fill="white" stroke="red" stroke-width="10" x="5" y="5" rx="10" ry="25"/>

styling svg

img 태그 쓰지 말고 svg 그래도 넣으면 자유자재로 스타일링 가능하다.

circle {

    fill: none;

    stroke: #008B6F;

    stroke-width: 7px;

}

2.6 Shapes for You

선긋기

<line x1="47" y1="198" x2="221" y2="198" />

텍스트

<text x="134" y="142">SVG</text>

이대로 하면 텍스트의 bottom left에 오므로 가운데에 넣으려면 css에서

text {

    font-size: 60px;

    text-anchor: middle;

}

삼각형

<polygon points="52,190 134,30 216,190" />

사다리꼴

<polygon class="roof" points="256,148 262,203 80,203 87,148 327,148"/>

LEVEL 3

Group de Loop 

3.1 Groups Anyone?

그루핑

<g></g>

그룹 안에 중복되는 것들은 g에 클래스를 주고 css에서 스타일링 한다.

3.4 Transform to the Rescue

회전하기

<g transform="translate(45,67)" rotate(10 12.5 12.5)">

...

rotate 10: degrees / 12.5: x origin / 12.5: y origin

원래는 x,y가 0,0 으로 top left기준으로 degrees 가 돌아간다. 12.5,12.5는 센터값

크기 조정

<g transform="translate(45,67) scale(0.6)">

크기 줄이면 또 해당 위치의 0,0으로 올라가기 때문에 다시한면 위치 조정필요

--> <g transform="translate(45,67) scale(0.6) translate(8,8)">

3.8 Responsively

svg에 있던 width height를 제거하고viewBox 추가

<svg xmlns="http://www.w3.org/2000/svg"   //xmlns=xml name space

 version="1.1"

        viewBox="0 0 268 268"  // 0 0 은 viewBox origin x,y 268은 width와 height

>

그리고 response를 위해 css 에 추가

svg {

height: auto;

width: 50%;

}

LEVEL 4

SVG Encore! 

4.1 Paths Are Fun

C는 커브(Cubic Bezier) 큐빅 베지에

4.3 Symbols to Use

symbol은 나중에 사용할 떄를 위해 SVG를 저장 

보통 html 초반에 정의해놓고 display-none 한 후 아래에서 사용함

외부에 있는 것을 사용하려면

<use xlinki:href="file.svg#phone"/>

IE10 아래에서는 안 됨

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