ไฟล์ SVG คืออะไร (และคุณจะอัปโหลด SVG ไปยัง WordPress ได้อย่างไร)

สาเหตุหลักที่ไฟล์ SVG ได้รับความนิยมเป็นพิเศษในหมู่นักพัฒนาและนักออกแบบก็คือ ไฟล์เหล่านี้มีรูปแบบภาพที่ปรับขนาดได้ โดยทั่วไปขนาดไฟล์จะเล็กกว่า (บางครั้งก็ค่อนข้างน้อย) และไม่ทำให้เกิดภาพพิกเซลบนหน้าจอเรตินา ตามค่าเริ่มต้น WordPress จะไม่อนุญาตให้คุณอัปโหลดรูปแบบไฟล์ SVG สาเหตุหลักมาจากปัญหาด้านความปลอดภัย

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

หวังว่าวันหนึ่งเราจะมี SVG เป็นส่วนหนึ่งของ WordPress core แต่เรายังไปไม่ถึงจุดนั้น

ไฟล์ SVG คืออะไร?

SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) เป็น ภาพเวกเตอร์แบบ XML ที่เว็บไซต์และแบรนด์มักใช้เพื่อแสดงโลโก้และไอคอนบนเว็บไซต์ Wikipedia กำหนด SVG เป็น:

SVG (กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้) เป็นรูปแบบภาพเวกเตอร์แบบ XML สำหรับกราฟิกสองมิติพร้อมรองรับการโต้ตอบและภาพเคลื่อนไหว ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 2542

คุณยังสามารถจัดการไฟล์ SVG ด้วยโค้ดหรือโปรแกรมแก้ไขข้อความของคุณได้ ปัจจุบัน SVG ถูกใช้โดย 33% ของเว็บไซต์ทั้งหมด และดังที่คุณเห็นด้านล่าง อัตราการนำไปใช้นั้นเติบโตอย่างรวดเร็ว ไซต์ยอดนิยมเช่น Google, Reddit, Dropbox, ESPN และแม้แต่เว็บไซต์ของเราที่ Kinsta ก็ใช้ SVG

รองรับไฟล์ SVG

ขณะนี้ไฟล์ SVG รองรับเบราว์เซอร์หลักทั้งหมดรวมถึงเบราว์เซอร์มือถือ ปัญหาเดียวที่คุณอาจพบคือถ้าคุณยังคงต้องการการสนับสนุนสำหรับ IE8 ซึ่งเราหวังว่าคุณจะไม่ไม่ต้องการ IE8 มีส่วนแบ่งตลาดเบราว์เซอร์ประมาณ 0.36% เท่านั้นและไม่รองรับอีกต่อไป นี่คือบทความที่ยอดเยี่ยมโดย Lubos ว่าทำไมนักพัฒนาจึงควรหยุดสนับสนุน IE8, IE9 และ IE10 จากมุมมองทางธุรกิจ อาจไม่สามารถทำได้เสมอไป แต่เขานำเสนอข้อดีบางประการ หากคุณยังคงต้องการการสนับสนุน IE8 ด้วยเหตุผลอย่างยิ่งยวด คุณสามารถกำหนดรูปภาพสำรอง (PNG หรือ JPG) สำหรับรูปภาพ SVG ของคุณได้ แต่เราจะไม่พูดถึงเรื่องนี้ในวันนี้ ด้านล่างนี้คือรายการเบราว์เซอร์ที่รองรับ:

• Internet Explorer 9, 10, 11+ และ Edge
• Firefox 2+
• Chrome 4+
• Safari 3.1+
• โอเปร่า 10+
• iOS Safari 3.2+
• เบราว์เซอร์ Android 3+
• Firefox สำหรับ Android 86+
• โอเปร่ามินิ(ทั้งหมด)
• Opera Mobile 12+
• Chrome สำหรับ Android 89+
• UC Browser สำหรับ Android 12.12+
• ซัมซุง อินเทอร์เน็ต 4+
• เบราว์เซอร์ QQ 10.4
• Baidu Browser 7.12
• เบราว์เซอร์ KaiOS 2.5

ประโยชน์ของการใช้ไฟล์ SVG

ไฟล์ SVG เป็นรูปแบบเวกเตอร์ ซึ่งหมายความว่า สามารถปรับขนาดได้โดยอัตโนมัติ ทั้งในเบราว์เซอร์และเครื่องมือแก้ไขรูปภาพ สิ่งนี้ทำให้พวกเขายอดเยี่ยมสำหรับทั้งนักออกแบบกราฟิกและเว็บไซต์ โดยปกติเมื่อคุณพยายามแก้ไข PNG หรือ JPG ในเครื่องมืออย่าง Photoshop, Sketch หรือ Paint คุณจะไม่สามารถขยายขนาดภาพเหล่านั้นได้หากไม่มีภาพพิกเซล ด้วย SVG คุณสามารถขยายขนาดให้เป็นจำนวนที่ไม่จำกัด และพวกมันจะดูสมบูรณ์แบบพิกเซล (หรือเราควรบอกว่าเวกเตอร์สมบูรณ์แบบ) ทุกครั้ง นี่คือเหตุผลที่รูปแบบภาพที่ดีสำหรับหน้าจอเรตินา

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

