ไอคอน SVG เทียบกับไอคอน PNG ในเว็บไซต์สมัยใหม่

ฉันสงสัยว่าทำไมเว็บไซต์สมัยใหม่เพียงไม่กี่แห่งยังคงใช้ PNG สำหรับไอคอนเท่านั้น (แต่สมมติฐานนี้เป็นเพียงการสังเกตของฉัน) จนถึงตอนนี้ฉันรู้สาเหตุหลักในการใช้ PNG บน SVG คือ IE8 และ SVG ใช้พลังงาน CPU มากกว่า (แต่ฉันไม่เชื่อว่านี่เป็นปัญหาสำหรับไอคอน 1K ธรรมดา ๆ ) ฉันเห็น (และเราใช้อยู่ในปัจจุบัน) ข้อดีหลายอย่างในการใช้ SVG ไม่ว่าจะใช้เป็นสไปรต์เป็นรูปภาพหรือ SVG แบบอินไลน์

(คำถามกำลังหางานวิจัย: แบบอักษร PNG Sprite vs SVG Sprite vs Iconมุ่งเน้นไปที่ประสิทธิภาพและไม่มีคำตอบที่เกี่ยวข้องIcon Font เทียบกับ SVG แคชและความกังวลของเครือข่ายมุ่งเน้นไปที่การรับส่งข้อมูลเครือข่าย แต่สามารถแก้ไขได้อย่างง่ายดายโดยการเทมเพลต)

หากเว็บไซต์ใหม่รองรับเฉพาะเบราว์เซอร์ที่ทันสมัยมีเหตุผลใดบ้างที่ไม่ใช้ SVG (หรือ - มีเหตุผลใดที่ใช้ PNG สำหรับไอคอน) หากเราไม่สนใจ IE8 และการใช้ SVG ได้รับการสำรองข้อมูลโดยเทมเพลตและ / หรือการแคชจะมีสิ่งใดที่ต้องพึ่งพา SVG เท่านั้น?

เหตุผลที่ SVG อาจเป็นทางเลือกที่ดี:

• รองรับเบราว์เซอร์ทุกขนาดโดยเฉพาะอย่างยิ่งกับ css background-size
• คุณสามารถปรับขนาดขึ้น / ลงได้เช่นไปที่เอฟเฟกต์แบบเลื่อน
• คุณสามารถฝัง SVG และทำการแก้ไขแบบเรียลไทม์ด้วย JavaScript และ DOM
• คุณสามารถจัดรูปแบบ SVG และบางส่วนของ SVG ด้วย CSS (เปลี่ยนสีโครงร่าง ฯลฯ )
• คุณสามารถสร้าง SVG แบบไดนามิกทั้งบนไคลเอนต์หรือเซิร์ฟเวอร์ เนื่องจากลักษณะของข้อความคุณไม่จำเป็นต้องมีไลบรารีระดับต่ำหรือเซิร์ฟเวอร์ที่มีประสิทธิภาพในการสร้าง

เหตุผลที่ PNG อาจเป็นทางเลือกที่ดี:

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

ข้อกังวลอื่น ๆ :

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

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

ฉันพูดแบบนี้ในฐานะคนที่สร้าง UI ด้วยกราฟิกเวกเตอร์ เป็นเครื่องมือออกแบบที่ยอดเยี่ยม แต่สำหรับการจัดส่ง / แบนด์วิดท์ / การเข้าถึงนั้นยากที่จะทำให้ PNG ติดอันดับต้น ๆ เมื่อคืนฉันได้ทดสอบโลโก้ที่รู้จักกันดี CocaCola.svg เกือบ 20K เนื่องจากเป็นสีทึบ / แบนฉันจึงส่งออกเป็น PNG-8 พร้อมการบีบอัดจานสี 12 สีและลดลงเหลือ 1.6K (!!!) สำหรับโลโก้เพียงไม่กี่โลโก้ไม่ใช่เรื่องใหญ่ แต่เมื่อคุณต้องแสดง 40 ของพวกเขา .. ดีคุณได้ภาพ

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

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

ออกแบบให้มีความสุข!

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

ฉันไม่ได้ทำการทดสอบประสิทธิภาพที่มีค่าใด ๆ แต่จากมุมมองเชิงตรรกะควรใช้ SVG อย่างระมัดระวังในเรื่องประสิทธิภาพโดยเฉพาะอย่างยิ่งเมื่อจัดการกับเบราว์เซอร์มือถือวัยกลางคน (ความเครียดของ CPU) จะมีประโยชน์มากในการมีแผนภูมิที่คุณสามารถดูพลังงานของ CPU ที่ใช้โดย 100 ภาพ SVG เทียบกับ 100 ภาพ PNG บนอุปกรณ์ Android และ IOS ที่แตกต่างกัน ...

สิ่งที่น่ารำคาญอีกอย่างของ SVG คือแท็กต้องการแอตทริบิวต์ความกว้างและความสูงสำหรับ Android / Samsung บางเบราว์เซอร์และ IE เก่าที่ดีของเรา และบรรณาธิการ SVG ที่ทันสมัยที่สุดเช่น A *** e Illustrator เพียงแค่เพิ่มแอตทริบิวต์ "viewBox"

สิ่งที่ยอดเยี่ยมที่สุดเกี่ยวกับ SVG คือการแสดงผลที่สวยงามและคมชัดในทุกความหนาแน่นของพิกเซล

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

โปรดทราบว่าSVG ที่มีประสิทธิภาพอาจกลายเป็นสิ่งที่น่ากลัว แม้แต่ในเบราว์เซอร์สมัยใหม่เช่น Chrome (เขียนสิ่งนี้ในปี 2019!) หน้าคล้าย CMS ที่มีไอคอน svg ไม่กี่ 100s (เกือบ 3-800) จะแขวนเบราว์เซอร์เป็นเวลา 5+ วินาทีเพื่อสิ้นสุดการเรนเดอร์ ในขณะเดียวกันกำลังขยาย CPU ออก

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

ตัวเลือก # 1: แปลง svgs เป็น webfont (ดูแผนภูมิประสิทธิภาพที่นี่: http://frozeman.de/blog/2013/08/why-is-svg-so-slow/ )

ตัวเลือก # 2: ถอยกลับไปใช้ PNG แบบเดิม ๆ

ในสถานการณ์เช่นนี้ที่คุณ ~ ไม่อยากทำอะไรแปลก ๆ เช่นการปรับเปลี่ยนสีแบบทันทีและคุณมี SVG หลายอินสแตนซ์ PNG รุ่นเก่าจะทำงานและช่วยชีวิตทั้งวัน!