220-901 dumps 100-105 study 300-115 pdf Exam dumps 200-310 exam CISSP Exam details questions 200-310 pdf

ออกแบบเว็บไซต์ ตอนที่ 2 Icon SVG คืออะไร

ออกแบบเว็บไซต์ ตอนที่ 2 Icon SVG คืออะไร ?

ออกแบบเว็บไซต์ ตอนที่ 2 Icon SVG คืออะไร

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

ออกแบบเว็บไซต์ ตอนที่ 2 Icon SVG คืออะไร

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

  • แน่นอนว่าให้ความคมชัด ไม่ว่าเว็บไซต์ของคุณจะไปแสดงในหน้าจอแบบใด ๆม่ว่าจะเล็ก กลาง ใหญ่ ไฟล์ภาพ SVG ก็จะเห็นความคมชัด ความสวยงามของเส้น ได้เท่ากันทุกมุม
  • มีขนาดไฟล์ที่เล็กกว่า อย่างที่เกริ่นไปแล้วว่า ไฟล์ SVG จะมีขนาดเล็กกว่าพวกไฟล์ภาพที่เป็นนามสกุล JPG PGN BMP ทำให้การทำงานไม่ซับซ้อน ถ้าลองเปรียบกับนำไฟล์นามสุกล JPG PGN BMP มาใช้งานกับเว็บที่ออกแบบด้วย responsive จะต้องเตรียมไฟล์นามสกุล JPG PGN BMP 2-3 ชุด เพราะเนื่องจากอุปกรณ์ที่แสดงบนเว็บไซต์ในปัจจุบันมีหลากหลายการที่จะให้ภาพมีความคมชัดทุกอุปกรณ์ ก็จะต้องเตรียมขนาดไฟล์ให้รองรับการแสดงผลของอุปกรณ์นั้นๆ
  • นำไปตกแต่งใน CSS ได้อย่างสวยงาม เมื่อลองทำหารเปิดภาพจาก text editor ไฟล์ SVG จะแสดงโค้ดด้วยภาษา XML ซึ่งสามารถนำไปใช้กับ CSS เพื่อตกแต่งให้เว็บไซต์ออกมาสวยงามได้อย่างลงตัว
  • สามารถนำไฟล์ SVG ไปใช้กับ JavaScript ได้ เราสามารถนำ  JavaScript มาสร้างการเชื่อมโยงระหว่าง SVG กับผู้ใช้งานบนเว็บไซต์ เพื่อให้เกิดการโต้ตอบหรือเป็นลูกเล่นให้กับทางเว็บไซต์ เช่น Mouse over event เป็นต้น

เมื่อมีข้อดีของการใช้งาน SVG ก็จะต้องมีข้อเสียตามมาด้วยเช่นกัน ซึ่งข้อเสียของการนำไฟล์ SVG ไปใช้งานได้แก่

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

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