ประโยชน์ของการใช้กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้
Scalable Vector Graphics หรือ SVG มีบทบาทสำคัญในการออกแบบเว็บไซต์ในปัจจุบัน หากคุณยังไม่ได้ใช้ SVG ในงานออกแบบเว็บของคุณต่อไปนี้คือเหตุผลที่คุณควรเริ่มทำเช่นนี้รวมทั้งข้อบกพร่องที่คุณสามารถใช้สำหรับเบราว์เซอร์รุ่นเก่าที่ไม่สนับสนุนไฟล์เหล่านี้
มติ
ประโยชน์ที่ใหญ่ที่สุดของ SVG คือความเป็นอิสระในการตัดสินใจ เนื่องจากไฟล์ SVG เป็นกราฟิกแบบเวกเตอร์แทนภาพแรสเตอร์ที่ใช้พิกเซลจึงสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพของภาพใด ๆ วิธีนี้จะเป็นประโยชน์อย่างยิ่งเมื่อคุณสร้างเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์ที่ต้องการ ดูดีและทำงานได้ดีในอุปกรณ์และขนาดหน้าจอที่หลากหลาย
ไฟล์ SVG สามารถปรับขนาดขึ้นหรือลงเพื่อรองรับขนาดที่เปลี่ยนแปลงและความต้องการในการออกแบบของเว็บไซต์ที่ตอบสนองของคุณและคุณไม่จำเป็นต้องกังวลเกี่ยวกับกราฟิกเหล่านั้นที่มีคุณภาพที่ถูกบุกรุกในทุกขั้นตอน
ขนาดไฟล์
หนึ่งในความท้าทายที่ใช้ภาพแรสเตอร์ (JPG, PNG, GIF) บน เว็บไซต์ที่ตอบสนอง คือขนาดไฟล์ของรูปภาพเหล่านั้น เนื่องจากภาพแรสเตอร์ไม่ได้ปรับขนาดตามวิธีการของเวกเตอร์คุณต้องส่งภาพที่ใช้พิกเซลของคุณในขนาดที่ใหญ่ที่สุดเท่าที่จะแสดง ทั้งนี้เป็นเพราะคุณสามารถทำให้ภาพมีขนาดเล็กลงและรักษาคุณภาพของภาพได้ แต่ภาพไม่เหมือนกันสำหรับการสร้างภาพขนาดใหญ่ขึ้น ผลสุดท้ายคือคุณมักจะมีภาพที่ใหญ่กว่าที่แสดงบนหน้าจอของบุคคลซึ่งหมายความว่าพวกเขาจำเป็นต้องดาวน์โหลดไฟล์ที่มีขนาดใหญ่
SVG ตอบสนองความท้าทายนี้ เนื่องจากกราฟิกเวกเตอร์สามารถปรับขนาดได้คุณจึงสามารถมีขนาดไฟล์ได้ไม่มากนักโดยไม่คำนึงว่าภาพเหล่านั้นจะมีขนาดใหญ่เพียงใด นี้จะมีผลดีต่อประสิทธิภาพโดยรวมของเว็บไซต์และความเร็วในการดาวน์โหลด
การจัดรูปแบบ CSS
รหัส SVG สามารถเพิ่มลงใน HTML ของหน้าได้โดยตรง นี่เป็นที่รู้จักกันในชื่อ "SVG แบบอินไลน์" หนึ่งในข้อดีของการใช้ SVG แบบอินไลน์คือเนื่องจากกราฟิกที่ดึงมาจากเบราเซอร์ตามโค้ดของคุณไม่จำเป็นต้องขอ HTTP เพื่อเรียกไฟล์รูปภาพ ประโยชน์อีกประการหนึ่งคือ SVG แบบอินไลน์สามารถจัดรูปแบบด้วย CSS ได้
ต้องการเปลี่ยนสีของไอคอน SVG หรือไม่? แทนที่จะต้องเปิดภาพนั้นในซอฟต์แวร์แก้ไขประเภทใดและส่งออกและอัปโหลดไฟล์อีกครั้งคุณสามารถเปลี่ยนไฟล์ SVG ด้วย CSS เพียงไม่กี่บรรทัด
นอกจากนี้คุณยังสามารถใช้สไตล์ CSS อื่น ๆ ในกราฟิก SVG เพื่อเปลี่ยนแปลงรูปแบบเหล่านี้ได้ในสภาวะที่เลื่อนหรือเพื่อความต้องการในการออกแบบบางอย่าง คุณยังสามารถสร้างภาพเคลื่อนไหวเหล่านั้นเพื่อเพิ่มการเคลื่อนไหวและการโต้ตอบกับเพจ
ภาพเคลื่อนไหว
เนื่องจากไฟล์ SVG แบบอินไลน์สามารถจัดรูปแบบด้วย CSS ได้คุณจึงสามารถใช้ภาพเคลื่อนไหว CSS ได้เช่นกัน CSS เปลี่ยนและเปลี่ยนเป็นสองวิธีง่ายๆในการเพิ่มชีวิตให้กับไฟล์ SVG คุณจะได้รับประสบการณ์การใช้งานแบบ Flash ที่สมบูรณ์แบบบนหน้าเว็บโดยไม่ต้อง เสียเวลากับข้อเสียที่มากับการใช้ Flash บนเว็บไซต์ในปัจจุบัน
การใช้ SVG
มีประสิทธิภาพเท่ากับ SVG กราฟิกเหล่านี้ไม่สามารถแทนที่รูปแบบรูปภาพอื่น ๆ ที่คุณใช้ในเว็บไซต์ของคุณได้ ภาพถ่ายที่ต้องการความลึกของสีลึกจะยังคงต้องเป็นไฟล์ JPG หรือไฟล์ PNG แต่ภาพที่เรียบง่ายเหมือนไอคอนจะเหมาะกับการทำงานเป็น SVG
SVG สามารถเหมาะสมกับภาพประกอบที่ซับซ้อนเช่นโลโก้ บริษัท หรือกราฟและแผนภูมิ กราฟิกทั้งหมดจะได้รับประโยชน์จากการปรับขนาดได้สามารถใช้ CSS ได้และข้อดีอื่น ๆ ที่ระบุไว้ในบทความนี้
การสนับสนุนสำหรับเบราว์เซอร์รุ่นเก่า
การสนับสนุนปัจจุบันสำหรับ SVG ดีมากในเว็บเบราเซอร์สมัยใหม่ เบราว์เซอร์เท่านั้นที่ไม่มีการสนับสนุนกราฟิกเหล่านี้จริงๆคือ Internet Explorer รุ่นเก่า (เวอร์ชัน 8 ขึ้นไป) และ Android เวอร์ชันเก่ากว่าสองสามเวอร์ชัน โดยรวมแล้วส่วนมากของประชากรที่เรียกดูยังคงใช้เบราว์เซอร์เหล่านี้และจำนวนดังกล่าวยังคงหดตัว ซึ่งหมายความว่า SVG สามารถใช้งานได้อย่างปลอดภัยบนเว็บไซต์ในปัจจุบัน
หากคุณต้องการให้ fallback สำหรับ SVG คุณสามารถใช้เครื่องมือเช่น Grumpicon จากกลุ่ม Filament ได้ ทรัพยากรนี้จะนำไฟล์ภาพ SVG ของคุณและสร้างการพังก์ PNG สำหรับเบราว์เซอร์ที่มีอายุมากกว่า
แก้ไขโดย Jeremy Girard เมื่อวันที่ 1/27/17