คำแนะนำเกี่ยวกับรูปแบบภาพกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG)

มีแง่มุมหนึ่งของอินเทอร์เน็ตที่คุณไม่สามารถหลีกเลี่ยงได้ นั่นคือ รูปภาพ ในช่วงแรก ๆ ของเว็บ มันเป็นเรื่องที่เข้มงวดและมีเพียงข้อความเท่านั้น อย่างไรก็ตาม ขณะนี้ เรามีรูปแบบภาพเฉพาะเพื่อช่วยให้เราแสดงภาพที่คมชัด รูปแบบ Scalable Vector Graphics (SVG) เป็นหนึ่งในรูปแบบใหม่ล่าสุดและยืดหยุ่นที่สุดที่มีอยู่

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

สำหรับโพสต์นี้ เราจะพูดถึง Scalable Vector Graphics เพิ่มเติมและวิธีที่พวกเขาสามารถช่วยคุณได้ เราจะพูดถึงวิธีการรวมไว้ในเว็บไซต์ WordPress ของคุณ

ไพรเมอร์ด่วนสำหรับรูปแบบรูปภาพบนเว็บทั่วไป

ก่อนที่เราจะเปลี่ยนไปใช้ SVG และวิธีใช้งาน เราควรพูดถึงรูปแบบภาพหลักที่เราใช้สำหรับเว็บเสียก่อน มีสามข้อสังเกต:

• กลุ่มผู้เชี่ยวชาญด้านการถ่ายภาพร่วม (JPEG) ตามชื่อที่แนะนำ หากคุณต้องการแสดงภาพที่ถ่ายด้วยกล้องดิจิตอล นี่คือรูปแบบสำหรับคุณ
• กราฟิกเครือข่ายแบบพกพา (PNG) คุณจะต้องใช้รูปแบบ PNG เพื่อแสดงกราฟิกที่สร้างขึ้น เช่น จาก Adobe Illustrator
• รูปแบบการแลกเปลี่ยนกราฟิก (GIF) เฮ้ ทุกคนชอบคลิปตลกของรายการทีวีเพื่อใช้เป็นปฏิกิริยาบนโซเชียลมีเดีย! GIF เป็นรูปแบบที่สมบูรณ์แบบสำหรับกราฟิกแอนิเมชั่นที่พกพาสะดวก

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

รูปแบบกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้คืออะไร

คุณจะต้องอดทนกับเราในส่วนนี้ เนื่องจากเราจะได้รับข้อมูลทางเทคนิคในบางพื้นที่ นอกจากนี้ แนวคิดของ SVG อาจสร้างความสับสน

ไม่มีกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (ประเภท) อันที่จริง สิ่งเหล่านี้ไม่ใช่กราฟิกหรือรูปภาพเลย แต่เป็นรูปแบบของ Extensible Markup Language (XML) สำหรับผู้ที่ไม่รู้ตัว นี่เป็นพี่น้องที่ใกล้ชิดกับ HTML แต่ไม่มีบางแง่มุมของภาษานั้น (เช่น แท็กที่กำหนดไว้ล่วงหน้า)

คุณอาจเข้าใจการเปรียบเทียบแล้ว ลองพิจารณาวิธีสร้างรูปร่างโดยใช้ CSS นี่คือสิ่งที่เราจะพูดถึงในเร็วๆ นี้ ลองนึกภาพ CSS นี้รวมเข้ากับเครื่องห่อเอกสารที่คุณเรียกโดยใช้รูปแบบและโครงสร้างไฟล์มาตรฐาน ( เช่น image.svg เป็นต้น)

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

ทำไมเราถึงมี SVG

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

หากคุณมองย้อนกลับไปที่รูปแบบภาพเว็บหลัก สองรูปแบบไม่เหมาะกับกราฟิกที่สร้างขึ้น (JPEG และ GIF) สิ่งนี้ทำให้ PNGs ต้องเครียด อย่างไรก็ตาม PNGs ประสบปัญหาบางอย่างที่ปรากฏเฉพาะในเว็บสมัยใหม่เท่านั้น:

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

นอกจากนี้ PNG ได้เติมช่องว่างบางส่วนในขณะที่มีตัวเลือกบางอย่างที่สามารถให้คุณภาพของภาพที่สูงเพียงพอ ในบางครั้ง CSS ยังอยู่ในช่วงเริ่มต้น และเรายังไม่มีขอบเขตการออกแบบและการพัฒนาที่เรามีในตอนนี้

ตัวอย่างเช่น เราสามารถใช้คุณสมบัติ border-radius ตั้งแต่ปี 2010 เท่านั้น ซึ่งช่วยให้คุณกำหนดขอบมนและแม้กระทั่งวงกลม คุณจะเห็นการทำงานบนปุ่มต่างๆ มากมาย:

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

ข้อดีของกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

เช่นเดียวกับรูปแบบภาพอื่นๆ Scalable Vector Graphics ไม่ได้สมบูรณ์แบบ แน่นอนว่ามีข้อดีหลายประการ:

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

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

ข้อเสียของกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้

อย่างไรก็ตามไม่ใช่ทุกอย่างที่เป็นสีดอกกุหลาบ SVG ยังคงมีปัญหาบางอย่างที่คุณต้องระวัง:

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

เรายังบอกด้วยว่ามันยากกว่าที่จะสร้าง SVG โดยที่ไม่มีความรู้ด้านการเขียนโปรแกรมในบางกรณีเช่นกัน มีการรองรับที่ดีกว่ามากในโปรแกรมกราฟิก เช่น Affinity Designer และ Adobe Illustrator นอกจากนี้ยังรองรับการส่งออก SVG ในแอป เช่น Google Drawing:

นี่เป็นพื้นที่ที่ได้รับการปรับปรุง แต่ก็ยังล้าหลังเล็กน้อยเมื่อเทียบกับรูปแบบภาพอื่นๆ

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

วิธีใช้ SVG บนเว็บไซต์ WordPress ของคุณ

ข่าวร้ายก็คือ หากคุณต้องการอัปโหลด SVG ไปยัง WordPress โดยไม่ต้องดำเนินการใดๆ คุณจะไม่สามารถอัปโหลดได้ ปัญหาพิเศษประการหนึ่งของการสนับสนุน Scalable Vector Graphics ในปัจจุบันคือ WordPress ไม่อนุญาตให้คุณอัปโหลดภาพเหล่านี้เป็นมาตรฐานสำหรับเหตุผลด้านความปลอดภัย:

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

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

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

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

สรุป

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

ในโพสต์นี้ เราได้นำเสนอข้อมูลมากมายเกี่ยวกับ Scalable Vector Graphics คุณจะใช้ CSS เพื่อปรับรูปภาพให้เข้ากับความต้องการของคุณ และขอบเขตสำหรับการปรับแต่งนั้นยิ่งใหญ่กว่า PNG และ JPEG มาก นอกจากนี้ยังมีน้ำหนักเบา – เหมาะอย่างยิ่งสำหรับหน้าจอขนาดเล็กและการเชื่อมต่ออินเทอร์เน็ตที่ไม่ดี

คุณต้องการใช้ Scalable Vector Graphics บนเว็บไซต์ของคุณหรือไม่ และถ้าใช่ บทความนี้จะช่วยคุณหรือไม่ แจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง!

เครดิตภาพ: GDJ