โรงเรียนนวมินทราชินูทิศ สตรีวิทยา พุทธมณฑล

arun Article

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

ก่อนอื่นเรามาทำความรู้จักกับเจ้า SVG กันก่อนนะคะ SVG นี้มันย่อมาจากคำว่า Scalable Vector Graphics ซึ่งก็คือ กราฟฟิกรูปแบบหนึ่งที่ใช้แสดงผลบนหน้าเว็บไซต์ค่ะ โดยมีลักษณะเด่นตรงที่เป็นกราฟิกแบบ Vector ไม่ว่าจะเป็นเส้นตรง เส้นโค้ง หรือรูปทรงต่างๆ ล้วนถูกสร้างขึ้นมาจากการคำนวณทางคณิตศาสตร์ โดยเป็นมาตรฐานรูปภาพแบบเวกเตอร์ที่เริ่มใช้กันมานานแล้วล่ะคะ ซึ่งมันจะต่างจากกราฟิกแบบ Raster (Bitmap) อย่าง JPG หรือ PNG ที่จะสร้างภาพขึ้นมาโดยอิงกับ pixels ที่เรามักจะเห็นว่ากราฟิกแบบ Raster นี้ พอขยายใหญ่มากๆ แล้วภาพจะแตก แต่สำหรับ SVG นี้เราจะขยายยังไงภาพมันก็ไม่แตกเลยล่ะคะ

หลายคนอาจจะสงสัยว่าเพราะอะไรกราฟฟิกแบบ SVG จึงขยายยังไงก็ไม่แตก งั้นเรามาทำความรู้จักกับภาพกราฟิกกันก่อนนะคะ ภาพในโลกของ computor จะมี 2 ประเภทใหญ่ๆ ค่ะ คือ

1.ภาพแบบราสเตอร์ (Bitmap) ก็คือภาพที่ประกอบด้วยจุดนับล้านๆจุด ถ้าขยายภาพดูมากๆก็จะเห็นจุดอย่างชัดเจน เป็นภาพถ่ายที่เราใช้กล้องถ่าย นั่นเองแหละคะ

2.ภาพแบบแว็คเตอร์ (Vector) เป็นภาพที่สร้างด้วยคำสั่งคอมพิวเตอร์ ไม่ได้ประกอบด้วยจุด ซึ่งจะขยายเท่าไรก็ไม่พบจุด เพราะเป็นการคำนวณภาพ ด้วยคำสั่งทางคอมพิวเตอร์นั่นเองคะ

แล้วเจ้า SVG นี้มันมีผลดีอย่างไรต่อการออกแบบเว็บไซต์ ทำไมกูเกิลจึงสนับสนุนการใช้ SVG ก็เพราะว่า SVG นี้มันข้อดีอยู่หลายประการเลยล่ะคะ ได้แก่

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

ขนาดไฟล์ได้เล็กกว่า ขนาดของไฟล์ SVG นั้นเล็กกว่าไฟล์ JPG และ PNG มาก จึงสามารถนำไปใช้กับ responsive web ได้เสมอในทุกขนาดหน้าจอ

ตกแต่งสไตล์ด้วย CSS ได้ เราสามารถใช้ CSS ในการตกแต่งสไตล์ให้กับเส้นหรือรูปทรงที่สร้างมาจากกราฟิกแบบ SVG ได้ ไม่ว่าจะเป็นการปรับสีสัน หรือแม้กระทั่งใส่ animation ให้กับเส้นหรือรูปทรงเหล่านั้นค่ะ เพราะแต่ละเส้นที่ SVG แสดงออกมาจนรวมกันเป็นรูปภาพได้นั้น ล้วนเกิดมาจากภาษา XML นั่นเองค่ะ

สร้างการโต้ตอบกับผู้ใช้งานด้วย JavaScript ได้ เราสามารถใช้ JavaScript ในการสร้างการโต้ตอบระหว่างกราฟิก SVG กับผู้ใช้งานได้ เช่น การใส่ click event หรือ onmouseover event ให้กับรูปทรงต่างๆ ได้ค่ะ

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

ที่มา : https://graphicbuffet.co.th/svg-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/

รูปภาพที่เกี่ยวข้อง

Size : 10.63 KBs
Upload : 2017-12-06 10:06:28

ติชม

กำลังแสดงหน้า 1/0

ต้องการให้คะแนนบทความนี้่ ?

คะแนนโหวด

สร้างโดย :

arun

สถานะ : ผู้ใช้ทั่วไป
ไม่ระบุ

โรงเรียนนวมินทราชินูทิศ สตรีวิทยา พุทธมณฑล 70 หมู่ 2 แขวงทวีวัฒนา เขตทวีวัฒนา กรุงเทพฯ 10170 โทรศัพท์ 0 2441 3593 E-Mail:satriwit3@gmail.com	Generated 0.035650 sec.