728x90
📌 svg-tutorial 으로 학습한 내용을 정리했습니다.
SVG Tutorial - Learn how to code images in HTML with SVG
Learn the fundamentals of Scalable Vector Graphics (SVG) from the basics up to advanced concepts like animation and interactivity.
svg-tutorial.com
SVG로 눈송이 그리기
- 동일한 코드를 반복하는 대신 모양에 대한 정의를 만들어 재사용할 수 있다.
- 우선 눈송이의 가지를 정의한 다음, 이를 다른 회전으로 6번 사용한다.
- path와 move to(M), line to(L) 명령을 사용해 간단히 선(주 분기)을 그릴 수 있다.

<svg width="200" height="200" viewBox="-100 -100 200 200">
<path d="M 0 0 L 0 -90" stroke="#E5C39C" stroke-width="5" />
</svg>
- 그 다음 계속해서 측면 분기를 추가할 수 있다. 완성된 분기는 다음과 같다.

<svg width="200" height="200" viewBox="-100 -100 200 200">
<path
id="branch"
d="
M 0 0 L 0 -90
M 0 -20 L 20 -34
M 0 -20 L -20 -34
M 0 -40 L 20 -54
M 0 -40 L -20 -54
M 0 -60 L 20 -74
M 0 -60 L -20 -74"
stroke="#E5C39C"
stroke-width="5"
/>
</svg>
이미지 요소 재사용
- 전체 분기 경로를
defs섹션으로 이동한다. 섹션은defs이미지의 숨겨진 구획이다. 이 내용은 화면에 표시되지 않지만, 나중에 참조하고 사용할 수 있다. - 브랜치를 정의한 후에는
use명령을 사용하여 이를 다음과 같이 재사용할 수 있다. transform명령을 사용해 개별 분기를 올바른 위치로 이동한다.
See the Pen SVG Day07. use by hi (@lbdasdbt-the-selector) on CodePen.
728x90
'개발공부 > SVG' 카테고리의 다른 글
| 9. SVG transform (0) | 2024.02.19 |
|---|---|
| 8. SVG로 숲 그리기 (0) | 2024.02.19 |
| 6. SVG 기본 경로 그리기 (0) | 2024.01.25 |
| 5. SVG clip-path 사용 (0) | 2024.01.19 |