SVG path

• svg는 Scalable Vector Graphic의 약자로서 2차원의 벡터 그래픽을 서술하는 XML기반의 마크업 언어이다.
• 평상시 쓰이던 image의 확장자 JPEG, PNG등과 달리 vector로 관리하기 때문에 품질저하 없이 모든 크기에서 뚜렷한 상을 보여줄 수 있는 장점이 있다.
• svg file을 사용할 때는 svg라는 태그를 사용하여 영역(viewport)을 설정해 주어야 한다.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10,30
           A 20,20 0,0,1 50,30
           A 20,20 0,0,1 90,30
           Q 90,60 50,90
           Q 10,60 10,30 z"/>
</svg>

- M : move, 위치 이동으로 실제 선은 그려지지 않는다.
	위의 예시에서는 (10, 30)만큼의 이동하는 것
- H : horizontal, 해당 위치까지 가로로 선을 긋는다.
- V : vertical, 해당 위치까지 세로로 선을 긋는다.
- A : arc, rx, ry, x회전각, large-arc-flag, sweep-flag(호가 이동해야할 각이 양수인지 음수인지 결정), x, y (호가 끝나는 좌표)
- Z: close path

• 여기서 주어지는 숫자는 이동하는 거리가 아니라 svg라는 viewport에 대해 좌표가 %로 나타내진 것이라 생각하면 된다.

• svg는 stroke라는 속성으로 그려진 path의 선에 대해 스타일을 줄 수 있다.

• stroke : 선의 색상 지정

  • gradient도 줄 수 있으나 svg내의 < def >태그의 linearGradient라는 태그내에서 정의를 하고 path의 fill속성을 url을 통해 연결해 주어야 한다.

• stroke-width: 선 굵기 설정

• stroke-dasharray: 점선을 표시하는 속성으로 [선의 길이, 점선간 간격]으로 조정이 가능하다.

• stroke-dashoffset: 점선이 주어졌을 때, 어디서 부터 시작하는지를 정하는 속성으로 수치가 양수이면 왼쪽으로, 음수이면 오른쪽으로 이동된다.

• dasharray, dashoffset으로 원을 그리는 듯한 animation 효과를 줄 수 있다.

  • dasharray을 원주로 설정하고 offset을 늘리는 방식

-fill : stroke와 마찬가지로 path에 의해 그려진 영역내에 채울 색상을 지정하는 속성

• fill: none으로 지정하는 경우 path로 그려진 영역 안쪽은 path가 아닌, 뚫린게 되어 버려 javascript로 click 이벤트등을 준 경우 인식 못 할 수 있기에 주의할 것!

참고 자료

https://velog.io/@sbyeol3/SVG를-공부해보자-2-SVG-Path