การสร้างภาพ SVG

การใช้งานเบื้องต้น

ส่วนประกอบต่างๆ ใน SVG จะถูกกำหนดด้วยแท็ก XML ที่แตกต่างกันไป โดยส่วนที่สำคัญและใช้งานกันเป็นประจำมีดังนี้:

• <svg> (The Canvas 🎨): แท็กราก (root element) ที่เป็นจุดเริ่มต้นและจุดสิ้นสุดของไฟล์ SVG ทำหน้าที่กำหนดขอบเขตและคุณสมบัติต่างๆ ของพื้นที่วาดภาพ เช่น width (ความกว้าง), height (ความสูง), และ viewBox (กรอบการมองเห็น)
  • ตัวอย่าง: <svg width="100" height="100"> คือการสร้างพื้นที่วาดภาพขนาด 100×100 พิกเซล
• <g> (The Group 📂): ย่อมาจาก “group” ใช้สำหรับจัดกลุ่มองค์ประกอบหลายๆ ชิ้นเข้าไว้ด้วยกัน ทำให้สามารถกำหนดคุณสมบัติ (เช่น สี, ขนาดเส้น) หรือใช้คำสั่งแปลงรูป (เช่น ย่อขยาย, หมุน) กับทุกองค์ประกอบในกลุ่มได้พร้อมกันในครั้งเดียว
  • ตัวอย่าง: <g fill="red"> ... </g> จะทำให้ทุกอย่างที่อยู่ในกลุ่มนี้มีสีแดง
• รูปทรงพื้นฐาน (Basic Shapes): เป็นแท็กสำหรับสร้างรูปทรงเรขาคณิตที่ไม่ซับซ้อน ซึ่งใช้งานง่ายและสะดวกมาก
  • <rect>: สร้างรูป สี่เหลี่ยม โดยกำหนดตำแหน่ง (x, y), ความกว้าง (width), และความสูง (height)
  • <circle>: สร้างรูป วงกลม โดยกำหนดจุดศูนย์กลาง (cx, cy) และรัศมี (r)
  • <ellipse>: สร้างรูป วงรี คล้ายวงกลม แต่กำหนดรัศมีแนวนอน (rx) และแนวตั้ง (ry) แยกกัน
  • <line>: สร้าง เส้นตรง โดยกำหนดจุดเริ่มต้น (x1, y1) และจุดสิ้นสุด (x2, y2)
  • <polyline>: สร้าง เส้นหักมุม ที่มีหลายส่วนต่อกัน โดยกำหนดชุดของจุดพิกัด (points)
  • <polygon>: สร้าง รูปหลายเหลี่ยมปิด โดยกำหนดชุดของจุดพิกัด (points) คล้าย <polyline> แต่เส้นจะถูกปิดโดยอัตโนมัติ
• <path> (The Pen Tool ✒️): เป็นองค์ประกอบที่ทรงพลังและใช้งานบ่อยที่สุด สามารถสร้างรูปทรงได้ทุกรูปแบบ ตั้งแต่เส้นตรงธรรมดาไปจนถึงเส้นโค้งที่ซับซ้อน โดยใช้ชุดคำสั่งที่เรียกว่า “d” attribute (data) เพื่อกำหนดเส้นทางของการวาด เปรียบเสมือนการใช้เครื่องมือ Pen Tool ในโปรแกรมออกแบบกราฟิก
  • ตัวอย่าง:<path d="M10 10 H 90 V 90 H 10 Z" /> คือคำสั่งให้วาดเส้นสี่เหลี่ยม โดย:
    • M10 10: Move to (ย้ายไปที่จุด) x=10, y=10
    • H 90: Draw a Horizontal line to (ลากเส้นแนวนอนไปที่) x=90
    • V 90: Draw a Vertical line to (ลากเส้นแนวตั้งไปที่) y=90
    • H 10: Draw a Horizontal line to (ลากเส้นแนวนอนไปที่) x=10
    • Z: Close path (ปิดเส้นทาง กลับไปที่จุดเริ่มต้น)
