รองรับ SVG ใน WordPress

เผยแพร่แล้ว: 2022-12-29

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

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

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

เว็บเบราว์เซอร์หลักๆ ทั้งหมด รวมถึง Internet Explorer รองรับรูปแบบ Scalable Vector Graphics (SVG)

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

คุณลักษณะนี้ถูกยกเลิก ถึงกระนั้น เบราว์เซอร์บางตัวอาจยังคงรองรับ แต่อาจถูกลบออกจากมาตรฐานเว็บที่เกี่ยวข้อง อยู่ระหว่างการลบ หรือถูกเก็บไว้เพื่อให้ใช้งานร่วมกันได้เท่านั้น

ฉันจะใช้ Svg ใน WordPress ได้อย่างไร

ฉันจะใช้ Svg ใน WordPress ได้อย่างไร
เครดิตรูปภาพ: pressidium.com

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

ผู้ใช้มักจะชอบ ไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (ไฟล์ SVG) หรือที่เรียกว่ากราฟิกแบบเวกเตอร์ มีขนาดเล็กกว่า PNG หรือ GIF ที่เทียบเท่า และไม่สูญเสียคุณภาพเมื่อปรับขนาดหรือขยาย เนื่องจาก SVG เป็นไฟล์ข้อความ ผู้คนจึงสามารถแก้ไขและแทรกโค้ดที่เป็นอันตรายได้อย่างง่ายดาย เป็นไปได้ว่าโค้ดที่เป็นอันตรายจะถูกแทรกลงใน SVG อันใดอันหนึ่งของคุณ ซึ่งเป็นผลมาจากช่องโหว่นี้ ในลักษณะเดียวกับที่สามารถโหลดรูปแบบอื่นๆ ได้โดยตรง คุณสามารถโหลดภาพใน Safe SVG โดยใช้ปลั๊กอิน Daryll Doyle เนื่องจากมันฆ่าเชื้อไฟล์เมื่ออัปโหลดแล้ว จึงเป็นปลั๊กอินที่ยอดเยี่ยม เป็นไปได้ที่จะจำกัดการเข้าถึงเว็บไซต์ที่มีผู้เผยแพร่หลายราย

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

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

ฉันสามารถใช้ไฟล์ Svg บนเว็บไซต์ได้หรือไม่

ฉันสามารถใช้ไฟล์ Svg บนเว็บไซต์ได้หรือไม่
เครดิตรูปภาพ: howtoheatpress.com

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

กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นรูปแบบกราฟิกที่มีความสำคัญมากขึ้นในการออกแบบเว็บไซต์ เป็นกราฟิกแบบเวกเตอร์ ซึ่งหมายความว่าสามารถปรับขนาดได้โดยไม่สูญเสียคุณภาพ แม้ว่าขนาดของภาพจะแตกต่างกัน แต่ SVG ก็มีลักษณะที่นุ่มนวลและคมชัดกว่าภาพมาตรฐาน HTML ของหน้าสามารถแปลงเป็น SVG ได้ง่ายๆ เพียงแค่พิมพ์ URL หากคุณไม่ได้ใช้ Adobe Flash คุณจะได้รับประสบการณ์ที่เหมือน Flash บนหน้าเว็บ Adobe จะเลิกใช้ Flash ภายในสิ้นปี 2020 ซึ่งเป็นเบราว์เซอร์เดียวที่ไม่รองรับกราฟิกประเภทนี้ หากคุณต้องการสำรองข้อมูล ให้ใช้เครื่องมือเช่น Grumpicon

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

เทียบกับ PNG Svg: กราฟิกใดดีที่สุดสำหรับเว็บไซต์ของคุณ

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