รูปร่าง SVG พื้นฐาน: rect circle path

SVG ใช้ระบบพิกัดที่ (0,0) อยู่ที่มุมซ้ายบน ค่า X เพิ่มขึ้นไปทางขวา ส่วนค่า Y เพิ่มขึ้นลงด้านล่าง วิวพอร์ตจะกำหนดด้วยแอตทริบิวต์ width และ height ส่วนพื้นที่พิกัดจะกำหนดด้วยแอตทริบิวต์ viewBox

วาดสี่เหลี่ยมผืนผ้าด้วย <rect x="10" y="10" width="200" height="100" rx="8" ry="8"> ค่า rx และ ry ใช้ทำให้มุมโค้งมน การเติมสีและเส้นขอบควบคุมด้วยแอตทริบิวต์ fill และ stroke หรือ CSS หากไม่ระบุ x และ y ระบบจะใช้ค่าเริ่มต้นเป็น 0,0

วาดวงกลมด้วย <circle cx="100" cy="100" r="50"> ค่า cx และ cy คือพิกัดจุดศูนย์กลาง ส่วน r คือรัศมี วงกลมใน SVG ไม่มีพารามิเตอร์มุมส่วนโค้งที่เทียบเท่ากับของพื้นที่วาดภาพ วงกลมจึงเป็นวงกลมเต็มเสมอ

วาดวงรีด้วย <ellipse cx="100" cy="100" rx="80" ry="40"> ค่า rx คือรัศมีตามแนวนอน ส่วน ry คือรัศมีตามแนวตั้ง วงรีที่มีค่า rx และ ry เท่ากันจะเทียบเท่ากับวงกลม

<line x1="0" y1="0" x2="100" y2="100"> ใช้วาดส่วนของเส้นเพียงหนึ่งส่วน <polyline points="0,0 100,50 200,0"> ใช้วาดส่วนของเส้นที่เชื่อมต่อกันผ่านชุดคู่พิกัด ทั้งสองแบบจะไม่ปิดรูปร่างโดยอัตโนมัติ

<polygon points="100,10 190,190 10,190"> คล้ายกับเส้นหลายช่วง แต่รูปร่างจะปิดโดยอัตโนมัติ โดยจะลากเส้นจากจุดสุดท้ายกลับไปยังจุดแรก ใช้รูปหลายเหลี่ยมสำหรับรูปร่างปิด เช่น สามเหลี่ยม ดาว และรูปหลายเหลี่ยมด้านเท่าอื่น ๆ

เส้นทางเป็นรูปร่าง SVG ที่ทรงพลังที่สุด โดยสามารถแทนการผสมผสานของเส้น ส่วนโค้ง และเส้นโค้งได้ทุกรูปแบบ แอตทริบิวต์ d จะมีคำสั่งเส้นทาง ได้แก่ M (moveTo), L (lineTo), A (ส่วนโค้ง), C (เส้นโค้งเบซิเยร์ลูกบาศก์), Q (เส้นโค้งเบซิเยร์กำลังสอง) และ Z (closePath)

คำสั่งตัวพิมพ์ใหญ่ใช้พิกัดสัมบูรณ์ ส่วนคำสั่งตัวพิมพ์เล็กใช้พิกัดสัมพัทธ์ M 100 50 จะย้ายไปยัง (100,50) L 200 150 จะวาดเส้นไปยัง (200,150) Z จะปิดเส้นทาง ส่วน A rx ry rotation large-arc sweep x y จะวาดส่วนโค้ง

รูปร่าง SVG รองรับ CSS ได้แก่ fill, stroke, stroke-width, opacity และ stroke-dasharray ใช้คลาส CSS กับองค์ประกอบ SVG เพื่อให้การจัดรูปแบบดูแลรักษาได้ง่าย การเปลี่ยนผ่าน CSS ทำงานกับ fill, stroke และ opacity ได้ ทำให้การเปลี่ยนสถานะดูราบรื่น

องค์ประกอบ <g> ใช้จัดกลุ่มองค์ประกอบ SVG เข้าด้วยกัน คุณสามารถใช้ transform, fill หรือ stroke กับกลุ่ม เพื่อให้มีผลกับองค์ประกอบลูกทั้งหมด การจัดกลุ่มช่วยให้ประกอบรูปร่างซับซ้อนที่เคลื่อนที่หรือแปลงรูปร่างไปพร้อมกันได้ เช่น หน้าปัดนาฬิกาพร้อมส่วนประกอบทั้งหมด

กำหนดรูปร่างที่นำกลับมาใช้ซ้ำได้ใน <defs> เช่น สัญลักษณ์ การไล่ระดับสี และเส้นทางตัด จากนั้นอ้างอิงด้วย <use href="#id"> วิธีนี้ช่วยหลีกเลี่ยงการทำซ้ำข้อมูลเส้นทางที่ซับซ้อน และช่วยให้ใช้การแปลงรูปร่างกับการจัดรูปแบบในระดับอินสแตนซ์ผ่านองค์ประกอบ use ได้

เส้นหลายช่วงกับรูปหลายเหลี่ยมใน SVG แตกต่างกันอย่างไร

SVG มีองค์ประกอบรูปร่างแบบประกาศ ได้แก่ สี่เหลี่ยมผืนผ้า วงกลม วงรี เส้น เส้นหลายช่วง และรูปหลายเหลี่ยม รวมถึงองค์ประกอบเส้นทางที่ยืดหยุ่นสำหรับสร้างรูปร่างซับซ้อนด้วยคำสั่ง M, L, A, C, Q และ Z การจัดรูปแบบด้วย CSS การจัดกลุ่มด้วย g และการนำกลับมาใช้ผ่าน defs/use ช่วยให้สร้างกราฟิกเวกเตอร์ที่ดูแลรักษาได้ง่ายและปรับขนาดได้ โดยฝังไว้ใน HTML โดยตรง