SVG 기본

2021-12-03

SVG

svg의 기본 구성 태그는 아래와 같으며 xmlns는 생략 가능하다.
svg 안에 style을 인라인으로 넣어둘 수도 있다.
기본 CSS와 같이 클래스를 사용하여 작업하는 것이 바람직하다.

1 2	<svg xmlns="http:/www.w3.org/2000/svg"> </svg>

기본 도형

사각형

rect 태그를 사용한다.
x, y: x축 위치와 y축 위치를 나타낸다. 단위를 생략하면 px 단위가 된다.
fill의 기본색은 검은색이다.
stroke: 테두리(기본 1px)
stroke-width: 테두리 너비. 단위 생략하면 px 단위가 된다.
rx, ry: 꼭지점이 둥근 사각형을 만들 수 있다.
첫번째 사각형와 두번째 사각형 모두 같은 사각형이다.

<svg xmlns="http:/www.w3.org/2000/svg">
    <!-- 1 -->
    <rect x="10" y="20" width="200" height="100"></rect>
    <!-- 2 -->
    <rect x="10" y="20" width="200" height="100" />
    <!-- 3 -->
    <rect x="10" y="20" width="200" height="100" rx="10" ry="10" />
</svg>

원형

circle
- 정원.
- 가운데 위치한다.
- r: 반지름
- cx, cy: 위치를 나타낸다.
ellipse
- 타원.
- 타원이기 때문에 rx의 길이와 ry의 길이가 다르다.

<svg xmlns="http:/www.w3.org/2000/svg">
    <!-- 정원 -->
    <circle cx="50" cy="250" r="30"></circle>

    <!-- 타원 -->
    <ellipse cx="350" cy="350" rx="100" ry="50"></ellipse>
</svg>

선

line
- x, y축 모두 선을 긋는 출발 지점과 끝나는 지점을 설명해주어야 한다.
polyline, polygon
- 직선을 계속 잇는다는 개념이다.
- polyline과 달리 polygon은 마무리를 해주어 온전하게 다각형을 만들어준다.

<svg xmlns="http:/www.w3.org/2000/svg">
    <!-- 선 -->
    <line x1="10" x2="100" y1="30" y2="300" stroke="blue"></line>

    <!-- polyline -->
    <polyline points="0 0, 200 100, 150 300"
    stroke="red" stroke-width="10"></polyline>

    <!-- polygon -->
    <polygon points="0 0, 200 100, 150 300"
    stroke="red" stroke-width="10"></polygon>
</svg>

Patch

M: 펜툴의 시작점
L: 어디로 그을지 선언한다.
H: 가로 직선
V: 수직 방향 직선
Z: path를 마무리한다.
C: 커브를 그리려고 할 때 C라고 기재한다. 여기서 세가지 점을 입력한다.
곡선을 그리고 싶을 경우 시작점, 조정하는 포인트 점, 끝점을 순서대로 입한다.

<svg xmlns="http:/www.w3.org/2000/svg">
    <path d="M 300 200 L 500 100 H 50 V 300 Z" stroke="red"
    stroke-width="5" fill="transparent"></path>
    <path d="M 100 150 C 100 150, 300 50, 500 250"></path>
</svg>

텍스트

기본 텍스트

text 태그를 사용한다.
font-size / font-weight / fill 등으로 조정한다.
HTML 기본 텍스트와 달리 색상을 color가 아닌 fill로 조절한다.

1
2
3

<svg xmlns="http:/www.w3.org/2000/svg">
    <text x="20" y="50">HELLO, WORLD!</text>
</svg>

곡선 텍스트

font-size / font-weight / fill 등으로 조정한다.
defs: 나중에 참조할 그래픽 요소들을 담아둘 공간. 도형이나 마스크, 그라데이션 등을 정의하여 defs 안에 넣어둘 수 있다.
path에 id값을 주고 textPath href에 아이디값을 넣어주면 글이 해당 path 모양으로 적용된다.
tspan: 강조하고 싶을 때 tspan을 사용한다.

    <svg xmlns="http:/www.w3.org/2000/svg">
    <!-- 참조공간 -->
    <defs>
        <path id="text-curve"
        d="M 50 400 C 50 400, 300 500, 400 400
        C 400 400, 600 170, 700 300" stroke="red"
        stroke-width="5" fill="transparent"></path>
    </defs>

    <!-- 텍스트 -->
    <text x="20" y="50">
    <textPath href="#text-curve">
        HELLO,
        <tspan style="fill: red;">WORLD</tspan>
    </textPath>
    </text>
</svg>

그룹

묶고 싶은 그룹들을 <g> </g>로 감싼다.
각자에게 스타일을 준다면 해당 스타일이 우선 적용된다.

<svg xmlns="http:/www.w3.org/2000/svg">
    <g>
        <rect x="10" y="20" width="200" height="100"></rect>
        <rect x="200" y="300" width="200" height="100"/> 
    </g>
</svg>

REFERENCE
인프런 SVG 마스터
https://www.inflearn.com/course/mastering-svg