รูปเวกเตอร์

ภาพกราฟิกเวกเตอร์เป็นวิธีการสื่อสารชุดของรูปร่าง พิกัด และเส้นทางไปยังบริบทการแสดงภาพ ซึ่งก็คือชุดวิธีการวาดรูปภาพ เมื่อรูปภาพมีการปรับขนาดขึ้นหรือลง ชุดของจุดและเส้นที่รูปภาพแสดงจะถูกวาดใหม่เพื่อปรับขนาด ระบบจะวาดเส้นโค้งที่เรียบเนียนระหว่าง 2 จุดขึ้นใหม่อย่างราบรื่นในทุกขนาด คล้ายกับการวาดเส้นขอบที่กำหนดโดย CSS ในองค์ประกอบ HTML ใหม่เมื่อมีการปรับขนาดองค์ประกอบในวิวพอร์ต

Scalable Vector Graphics (SVG) เป็นภาษามาร์กอัปแบบ XML ที่พัฒนาโดย W3C ซึ่งเป็นรูปแบบรูปภาพเวกเตอร์ ที่ออกแบบมาสำหรับเว็บสมัยใหม่

ซอฟต์แวร์การออกแบบที่ใช้สำหรับการแก้ไขอาร์ตเวิร์กเวกเตอร์โดยเฉพาะจะช่วยให้คุณส่งออกรูปภาพเป็น SVG ได้ แต่หากเป็นภาษามาร์กอัปมาตรฐานที่มนุษย์อ่านได้ จึงสามารถสร้างและแก้ไข SVG ด้วยซอฟต์แวร์แก้ไขข้อความใดก็ได้ ไม่ว่าจะใช้ซอฟต์แวร์ใดในการสร้าง แต่การดำเนินการดังกล่าวจะไม่สมจริงสำหรับรูปภาพที่มีความซับซ้อนอย่างแท้จริง SVG สามารถจัดรูปแบบด้วย CSS หรือมี JavaScript ที่สร้างพฤติกรรมและการโต้ตอบในตัวรูปภาพเอง

นอกจากจะดึงดูดความสนใจจากนักออกแบบและนักพัฒนาซอฟต์แวร์ได้อย่างชัดเจนแล้ว SVG ยังเป็นรูปแบบที่มีประสิทธิภาพสูงในแง่ของประสบการณ์ของผู้ใช้ปลายทางด้วย ในกรณีของรูปทรงง่ายๆ ข้อมูลรายละเอียดที่อยู่ในต้นฉบับ SVG จะกะทัดรัดมากเมื่อเทียบกับข้อมูลแบบตารางพิกเซลที่ตายตัวของรูปแบบภาพแรสเตอร์ เพื่อให้เห็นความแตกต่างระหว่างการบอกเบราว์เซอร์ว่า "วาดเส้นสีแดงขนาด 1x1 และ 1x5" และ "1x1 คือพิกเซลสีแดง 1x2 คือพิกเซลสีแดง 1x3 คือพิกเซลสีแดง 1x4 คือพิกเซลสีแดง 1x5 คือพิกเซลสีแดง" อีกด้านหนึ่งก็คือลักษณะที่สื่อความหมายของ SVG ต้องอาศัยการตีความจากเบราว์เซอร์มากกว่า "การพิจารณา" ที่มากกว่า ด้วยเหตุนี้ SVG ที่ซับซ้อนจึงอาจคิดค่าบริการมากขึ้นในการแสดงผล และในเส้นเลือดเดียวกัน รูปภาพที่ซับซ้อนมากอาจหมายถึงชุดคำสั่งแบบละเอียดและขนาดใหญ่

คุณอาจต้องลองผิดลองถูกเล็กน้อยก่อนจึงจะรู้ได้ทันทีว่าแหล่งที่มาของรูปภาพแสดงตัวเลือกแหล่งที่มาของรูปภาพได้ดีกว่ารูปแบบแรสเตอร์ปกติที่แสดงได้ดีกว่า โดยมีหลักเกณฑ์อยู่ 2-3 ข้อ ดังนี้ องค์ประกอบของอินเทอร์เฟซ เช่น ไอคอน มักจะแสดงได้ดีโดย SVG อาร์ตเวิร์กที่มีเส้นที่คมชัด สีทึบ และรูปร่างที่มีการกำหนดอย่างชัดเจนมีแนวโน้มที่จะเป็นตัวเลือกที่ดีสำหรับ SVG

SVG เป็นหัวข้อใหญ่ นั่นคือภาษามาร์กอัปทั้งหมดที่สร้างขึ้นเพื่อใช้งานร่วมกับ HTML พร้อมด้วยตัวเลือกการจัดรูปแบบและความสามารถในการทำงานที่เป็นเอกลักษณ์ สำหรับข้อมูลเบื้องต้นโดยละเอียดเพิ่มเติมเกี่ยวกับ SVG โปรดดูบทแนะนำเกี่ยวกับ SVG ของ MDN