ทำไมต้องใช้ไฟล์ SVG แทน JPG

ข้อดีของ SVG

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

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

SVG เป็นเทคโนโลยีเวคเตอร์

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

SVG เป็นแบบข้อความ

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

SVG เป็น XML และใช้งานได้ในรูปแบบภาษาอื่น ๆ

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

SVG สามารถแก้ไขได้อย่างง่ายดาย

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

รูปภาพ JPG อาจหนักเกินไป

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

ดังนั้นที่ดีกว่า?

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

บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 6/6/17