• <text> (The Type Tool ✍️): ใช้สำหรับใส่ข้อความลงในภาพ โดยกำหนดตำแหน่ง (x, y) และใส่ข้อความที่ต้องการระหว่างแท็กเปิดและปิด
  • ตัวอย่าง: <text x="50" y="50">Hello SVG</text>
• คุณลักษณะ (Attributes): เป็นส่วนที่ใช้อธิบายรายละเอียดและตกแต่งองค์ประกอบต่างๆ เช่น fill (สีเติม), stroke (สีเส้น), stroke-width (ความหนาเส้น), และ transform (การแปลงรูปทรง เช่น rotate, scale)

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <circle cx="100" cy="100" r="90" fill="skyblue" />
    <polygon points="100,10 40,198 190,78 10,78 160,198"
             fill="yellow" stroke="orange" stroke-width="5" />
  </g>
</svg>

การสร้างและใช้ symbol

การสร้างและใช้งาน Symbol ใน SVG ประกอบด้วย 3 ส่วนสำคัญคือ:

1. <defs> (Definitions)

เปรียบเสมือน “โฟลเดอร์เก็บของ” 📦. ทุกอย่างที่ถูกประกาศไว้ภายในแท็ก <defs> จะไม่ถูกแสดงผลหรือวาดลงบนหน้าจอโดยตรง มันเป็นเพียงพื้นที่สำหรับ “นิยาม” หรือ “กำหนด” องค์ประกอบต่างๆ ที่เราต้องการจะนำไปใช้ในภายหลัง

2. <symbol>

เปรียบเสมือน “แม่พิมพ์” หรือ “ต้นแบบ” ⚙️ ที่เราสร้างเก็บไว้ในโฟลเดอร์ <defs> เราสามารถออกแบบรูปทรงอะไรก็ได้ที่ซับซ้อนไว้ภายใน <symbol> นี้ เช่น ไอคอน, โลโก้, หรือรูปทรงใดๆ ที่จะถูกใช้ซ้ำๆ

• จุดเด่นของ <symbol>:
  • มันมี viewBox เป็นของตัวเอง ทำให้สามารถกำหนดกรอบและสัดส่วนของ Symbol ได้อย่างอิสระ ไม่ขึ้นกับขนาดของ <svg> หลัก
  • เราสามารถกำหนด id ที่ไม่ซ้ำกันให้กับแต่ละ <symbol> เพื่อใช้เป็นชื่อสำหรับอ้างอิง

3. <use>

เปรียบเสมือนการ “ปั๊มสำเนา” หรือ “เรียกใช้แม่พิมพ์” 📝. เมื่อเราต้องการให้ Symbol ที่สร้างไว้ปรากฏบนหน้าจอ เราจะใช้แท็ก <use> เพื่ออ้างอิงถึง id ของ Symbol นั้นๆ

• จุดเด่นของ <use>:
  • เราสามารถกำหนดตำแหน่งที่จะวางสำเนา (x, y), ขนาด (width, height), และสไตล์ (fill, stroke) ของแต่ละสำเนาได้อย่างอิสระ โดยไม่กระทบกับต้นแบบ
  • การเรียกใช้ซ้ำๆ จะเป็นการอ้างอิงถึงต้นแบบเดิม ไม่ใช่การคัดลอกโค้ดทั้งหมดมาใหม่ ทำให้ขนาดไฟล์ SVG เล็กลงอย่างมาก

<svg width="300" height="120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="my-star" viewBox="0 0 51 48">
      <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
    </symbol>
  </defs>
  <use href="#my-star" x="10" y="10" width="50" height="50" fill="gold" />
  <use href="#my-star" x="80" y="20" width="60" height="60" fill="silver" />
  <use href="#my-star" x="160" y="0" width="80" height="80" fill="#B87333" />
</svg>