SVG(Scalable Vector Graphics)의 <path> μš”μ†ŒλŠ” λ‹€μ–‘ν•œ λͺ¨μ–‘κ³Ό 경둜λ₯Ό μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. <path> μš”μ†ŒλŠ” λͺ‡ κ°€μ§€ 속성과 λͺ…λ Ήμ–΄λ‘œ κ΅¬μ„±λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. μ—¬κΈ° λͺ‡ κ°€μ§€ μ˜ˆμ‹œλ₯Ό 톡해 <path>의 μ‚¬μš©λ²•μ„ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.

  1. 직선(Line) 그리기:
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 L90 10" stroke="black" stroke-width="2" fill="none" /> </svg>

이 μ½”λ“œλŠ” μ‹œμž‘μ (10, 10)μ—μ„œ 끝점(90, 10)으둜 직선을 κ·Έλ¦½λ‹ˆλ‹€.

  1. 원(Circle) 그리기:
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M50 50 A40 40 0 1 0 90 50" stroke="black" stroke-width="2" fill="none" /> </svg>

이 μ½”λ“œλŠ” 쀑심이 (50, 50)이고 λ°˜μ§€λ¦„μ΄ 40인 원을 κ·Έλ¦½λ‹ˆλ‹€.

  1. μ‚¬κ°ν˜•(Rectangle) 그리기:
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H90 V90 H10 Z" stroke="black" stroke-width="2" fill="none" /> </svg>

이 μ½”λ“œλŠ” μ‹œμž‘μ μ—μ„œ μˆ˜ν‰μ„ μ„ 그리고, κ·Έ λ‹€μŒ μˆ˜μ§μ„ , λ‹€μ‹œ μˆ˜ν‰μ„ μ„ κ·Έλ €μ„œ μ‚¬κ°ν˜•μ„ λ§Œλ“­λ‹ˆλ‹€.

  1. 곑선(Curve) 그리기:
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q40 10 90 80" stroke="black" stroke-width="2" fill="none" /> </svg>

이 μ½”λ“œλŠ” μ‹œμž‘μ μ—μ„œ 곑선을 κ·Έλ¦¬λŠ”λ°, 컨트둀 ν¬μΈνŠΈκ°€ (40, 10)이고 끝점이 (90, 80)인 κ³‘μ„ μž…λ‹ˆλ‹€.

  1. 닀쀑 경둜(Multiple Paths) μ‚¬μš©:
xml
<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="M10 80 Q40 10 90 80" stroke="black" stroke-width="2" fill="none" /> <path d="M110 80 Q140 10 190 80" stroke="red" stroke-width="2" fill="none" /> </svg>

이 μ½”λ“œλŠ” 두 개의 경둜λ₯Ό κ°€μ§„ SVGλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

μ΄λŸ¬ν•œ κ°„λ‹¨ν•œ μ˜ˆμ‹œλ“€μ€ <path> μš”μ†Œμ˜ d 속성에 λ“€μ–΄κ°€λŠ” 경둜 λ°μ΄ν„°μ˜ ν˜•νƒœλ₯Ό λ³΄μ—¬μ€λ‹ˆλ‹€. 경둜 λ°μ΄ν„°λŠ” 이동(M), μ„ (Line), 곑선(Q, C), 호(A), λ‹«νžŒ 경둜(Z) λ“± λ‹€μ–‘ν•œ λͺ…λ Ήμ–΄λ‘œ κ΅¬μ„±λ©λ‹ˆλ‹€. 경둜 데이터λ₯Ό μ‚¬μš©ν•˜μ—¬ μ›ν•˜λŠ” λͺ¨μ–‘을 그릴 수 μžˆμŠ΅λ‹ˆλ‹€.