SVG 미묘하게 쓰는 방법에 당황한 곳 메모

평소에는 이라레 등으로 내보내 버리는 곳을, 조금 내용을 보고 편집해 보았을 때에 곤혹했기 때문에 메모.

line, rect, polygon, circle, ellipse는 어쩐지 알았지만,
당황한 것은 path. . .
아래의 기사를 참고로 이해했습니다.

당황한 곳

소스를 확실히 본 느낌(조사하기 전)에서는, path 태그에 되었습니다.
궁금한 것은, M라든지 L라든지 들어가 있는 것. . .

패스 그리기 명령 작성

M이라든지 L이라든가 명령이라는 것.
참고 사이트에서는 이렇게 썼습니다.

M (x y)+ : x, y 로 이동 (Move to)

L (x y)+ : x, y 에 선을 그린다 (Lineto)

H (x)+ : 수평 방향으로 선을 그린다 (Horizontal lineto)

V (y)+ : 수직으로 선을 그린다 (Vertical lineto)

S (x1 y1 x y) + : 제어점 (x1, y1), 종점 (x, y)으로 설정된 2 차 베지어 곡선 (Shorhand/smooth curveto)

C (x1 y1 x2 y2 x y) + : 제어점 1 (x1, y1), 제어점 2 (x2, y2), 종점 (x, y)으로 설정된 3 차 베지어 곡선 (Curveto)

Z : 경로 닫기 (Closepath)

여기에서 될 정도 ~ 이해.
좌표를 단지 입력하는 것과 달리, 그리기를 명령한다는 것이 차이였고, 내 큰 착각이었다는 것을 이해했습니다.

참고로 쓰기

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z" stroke="red" fill="transparent" stroke-width="4" />
</svg>

우선 이런 느낌


그리고 좌표를 입력하는 것과 다른 점

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M 5 20 L 20 5 L 35 20 L 20 35 Z M 20 45 L 45 20 L 70 45 L 45 70 Z" stroke="red" fill="transparent" stroke-width="2" />
</svg>

첫 번째 소스 다음에 M을 사용하여 위치를 지정하면 path 태그 하나로 두 개의 객체를 그릴 수 있습니다.

요약

언제나 이라레 등의 소프트로 작성하고 있었으므로, 은근하게 하고 있었습니다만, 공부가 되었습니다. 뭔가 곤란하면 소스를 보는 것이 좋네요.