ตามธรรมเนียม SVG นั้น (ไม่เสมอไป) ในขนาดไฟล์ที่เล็กกว่า PNG หรือ JPG ด้วยการใช้ SVG คุณสามารถเพิ่มความเร็วให้กับไซต์ WordPress ของคุณได้ เนื่องจากคุณจะลดขนาดหน้าโดยรวมของคุณ Genki เขียนบทความที่ยอดเยี่ยมซึ่งเขาเปรียบเทียบขนาดของ SVG กับ PNG กับ JPEG และนี่คือการเปรียบเทียบ JPG กับ JPEG ของเรา ด้านล่างนี้คือประเด็นสำคัญบางส่วนจากการทดสอบของเขา ซึ่งเขาได้เปรียบเทียบรูปภาพสามประเภทที่แตกต่างกัน

JPG (ขนาดที่เหมาะสมที่สุด: 81.4 KB)

PNG (ขนาดที่ปรับให้เหมาะสม: 85.1 KB)

SVG (ขนาดที่ปรับให้เหมาะสม: 6.1 KB)

ดังที่คุณเห็นด้านบน SVG มี ขนาดไฟล์ลดลง 92.51% เมื่อเทียบกับ JPG และเมื่อเทียบกับ PNG 92.83% . นี่เป็นความแตกต่างของขนาดไฟล์ที่ค่อนข้างน่าประทับใจ อย่างไรก็ตาม มีข้อแม้อยู่ประการหนึ่ง ในขณะที่เขาทดสอบภาพที่มีรายละเอียดมากขึ้น ในที่สุด SVG ก็จะมีขนาดใหญ่กว่า JPG หรือ PNG

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

นอกจากนี้ สิ่งสำคัญที่ควรทราบคือเครือข่ายโซเชียลมีเดีย เช่น Facebook และ Twitter ไม่รองรับ SVG สำหรับการแชร์ ดังนั้น หากคุณใช้ SVG สำหรับรูปภาพเด่น คุณจะต้องใช้คุณลักษณะ Yoast SEO และอัปโหลด PNG หรือ JPG สำหรับ OG และเมตาแท็ก มิฉะนั้น คุณอาจเสี่ยงที่รูปภาพเด่นของคุณไม่แสดงเลย

เหตุใดการรักษาความปลอดภัย SVG จึงมีความสำคัญ

