Scalable Vector Graphics หรือ SVG มีบทบาทสำคัญในการออกแบบเว็บไซต์ในปัจจุบัน หากขณะนี้คุณไม่ได้ใช้ SVG ในงานออกแบบเว็บ ต่อไปนี้คือสาเหตุบางประการที่คุณควรเริ่มใช้งาน เช่นเดียวกับทางเลือกสำรองที่คุณสามารถใช้กับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนไฟล์เหล่านี้
ความละเอียด
ประโยชน์สูงสุดของ SVG คือความเป็นอิสระในการแก้ปัญหา เนื่องจากไฟล์ SVG เป็นกราฟิกแบบเวกเตอร์ (ต่างจากภาพแรสเตอร์แบบพิกเซล) คุณจึงสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพของภาพ สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อคุณสร้างเว็บไซต์ที่ตอบสนองซึ่งต้องดูดีและทำงานได้ดีในขนาดหน้าจอและอุปกรณ์ที่หลากหลายคุณสามารถปรับขนาดไฟล์ SVG ให้ใหญ่ขึ้นหรือลงได้เพื่อรองรับขนาดที่เปลี่ยนแปลงและความต้องการเลย์เอาต์ของเว็บไซต์ที่ตอบสนองได้โดยไม่ลดทอนคุณภาพของไฟล์แต่อย่างใด
โดยทั่วไป SVG จะมีรูปลักษณ์ที่นุ่มนวลและคมชัดกว่ารูปภาพในรูปแบบอื่นๆ โดยไม่คำนึงถึงขนาด
ขนาดไฟล์
หนึ่งความท้าทายในการใช้ภาพแรสเตอร์ (เช่น JPG, PNG, GIF) บนเว็บไซต์ที่ตอบสนองคือขนาดไฟล์ เนื่องจากภาพแรสเตอร์ไม่ได้ปรับขนาดเหมือนภาพเวกเตอร์ คุณจึงต้องส่งภาพแบบพิกเซลของคุณในขนาดที่ใหญ่ที่สุดที่จะแสดง เนื่องจากคุณสามารถสร้างภาพให้เล็กลงและคงคุณภาพของภาพไว้ได้เสมอ แต่การทำภาพให้ใหญ่ขึ้นนั้นไม่เป็นเช่นนั้น ผลลัพธ์ที่ได้คือภาพที่ใหญ่กว่าขนาดที่กำลังดูอยู่มาก ทำให้เบราว์เซอร์ต้องดาวน์โหลดไฟล์ขนาดใหญ่
ในทางกลับกัน กราฟิกแบบเวกเตอร์สามารถปรับขนาดได้ คุณจึงสามารถใช้ขนาดไฟล์ที่เล็กมากได้โดยไม่คำนึงถึงขนาดภาพที่อาจต้องแสดง ในที่สุดสิ่งนี้ก็ปรับประสิทธิภาพโดยรวมของเว็บไซต์และความเร็วในการดาวน์โหลดให้เหมาะสมที่สุด
สไตล์ CSS
คุณสามารถเพิ่ม SVG ลงใน HTML ของหน้าได้โดยตรง สิ่งนี้เรียกว่า SVG แบบอินไลน์ ข้อดีอย่างหนึ่งของการใช้ SVG แบบอินไลน์คือ เนื่องจากกราฟิกนั้นวาดโดยเบราว์เซอร์จริงๆ จึงไม่จำเป็นต้องมีคำขอ HTTP เพื่อดึงไฟล์รูปภาพ
ประโยชน์อื่น: คุณสามารถจัดรูปแบบ SVG แบบอินไลน์ด้วย CSS ต้องการเปลี่ยนสีของไอคอน SVG หรือไม่? แทนที่จะแก้ไขรูปภาพนั้นในซอฟต์แวร์แก้ไขกราฟิก แล้วส่งออกและอัปโหลดไฟล์อีกครั้ง คุณสามารถเปลี่ยนไฟล์ SVG ได้ง่ายๆ ด้วย CSS สองสามบรรทัด คุณสามารถใช้ CSS เพื่อเปลี่ยน SVG สำหรับสถานะโฮเวอร์และความต้องการด้านการออกแบบอื่นๆ ได้เช่นกัน
บรรทัดล่าง
เนื่องจากคุณสามารถจัดรูปแบบไฟล์ SVG แบบอินไลน์ด้วย CSS คุณจึงสามารถใช้ภาพเคลื่อนไหว CSS กับไฟล์เหล่านั้นได้เช่นกัน การแปลงและการเปลี่ยน CSS เป็นสองวิธีง่ายๆ ในการเพิ่มชีวิตให้กับ SVG คุณจะได้รับประสบการณ์ที่เหมือน Flash มากมายบนหน้าเว็บโดยไม่ต้องใช้ Flash ซึ่ง iPad ไม่รองรับอีกต่อไป อันที่จริง Adobe กำลังจะเลิกใช้ Flash ภายในสิ้นปี 2020
การใช้ SVG
มีประสิทธิภาพเท่ากับ SVG พวกมันไม่สามารถแทนที่รูปแบบภาพอื่นทุกรูปแบบได้ รูปภาพที่ต้องการความลึกของสีที่สมบูรณ์ยังคงควรอยู่ในรูปแบบ-j.webp
SVG ยังเหมาะสำหรับภาพประกอบที่ซับซ้อน เช่น กราฟ แผนภูมิ และโลโก้บริษัท กราฟิกทั้งหมดเหล่านี้ได้รับประโยชน์จากการปรับขนาดได้และสามารถกำหนดสไตล์ด้วย CSS
รองรับเบราว์เซอร์รุ่นเก่า
การรองรับ SVG ในปัจจุบันนั้นดีมากในเว็บเบราว์เซอร์สมัยใหม่ เบราว์เซอร์เดียวที่ไม่รองรับกราฟิกเหล่านี้คือ Internet Explorer เวอร์ชันเก่า (ซึ่ง Microsoft ไม่รองรับอีกต่อไป) และ Android เวอร์ชันเก่าบางรุ่น โดยรวมแล้ว มีเปอร์เซ็นต์ที่น้อยมากของประชากรการท่องเว็บที่ยังคงใช้เบราว์เซอร์เหล่านี้ และจำนวนนั้นยังคงลดลงอย่างต่อเนื่อง ซึ่งหมายความว่าคุณสามารถใช้ SVG บนเว็บไซต์ได้โดยไม่ต้องกังวล
หากคุณต้องการจัดเตรียมทางเลือกสำรองสำหรับ SVG ให้ใช้เครื่องมือ เช่น Grumpicon จาก Filament Group ทรัพยากรนี้สร้าง-p.webp
