SVG(Scalable Vector Graphics)μ <path>
μμλ λ€μν λͺ¨μκ³Ό κ²½λ‘λ₯Ό μμ±νλ λ° μ¬μ©λ©λλ€. <path>
μμλ λͺ κ°μ§ μμ±κ³Ό λͺ
λ Ήμ΄λ‘ ꡬμ±λμ΄ μμ΅λλ€. μ¬κΈ° λͺ κ°μ§ μμλ₯Ό ν΅ν΄ <path>
μ μ¬μ©λ²μ μ€λͺ
νκ² μ΅λλ€.
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)μΌλ‘ μ§μ μ 그립λλ€.
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μΈ μμ 그립λλ€.
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>
μ΄ μ½λλ μμμ μμ μνμ μ κ·Έλ¦¬κ³ , κ·Έ λ€μ μμ§μ , λ€μ μνμ μ κ·Έλ €μ μ¬κ°νμ λ§λλλ€.
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)μΈ κ³‘μ μ λλ€.
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) λ± λ€μν λͺ
λ Ήμ΄λ‘ ꡬμ±λ©λλ€. κ²½λ‘ λ°μ΄ν°λ₯Ό μ¬μ©νμ¬ μνλ λͺ¨μμ 그릴 μ μμ΅λλ€.