เหตุผลที่ SVG ไม่ได้เป็นส่วนหนึ่งของ WordPress core ก็เพราะมีข้อกังวลด้านความปลอดภัยที่ต้องแก้ไข คุณสามารถติดตามการสนทนาเกี่ยวกับ SVG ในแกนหลักของ WordPress (#24251) ซึ่งเริ่มต้นขึ้นในปี 2013 SVG เป็นไฟล์ XML ซึ่งเปิดช่องโหว่ต่างๆ ซึ่งรูปแบบภาพปกติจะไม่ได้รับผลกระทบ ซึ่งรวมถึงการโจมตีเอนทิตีภายนอก XML (XXE) เอนทิตีที่ซ้อนกันแบบวางระเบิด และการโจมตี XSS

Mario Heiderich เผยแพร่การนำเสนอเชิงลึกเกี่ยวกับความเสี่ยงด้านความปลอดภัยเนื่องจากการแทรกเนื้อหาที่ใช้งานอยู่ด้วยไฟล์ SVG ตัวอย่างหนึ่งที่ให้ไว้คือ JavaScript ถูกฝังอยู่ใน SVG และสามารถโทรหา Mario บน Skype ได้จริง นั่นเป็นสิ่งที่น่ากลัว! SecuPress ผู้เขียนปลั๊กอินความปลอดภัย WordPress ยังได้กล่าวถึงเรื่องที่ต้องระมัดระวังเมื่อเพิ่ม SVG ใน WordPress และความสำคัญของการทำอย่างถูกต้อง

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

 function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types');

วิธีแก้ไขคือ SVGs จะต้องถูกฆ่าเชื้อ การฆ่าเชื้อนั้นเป็นการทำความสะอาดรหัสหรือการป้อนข้อมูลเพื่อหลีกเลี่ยงปัญหาด้านความปลอดภัย (เช่น การใส่รหัส) รหัสที่ขัดแย้งกัน และข้อผิดพลาด สิ่งนี้อาจเกี่ยวข้องกับสิ่งต่าง ๆ เช่นการเข้ารหัสข้อมูล การกรองและการตรวจสอบสตริง ฯลฯ นี่คือจุดเริ่มต้นของไลบรารี SVG-Sanitizer ของ Daryll Doyle ซึ่งเขาหมายถึง "ความพยายามของเขาในการสร้าง SVG Sanitizer ที่ดีใน PHP" ลองดูตัวอย่างผลิตภัณฑ์ฆ่าเชื้อ SVG ของเขาเพื่อดูการใช้งานจริง

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

วิธีเปิดใช้งาน WordPress SVG Support อย่างปลอดภัย

ดาริลล์ได้พัฒนาปลั๊กอิน WP SVG (หรือที่เรียกว่า Safe SVG) ซึ่ง ใช้ไลบรารี SVG-Sanitizer เมื่ออัปโหลดภาพ SVG ไปยังไลบรารีสื่อ WordPress ของคุณ ปลั๊กอินยังช่วยให้คุณดู SVG ได้เหมือนภาพปกติในไลบรารีสื่อ

คุณสามารถดาวน์โหลด Safe SVG ได้ฟรีจากพื้นที่เก็บข้อมูล WordPress หรือโดยการค้นหาภายในแดชบอร์ด WordPress ภายใต้ปลั๊กอิน "เพิ่มใหม่" คุณสามารถลุกขึ้นและไปได้ด้วยการคลิกเพียงไม่กี่ครั้ง

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

คุณอาจต้องการลองใช้ SVG Support เป็นปลั๊กอินสำรอง

ก่อนอัปโหลดไฟล์ SVG สิ่งสำคัญคือต้องเข้าใจว่าไฟล์เหล่านี้มีพฤติกรรมแตกต่างจากรูปภาพเล็กน้อย เมื่อส่งออก SVG จากเครื่องมือแก้ไขรูปภาพ คุณจะต้องส่งออกข้อความเป็นเส้นโค้ง (หรือสร้างโครงร่าง) มิฉะนั้น ข้อความอาจแสดงผลแตกต่างกันเล็กน้อยในเบราว์เซอร์ต่างๆ

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

สิ่งนี้ยังช่วยให้เราใช้แผงควบคุมของธีมเพื่อเปลี่ยนโลโก้ในส่วนหัว WordPress ของเราเป็นไฟล์ SVG ของเรา คุณสามารถดูได้ด้านล่างนี้ว่ากำลังให้บริการไฟล์ .svg และดูสวยงามบนจอเรตินา

มีการปรับแต่งเพิ่มเติมอีกหนึ่งอย่างที่เราต้องทำ ในเดสก์ท็อปและมือถือ IE9-11 ยังไม่ได้ปรับขนาดไฟล์ SVG อย่างเหมาะสม การเพิ่มความสูงและความกว้างช่วยแก้ปัญหานี้ได้ อาจแตกต่างกันไปตามธีม แต่ในไซต์ทดสอบของเรา เราเพียงแค่แก้ไขไฟล์ header.php และเพิ่มมิติข้อมูลที่กำหนดเองเหล่านี้ ธีม WordPress บางธีมใช้ CSS เพื่อแก้ไขการปรับขนาด ซึ่งไม่เป็นผลดีต่อประสิทธิภาพการทำงาน แต่เนื่องจากคุณอาจต้องเพิ่มโค้ดเพิ่มเติมเพื่อแก้ไขปัญหา IE

และนั่นแหล่ะ! คุณได้เปิดใช้งานการรองรับ WordPress SVG อย่างปลอดภัยแล้ว ปลั๊กอินและหรือวิธีการนี้ไม่ได้รับการรับรองหรือสนับสนุนโดยแกนหลักของ WordPress ดังนั้นให้ใช้โดยยอมรับความเสี่ยงเอง อย่างไรก็ตาม หากคุณได้อัปโหลด SVG ด้วยข้อมูลโค้ดประเภท MIME แล้ว โปรดดำเนินการด้วยวิธีนี้

นอกจากนี้ หากคุณไม่เคยใช้ SVG มาก่อน ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้งาน GZIP บนเซิร์ฟเวอร์ของคุณสำหรับประเภทไฟล์ “image/svg+xml” เพื่อให้แน่ใจว่าถูกบีบอัดและจะโหลดได้เร็วที่สุด บางครั้งผู้ดูแลระบบจะเปิดใช้งานไฟล์ประเภทมาตรฐานมากกว่าเท่านั้น หมายเหตุ: GZIP เปิดใช้งานบนเซิร์ฟเวอร์ Kinsta ทั้งหมดสำหรับ SVG แล้ว

สรุป

SVG เป็นวิธีที่ยอดเยี่ยมในการปรับปรุงรูปลักษณ์ของเว็บไซต์ของคุณ! เราขอแนะนำให้ใช้ SVG, PNG และ JPG ร่วมกันเพื่อให้ได้ประสิทธิภาพที่ดีที่สุด เนื่องจากภาพที่ละเอียดมากจะแสดงผลได้ไม่ดีเท่าในรูปแบบ SVG SVG นั้นยอดเยี่ยมสำหรับโลโก้ของคุณ เพื่อให้แน่ใจว่าจะดูสมบูรณ์แบบในทุกหน้าจอ พร้อมด้วยไอคอน

คุณคิดยังไง? คุณเคยใช้ SVG บนไซต์ WordPress ของคุณหรือไม่?